关于前端:使用xlsx-filesaver-exceljs实现浏览器中Excel导入导出

应用 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 开多一个线程解决，不会让页面卡顿。