乐趣区

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

jiezi

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

退出移动版