vue中怎么使用xlsx插件下载内容默认居中的excel

这篇文章主要介绍“vue中怎么使用xlsx插件下载内容默认居中的excel”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“vue中怎么使用xlsx插件下载内容默认居中的excel”文章能帮助大家解决问题。

概述

本文封装一个下载excel方法，下载的excel默认内容水平、垂直居中。

需要的依赖安装

npm i xlsx

npm i xlsx-style-medalsoft

npm i file-saver

这里说明下，xlsx-style-medalsoft这个依赖是掘金大神fork的xlsx-style的一个依赖，大神非常厉害，实现的功能非常多，原文链接：点击跳转大神链接

有问题直接去大神链接上咨询，我看不懂太厉害的代码。

正文

在main.js引入依赖，封装方法挂载到全局vue上。

引入依赖

import FileSaver from 'file-saver';

import XLSX from 'xlsx';

import XLSXS from 'xlsx-style-medalsoft';

封装downTable挂载到vue上，方便全局调用

Vue.prototype.downTable = function（tableID,fileName,widthList）{

  let xlsxParam = {raw:true}

  // tableID为el-table的id名称

  let wb =XLSX.utils.table_to_book（document.querySelector（"#"+ tableID），xlsxParam）;

  // widthList为表格宽度数组，单位wpx，可以不传，数组格式如[{wpx:140},{wpx:150},…]

  let arr = [];

  if（widthList&&Array.isArray（widthList））{

    arr=widthList;

  }

  wb["Sheets"]["Sheet1"]["!cols"]=arr;

  let wbs = wb["Sheets"]["Sheet1"];

  // 每个单元格设置居中

  for（const key in wbs）{

    if（key.indexOf（"!"） === -1 && wbs[key].v）{

      wbs[key].s={

        alignment:{

          horizontal:"center",

          vertical:'center',

          wrap_text:true,

        }

      }

    }

  }

  // 获取二进制字符串作为输出

  let wbout = XLSXS.write（wb,{

    bookType:"xlsx",

    bookSST:true,

    type:"buffer",

  }）;

  // 下载

  try{

    FileSaver.saveAs（

      new Blob（[wbout],{type:"application/octet-stream"}），

      // 设置导出文件名称

      fileName + ".xlsx"

    ）

  }catch（e）{

    if（typeof console !== "undefined"） console.log（e.wbout）;

  }

  return wbout

}

测试封装的方法

下载下面表格内容

代码

<template>

  <div class="DownTable">

      <el-button type="primary" @click="downTable（'userInfo','员工信息表'）">下载</el-button>

     <el-table

      :data="tableData"

      id="userInfo"

      style="width: 100%">

      <el-table-column   label="原信息" align="center">

        <el-table-column  prop="date"  label="日期"  width="180">

        </el-table-column>

        <el-table-column  prop="name"  label="姓名"  width="180">

        </el-table-column>

      </el-table-column>

      <el-table-column   label="现信息" align="center">

        <el-table-column  prop="date"  label="日期"  width="180">

        </el-table-column>

        <el-table-column  prop="name"  label="姓名"  width="180">

        </el-table-column>

      </el-table-column>

      <el-table-column  prop="address"  label="地址">

      </el-table-column>

    </el-table>

  </div>

</template>

<script>

export default {

  name: 'DownTable',

  components: {

  },

  data（）{

    return{

       tableData: [{

            date: '2016-05-02',

            name: '王小虎',

            address: '上海市普陀区金沙江路 1518 弄'

          }, {

            date: '2016-05-04',

            name: '王小虎',

            address: '上海市普陀区金沙江路 1517 弄'

          }, {

            date: '2016-05-01',

            name: '王小虎',

            address: '上海市普陀区金沙江路 1519 弄'

          }, {

            date: '2016-05-03',

            name: '王小虎',

            address: '上海市普陀区金沙江路 1516 弄'

          }]

    }

  },

  methods:{

  },

}

</script>

内容水平垂直居中了，基本满足了我们的要求，还可以传入宽度列表，让表格更好看一点。

改进代码

只需要点击事件加宽度列表数组

<el-button type="primary" 

      @click="downTable（'userInfo','员工信息表',[{wpx:120},{wpx:120},{wpx:120},{wpx:120},{wpx:200}]）">

      下载</el-button>

关于“vue中怎么使用xlsx插件下载内容默认居中的excel”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注亿速云行业资讯频道，小编每天都会为大家更新不同的知识点。