FE - Vue 使用 XLSL 导出 excel 文件

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/LABLENET/article/details/78271494

库地址：

SheetJS - js-xlsx

可能需要的其他库：filesaveJS

package.json

 "xlsx": "^0.11.6",
 "file-saverjs": "^1.3.6"

数据格式

可单独写个接口为下载 excel 文件操作

      [
               ['cols1','cols2','cols3'],
               ['data1','data2','data3']
      ]

使用

<tmplate></template>
<script>
  // xlsx 导出插件
  import XLSX from 'xlsx'
  import XLSX_SAVE from  'file-saver'

  // xlsx 文件输出操作方法
  function s2ab(s) {
    const buf = new ArrayBuffer(s.length);
    const view = new Uint8Array(buf);
    for (let i = 0; i !== s.length; ++i) {
      view[i] = s.charCodeAt(i) & 0xFF;
    }
    return buf;
  }
export defalut {
  ...
  method: {
     downloadExcel(data){
           /**
             * 数据导出格式为
             * [
             *   ['cols1','cols2','cols3'],
             *   ['data1','data2','data3']
             * ]
             */
            let data = [
                       ['cols1','cols2'],
                       ['data1','data2']
                 ]
            // covert json to sheet
            const ws = XLSX.utils.aoa_to_sheet(data);
            const wb = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
            // save
            const wbout = XLSX.write(wb, {type: "binary", bookType: "xlsx"})
            XLSX_SAVE.saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), "exampleExcel.xlsx");

     }
  }
}
<script>