Vue+File saver+xlsx使用json_to_sheet导出数据为excel

json_to_sheet是将JSON数据导出为Excel格式。

1.代码如下：

<template>
  <div>
    <el-button type="" @click="downloadData()">下载</el-button>
  </div>
</template>

<script>
import { saveAs } from "file-saver";
import XLSX from "xlsx";
export default {
  name: "TableColumnShowHideDemo",
  data() {
    return {
      table_interval: null,
      showColumn: false,
      tableData: [
        { id: "1", value: "right", label: "正确" },
        { id: "2", value: "wrong", label: "错误" },
        { id: "3", value: "rightorwrong", label: "正确or错误" },
        { id: "4", value: "right", label: "正确" },
        { id: "5", value: "wrong", label: "错误" },
        { id: "6", value: "rightorwrong", label: "正确or错误" },
        { id: "7", value: "right", label: "正确" },
        { id: "8", value: "wrong", label: "错误" },
        { id: "9", value: "rightorwrong", label: "正确or错误" },
        { id: "10", value: "right", label: "正确" },
        { id: "11", value: "wrong", label: "错误" },
        { id: "12", value: "rightorwrong", label: "正确or错误" },
        { id: "13", value: "right", label: "正确" },
        { id: "14", value: "wrong", label: "错误" },
        { id: "15", value: "rightorwrong", label: "正确or错误" }
      ]
    };
  },
  methods: {
    downloadData: function() {
      this.exportJsonDataToExcel();
    },
    exportJsonDataToExcel() {
      var sheetName='exportJsonDataToExcel';
      var wb = XLSX.utils.book_new();
      var ws = XLSX.utils.json_to_sheet(this.tableData)
      wb.SheetNames.push(sheetName);
      wb.Sheets[sheetName] = ws;
      //设置表格的样式
      var defaultCellStyle = {
        font: { name: "Verdana", sz: 13, color: "FF00FF88" },
        fill: { fgColor: { rgb: "FFFFAA00" } }
      }; 
      //写入的样式
      var wt = {
        bookType: "xlsx",
        bookSST: false,
        type: "binary",
        cellStyles: true,
        defaultCellStyle: defaultCellStyle,
        showGridLines: false
      }; 

      var blob = XLSX.write(wb, wt);

      saveAs(
        new Blob([this.changeData(blob)], {
          type: "application/octet-stream"
        }),
        "exportJsonDataToExcel.xlsx"
      );
    },
     //将数据处理成需要输出的格式
    changeData(s) {
        //如果存在ArrayBuffer对象(es6) 最好采用该对象
      if (typeof ArrayBuffer !== "undefined") {
        //1、创建一个字节长度为s.length的内存区域
        var buf = new ArrayBuffer(s.length);

        //2、创建一个指向buf的Unit8视图，开始于字节0，直到缓冲区的末尾
        var view = new Uint8Array(buf);

        //3、返回指定位置的字符的Unicode编码
        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;
      }
    }
  }
};
</script>

2.页面如下：

3.导出excel数据