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

概述

1. 本文封装一个下载excel方法,下载的excel默认内容水平、垂直居中。
2. 需要的依赖安装

npm i xlsx
npm i xlsx-style-medalsoft
npm i file-saver

这里说明下，xlsx-style-medalsoft这个依赖是掘金大神fork的xlsx-style的一个依赖，大神非常厉害，实现的功能非常多，原文链接：点击跳转大神链接
有问题直接去大神链接上咨询，我看不懂太厉害的代码。

正文

1. 在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
}

2. 测试封装的方法

• 下载下面表格内容
  
• 代码

<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>

• 点击下载，下载出的excel效果
  
  内容水平垂直居中了，基本满足了我们的要求，还可以传入宽度列表，让表格更好看一点。
• 改进代码
  只需要点击事件加宽度列表数组

<el-button type="primary" 
      @click="downTable('userInfo','员工信息表',[{wpx:120},{wpx:120},{wpx:120},{wpx:120},{wpx:200}])">
      下载</el-button>

• 改进后下载效果图。