vue+file-saver+xlsx+xlsx-style导出table为excel，自定义表格样式

1.安装 +引入  file-saver、xlsx、xlsx-style（样式），

1.文件保存 ^2.0.5
npm install file-saver --save  

2.文件导出 ^0.18.5
 npm install xlsx --save

3.设置样式 ^0.8.13
 npm install xlsx-style --save

xlsx-style官网：wpx - npm 

 注意：安装xlsx-style遇到的问题找不到./cptable ,就解决方法如下： 

   https://www.cnblogs.com/caiguanzheng/p/17014193.html

 //引入组件：
import FileSaver from "file-saver";
import XLSX from "xlsx";
import XLSXSTYLE from "xlsx-style";

2.导出excel，设置样式

 html:

1.点击按钮导出调用方法

   <el-button
            type="primary"
            :disabled="showExcelBtn"
            @click="exportToExcel()"
            >导出excel
   </el-button>



2.给要导出的table 设置id名  例：id="exportTable"

<el-table
        :data="activeName == 'reportform' ? formDataList : orgDataList"
        id="exportTable"
        border
        @selection-change="selectionChangeHandle"
        style="width: 100%;"
      >
        <el-table-column
          :prop="activeName == 'reportform' ? 'formName' : 'orgName'"
          header-align="center"
          align="center"
          :label="activeName == 'reportform' ? '报表名称' : '区域名称'"
          min-width="140"
        >
        </el-table-column>
</el-table>

method: 

1.只导出不改变样式 参考：Vue项目中将el-table表格中的数据导出为Excel文件

2.导出excel自定义样式： 

前端导出表格 修改样式（xlsx-style）用法_前端导出excel设置样式_关忆北_的博客-CSDN博客 

xlsx-style的用法_xlsx-js-style 单元格边框_落落寒灯灭的博客-CSDN博客

使用xlsx、xlsx-style自定义样式导出excel - 简书 

vue3+vite项目使用xlsx+xlsx-style+file-saver导出带有样式的excel表格方法_xlsx vue3_lee_amazing的博客-CSDN博客

 扩展：JavaScript导出excel文件，并修改文件样式 - 知乎

(1) 导出excel

  //导出excel
    exportToExcel() {
      const XLSX = require("xlsx");
     // console.log("XLSX", XLSX, FileSaver);
      // 使用 this.$nextTick 是在dom元素都渲染完成之后再执行
      this.$nextTick(function() {
        // 设置导出的内容是否只做解析，不进行格式转换     false：要解析， true:不解析
        const xlsxParam = { raw: true };
        //调用改变样式的方法
        const wb = this.setExlStyle(
          XLSX.utils.table_to_book(
            document.querySelector("#exportTable"),
            xlsxParam
          )
        );
        console.log("wb", wb);

        // return;

        // 导出excel文件名
        let fileName =
          (this.activeName == "reportform" ? "报表统计结果" : "站点统计结果") +
          ".xlsx";
        //没搞懂里面参数啥意思，以后再说
        // const wbout = XLSX.write(wb, {
        //   bookType: "xlsx",
        //   bookSST: true,  //
        //   type: "array"
        // });

        // 注意：导出Excel, 注意这里用到的是XLSXSTYLE对象  才会有设置的样式
        let wbout = XLSXSTYLE.write(wb, {
          bookType: "xlsx", //生成的文件类型
          bookSST: false,
          type: "binary"
        });
        try {
          // 下载保存文件
          FileSaver.saveAs(
            // new Blob([wbout], { type: "application/octet-stream" }),
            new Blob([this.s2ab(wbout)], {
              type: "application/octet-stream"
            }),
            fileName
          );
        } catch (e) {
          if (typeof console !== "undefined") {
            console.log(e, wbout);
          }
        }
        return wbout;
      });
    },

 注意：导出excel 要带有你设置的样式 用引入的XLSXSTYLE   否则用  XLSX (老登！卡在这半天)

  // 注意：导出Excel, 注意这里用到的是XLSXSTYLE对象  才会有设置的样式
        let wbout = XLSXSTYLE.write(wb, {
          bookType: "xlsx",
          bookSST: false,
          type: "binary"
        });

//无样式导出  XLSX
        let wbout = XLSX.write(wb, {
          bookType: "xlsx",
           bookSST: true,
          type: "array"
        });

 (2) 设置excel样式：边框、居中、背景、字体、行列宽、合并单元格、

  在obj.Sheets.Sheet1里面设置样式,  Sheet1为默认的可设置 {sheet:"xx表"}   参考  xlsx-style

 A1~k2每个对象单元格设置s：{样式}

//设置表格样式  
setExlStyle(data) {
      // console.log(data);

      Object.keys(data.Sheets.Sheet1).forEach(key => {
        //设置每个单元格属性
        if (key.indexOf("!") < 0) {
              // 判断的方法if (data.Sheets.Sheet1[key].t) {
          data.Sheets.Sheet1[key].s = {
            // 边框
            border: {
              top: {
                style: "thin"
              },
              bottom: {
                style: "thin"
              },
              left: {
                style: "thin"
              },
              right: {
                style: "thin"
              }
            },
            // 字体

            font: {
              sz: 12,
              // bold: true,
              color: {
                // rgb: "FFFFFF" //白色
              }
            },
            // 居中

            alignment: {
              horizontal: "center",
              vertical: "center",
              wrapText: true
            }
            //背景颜色
            // fill: {
            //   fgColor: {
            //     rgb: "808080" //灰色
            //   }
            // }
          };
        }
      });
      //导出的excel会给k这列两行有样式，手动去掉
      data.Sheets.Sheet1["K1"].s = {};
      data.Sheets.Sheet1["K2"].s = {};

      //列宽
      data.Sheets.Sheet1["!cols"] = [];
      //行宽
      data.Sheets.Sheet1["!rows"] = [];
      //根据table.length 行数设置每行宽度
      // data.Sheets.Sheet1["!rows"].push({ hpx: 20 });
      
      //根据列数设置每一列的列宽  这里table有10列 
      for (let i = 0; i < 10; i++) {
        data.Sheets.Sheet1["!cols"].push({ wpx: 100, wch: 20 });
      }
      data.Sheets.Sheet1["!cols"][0].wpx = 150;

      return data;
    },

（3） 文件流转换

// 文件流转换
    s2ab(s) {
      //如果存在ArrayBuffer对象(es6) 最好采用该对象
      if (typeof ArrayBuffer !== "undefined") {
        //1、创建一个字节长度为s.length的内存区域
        const buf = new ArrayBuffer(s.length);
        //2、创建一个指向buf的Unit8视图，开始于字节0，直到缓冲区的末尾
        const view = new Uint8Array(buf);
        //3、返回指定位置的字符的Unicode编码
        for (let i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
        return buf;
      } else {
        const buf = new Array(s.length);
        for (let i = 0; i !== s.length; ++i) buf[i] = s.charCodeAt(i) & 0xff;
        return buf;
      }
    },

 导出的excel展示图：