vue前端实现导出,文字居中可修改样式哦(宽高等)如此简单~~

1.安装依赖

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

2.哪个页面使用哪个页面引入

import FileSaver from "file-saver";
import XLSX2 from "xlsx";
import XLSX from "xlsx-style";

3.效果图（可以实现多表头，也可以实现单行表头）

4.页面表格需要有id（element iview都可以）

 <Table :columns="columns13" :data="data5" id='mytable' border></Table>

还需要一个按钮  

<span @click="setExport2Excel()">导出</span>

5.下面数据写在data里面   也可以改成你自己需要的数据

 columns13: [
                    {
                        title: 'Date',
                        key: 'date',
                        resizable: true,
                        width: 180
                    },
                    {
                        title: 'Name',
                        key: 'name',
                        resizable: true,
                        width: 180
                    },
                    {
                        title: 'Age',
                        key: 'age',
                        resizable: true,
                        width: 180
                    },
                    {
                        title: 'Address',
                        key: 'address'
                    }
                ],
                data5: [
                    {
                        name: 'John Brown',
                        age: 18,
                        address: 'New York No. 1 Lake Park',
                        date: '2016-10-03'
                    },
                    {
                        name: 'Jim Green',
                        age: 24,
                        address: 'London No. 1 Lake Park',
                        date: '2016-10-01'
                    },
                    {
                        name: 'Joe Black',
                        age: 30,
                        address: 'Sydney No. 1 Lake Park',
                        date: '2016-10-02'
                    },
                    {
                        name: 'Jon Snow',
                        age: 26,
                        address: 'Ottawa No. 2 Lake Park',
                        date: '2016-10-04'
                    }
                ]

 6 .下面方法写在 methods 里面

  setExport2Excel() {
      /* generate workbook object from table */
      var wb = XLSX2.utils.table_to_sheet(document.querySelector("#mytable")); //mytable为表格的id名
      console.log(wb)
      for (var i = 0; i < 11; i++) {
        wb["!cols"][i] = {
          wpx: 130,
        };
      }
      // 样式的文档地址
      // https://www.npmjs.com/package/xlsx-style
      for (const key in wb) {
        if (key.indexOf("!") === -1 && wb[key].v) {
          wb[key].s = {
            font: {
              //字体设置
              sz: 13,
              bold: false,
              color: {
                rgb: "000000", //十六进制，不带#
              },
            },
            alignment: {
              //文字居中
              horizontal: "center",
              vertical: "center",
              wrap_text: true,
            },
            border: {
              // 设置边框
              top: {
                style: "thin",
              },
              bottom: {
                style: "thin",
              },
              left: {
                style: "thin",
              },
              right: {
                style: "thin",
              },
            },
          };
        }
      }
      var data = this.addRangeBorder(wb["!merges"], wb); //合并项添加边框
      // 暂无筛选结果   (这个位置 如果导出之后页面出现无名数据,这个暂无筛选结果,就是我写的时候的无名数据,莫名其妙就出现了,把这个不需要的,替换掉我的文字即可)
      for(let i in data){
        console.log(data[i].v)
        if(data[i].v == '暂无筛选结果') delete data[i]
      }
      var filedata = this.sheet2blob(data);
      this.openDownloadDialog(filedata,"日收统计.xlsx");
    },
    //为合并项添加边框
    addRangeBorder(range, ws) {
      let arr = [
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "I",
        "J",
        "K",
        "L",
        "M",
        "N",
        "O",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "U",
        "V",
        "W",
        "X",
        "Y",
        "Z",
      ];

      // range.forEach((item) => {
      //   let startColNumber = Number(item.s.r),
      //     endColNumber = Number(item.e.r);
      //   let startRowNumber = Number(item.s.c),
      //     endRowNumber = Number(item.e.c);
      //   const test = ws[arr[startRowNumber] + (startColNumber + 1)];
      //   for (let col = startColNumber; col <= endColNumber; col++) {
      //     for (let row = startRowNumber; row <= endRowNumber; row++) {
      //       ws[arr[row] + (col + 1)] = test;
      //     }
      //   }
      // });
      return ws;
    },
    //将一个sheet转成最终的excel文件的blob对象，然后利用URL.createObjectURL下载
    sheet2blob(sheet, sheetName) {
      sheetName = sheetName || "sheet1";
      var workbook = {
        SheetNames: [sheetName],
        Sheets: {},
      };
      workbook.Sheets[sheetName] = sheet; // 生成excel的配置项

      var wopts = {
        bookType: "xlsx", // 要生成的文件类型
        bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
        type: "binary",
      };
      var wbout = XLSX.write(workbook, wopts);
      var blob = new Blob([s2ab(wbout)], {
        type: "application/octet-stream",
      }); // 字符串转ArrayBuffer
      function s2ab(s) {
        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;
      }
      return blob;
    },
    openDownloadDialog(url, saveName) {
      if (typeof url == "object" && url instanceof Blob) {
        url = URL.createObjectURL(url); // 创建blob地址
      }
      var aLink = document.createElement("a");
      aLink.href = url;
      aLink.download = saveName || ""; // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效
      var event;
      if (window.MouseEvent) event = new MouseEvent("click");
      else {
        event = document.createEvent("MouseEvents");
        event.initMouseEvent(
          "click",
          true,
          false,
          window,
          0,
          0,
          0,
          0,
          0,
          false,
          false,
          false,
          false,
          0,
          null
        );
      }
      aLink.dispatchEvent(event);
    },