概述

 

本文封装一个下载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>