应用 xlsx file-saver exceljs 实现Excel 导入导出

如有谬误感激指出

装置

npm install xlsxnpm install file-savernpm install exceljs

引入

import XLSX from 'xlsx'; //须要规定版本^0.17.0 。import ExcelJS from "exceljs"; // 举荐^4.2.1import 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 开多一个线程解决，不会让页面卡顿。