技術標籤：js

vue專案中遇到表格匯出成excel格式的功能，純前端處理匯出問題

1、首先運用到的檔案：xlsx.full.min.js（下載）、util.js

util.js

import XLSX from './xlsx.full.min'
var Utils = {
    openDownloadDialog: function (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);
    },
    sheet2blob: function (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;
    }
}
export default Utils

2、在需要的頁面中引用

import XLSX from "@/assets/js/xlsx.full.min.js";
import Utils from "@/assets/js/util.js";

3、在頁面中運用

<a href="javascript:;" @click="exportTable">【匯出】</a>

exportTable() {
      var table = document.querySelector("#download");   //獲取需要下載的表格區域元素
      var sheet = XLSX.utils.table_to_sheet(table, { raw: true });
      var blob = Utils.sheet2blob(sheet);
      Utils.openDownloadDialog(blob, new Date().getTime() + ".xlsx");   // 定義下載檔案的名稱
}