vue 导出（下载）XLSX 表格

有2中模式，第一种是在前端生成下载，第二种模式通过请求支持的api获取直接下载

第1中模式第1种方式实现（第1种方式可以改表格的title 的数据等，比较灵活，第二种是知道下载页面的表格，不能改）

1. npm安装file-saver，xlsx （2种方式都要安装这两个插件）

         npm install file-saver --save
         npm install xlsx --save

2. 构建函数，创建一个工具ts 文件toolFn.ts,然后export导出

//toolFn.ts文件
import fs  from 'file-saver'
import XLSX from 'xlsx'
function downloadXlsxFile(dataArray: any, fields: any, filename: string) {
  /**
   * 表格数据 => dataArray=[{id:"1",name:"666",sex:"男"}] 
   * 表格数据的title => fields={id:"id",name:"名字",sex:"性别"}
   * 表格名字 => filename
   */
  var data = JSON.stringify(dataArray);
  var newData = JSON.parse(data);
  newData.forEach((item: any) => {
    if (item) {
      for (let i in item) {
        if (fields.hasOwnProperty(i)) {
          item[fields[i]] = item[i];
        }
        delete item[i]; //删除原先的对象属性
      }
    }

  })
  let sheetName = filename //excel的文件名称
  let wb = XLSX.utils.book_new()  //工作簿对象包含一SheetNames数组，以及一个表对象映射表名称到表对象。XLSX.utils.book_new实用函数创建一个新的工作簿对象。
  let ws = XLSX.utils.json_to_sheet(newData, { header: Object.values(fields) }) //将JS对象数组转换为工作表。
  wb.SheetNames.push(sheetName)
  wb.Sheets[sheetName] = ws
  const defaultCellStyle = { font: { name: "Verdana", sz: 13, color: "FF00FF88" }, fill: { fgColor: { rgb: "FFFFAA00" } } };//设置表格的样式
  let wopts = { bookType: 'xlsx', bookSST: false, type: 'binary', cellStyles: true, defaultCellStyle: defaultCellStyle, showGridLines: false }  //写入的样式
  let wbout = XLSX.write(wb, wopts)
  let blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' })
  fs.saveAs(blob, filename + '.xlsx') 
}
function  s2ab(s) {
  if (typeof ArrayBuffer !== 'undefined') {
    var buf = new ArrayBuffer(s.length)
    var view = new Uint8Array(buf)
    for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff
    return buf
  } else {
    var buf = new Array(s.length);
    for (var i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xFF;
    return buf;
  }
}
export { downloadXlsxFile };

3. 在页面中调用这个downloadXlsxFile()函数

import {downloadXlsxFile } from "@/utils/toolFn"
  setup() {
    const download=()=>{
     var data=[{id:"1",name:"661",sex:"男"},{id:"2",name:"662",sex:"女"}] 
     var fields={id:"",name:"名字",sex:"性别"}; 
     let filename = '测试数据1'
   downloadXlsxFile(data,fields,filename)
}

4.第1中模式第1种方式 结束了

第1中模式第2种方式实现（直接下载页面的表格，不能改）

1. npm安装file-saver，xlsx （2种方式都要安装这两个插件）

         npm install file-saver --save
         npm install xlsx --save

2. 直接在table加id,然后下载的事件中知道下载

   
下载

import  FileSaver  from "file-saver";
import XLSX from 'xlsx'
function download(){
     var wb=XLSX.utils.table_to_book(document.querySelector("#out-table"));
     var wbout=XLSX.write(wb,{bookType:'xlsx',bookSST:true,type:'array'})
     try{
       FileSaver.saveAs(new Blob([wbout],{type:'application/octer-stream'}),'表格名称.xlsx')
     }catch(e){if (typeof console !=="undefined") console.log(e,wbout)}
    }
 ### 2. 结束