使用xlsx file-saver exceljs實現瀏覽器中Excel匯入匯出

jKrtEG發表於2022-11-23
ExcelJS瀏覽器

使用 xlsx file-saver exceljs 實現Excel 匯入匯出

如有錯誤感謝指出

安裝

npm install xlsx
npm install file-saver
npm install exceljs

引入

import XLSX from 'xlsx'; //需要規定版本^0.17.0 。
import ExcelJS from "exceljs"; // 推薦^4.2.1
import FileSaver from "file-saver";//  推薦^2.0.5

Excel匯入方法

/**
 * @description 匯入EXCEL，進行讀取
 * @keyValue {名稱: "Name",編號: "Code"}
 * @returns {Promise} 讀取Excel裡面的資料
 */
export function inportExcel(keyValue) {
    return new Promise((resolve, reject) => {
        // 獲取上傳的檔案物件(dom)
        const nodeFile = document.createElement('input')
        nodeFile.setAttribute('accept', '.xlsx');
        nodeFile.setAttribute('type', 'file');
        nodeFile.setAttribute("style", 'visibility:hidden;position: absolute;top: 0;');
        document.body.appendChild(nodeFile);
        nodeFile.click();
        nodeFile.onchange = function (elm) {
            nodeFile.remove()
            // 透過FileReader物件讀取檔案
            const fileReader = new FileReader();
            // 以二進位制方式開啟檔案
            fileReader.readAsBinaryString(elm.target.files[0]);
            fileReader.onload = event => {
                try {
                    const { result } = event.target;
                    // 以二進位制流方式讀取得到整份excel表格物件
                    const workbook = XLSX.read(result, { type: 'binary' });
                    let data = []; // 儲存獲取到的資料
                    // 遍歷每張工作表進行讀取（這裡預設只讀取第一張表）
                    for (const sheet in workbook.Sheets) {
                        if (workbook.Sheets.hasOwnProperty(sheet)) {
                            // 利用 sheet_to_json 方法將 excel 轉成 json 資料
                            data = data.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
                            break; // 如果只取第一張表，就取消註釋這行
                        }
                    }
                    // 根據 KeyValue 將中文變數的key轉變為英文
                    console.log(data);
                    let list = [];
                    for (let item of data) {
                        let obj = {};
                        for (let key in keyValue) {
                            let { [key]: temp } = item;
                            obj[keyValue[key]] = temp;
                        }
                        list.push(obj);
                    }
                    resolve(list)

                } catch (e) {
                    // 這裡可以丟擲檔案型別錯誤不正確的相關提示
                    console.log('檔案型別不正確');
                    reject('檔案型別不正確')
                }
            };
        }

    });
}

Excel匯出方法

/**
 * @description 匯出EXCEL
 * @param {Array} 依據什麼Key，Value來生成表格，{名稱: "Name",編號: "Code"}
 * @param {Array}  表格資料  [{ 名稱: "111", 編號: "222" }]
 * @param {String}  表格名稱 
 */
export function exportExcel(header, data, filename = '未命名') {
    const workbook = new ExcelJS.Workbook();
    const worksheet = workbook.addWorksheet("sheet");
    let col = 1
    for (let key in header) {
        let values = [];
        values.push(key);
        for (let row = 0; row < data.length; row++) {
            values.push(data[row][header[key]]);
        }
        worksheet.getColumn(col++).values = values;
    }

    workbook.xlsx
        .writeBuffer()
        .then(
            (buffer) => new Blob([buffer], { type: "application/octet-stream" })
        )
        .then((blob) => {
            FileSaver(blob, `${filename}.xlsx`)

        });
}

使用

export default { inportExcel, exportExcel };// 把方法暴露處理
import { inportExcel, exportExcel } from "@/utils/excel"; //在要使用的頁面引入
inportExcel(keyValue).then(res=>{
    console.log(res)
})
exportExcel(header, data, filename)
tip

資料超過100W時建議使用 worker 開多一個執行緒處理，不會讓頁面卡頓。

相關文章