Vue xlsx导出Excel

最新推荐文章于 2025-06-30 16:43:41 发布

原创最新推荐文章于 2025-06-30 16:43:41 发布 · 6.5k 阅读

7 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了如何在前端使用Vue结合xlsx库来实现Excel文件的导出。通过安装xlsx库，创建导出函数，并在需要导出的地方调用该函数，将数据传入。特别提醒，数据中存在null值可能导致文件损坏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端做导出，现在应该比较普遍了，最近用了npm的xlsx库
安装：npm install --save xlsx
下面看下操作步骤：
1.写一个专门导出的文件

import XLSX from 'xlsx';

/**
 * 导出Excel的处理函数--针对table
 * @param {Array} headers: [{key: 'date', title: '日期'}, {key: 'name', title: '名称'}]
 * @param {Array} data   : [{date: '2019-05-31', name: 'megen.huang'}, {date: 'name', name: '小明'}]
 * @param {String} fileName: '导出结果.xlsx'
 * */
export default function ExportExcel(headers, data, fileName = '导出结果.xlsx') {
    const _headers = headers
        .map((item, i) => Object.assign({}, { key: item.key, title: item.title, position: String.fromCharCode(65 + i) + 1 }))
        .reduce((prev, next) => Object.assign({}, prev, { [next.position]: { key: next.key, v: next.title } }), {});

    const _data = data
        .map((item, i) => headers.map((key, j) => Object.assign({}, { content: item[key.key], position: String.fromCharCode(65 + j) + (i + 2) })))
        // 对刚才的结果进行降维处理（二维数组变成一维数组）
        .reduce((prev, next) => prev.concat(next))
        // 转换成 worksheet 需要的结构
        .reduce((prev, next) => Object.assign({}, prev, { [next.position]: { v: next.content } }), {});

    // 合并 headers 和 data
    const output = Object.assign({}, _headers, _data);
    // 获取所有单元格的位置
    const outputPos = Object.keys(output);
    // 计算出范围 ,["A1",..., "H2"]
    const ref = `${outputPos[0]}:${outputPos[outputPos.length - 1]}`;

    // 构建 workbook 对象
    const wb = {
        SheetNames: ['mySheet'],
        Sheets: {
            mySheet: Object.assign(
                {},
                output,
                {
                    '!ref': ref,
                    // eslint-disable-next-line
                    '!cols': headers.map(item => ({wpx: 100}))
                }
            )
        }
    };

    // 导出 Excel
    XLSX.writeFile(wb, fileName);
}

2.在要导出的文件里引入这个函数

import ExportExcel from '../../utils/exportExcel';

3.调用这个方法，把参数传进去

const dataSource = result.data.data.tableData.map(item => {
    Object.keys(item).forEach(key => {
        // 后端传null node写入会有问题
        if (item[key] === null) {
            item[key] = '';
        }

        if (Array.isArray(item[key])) {
            item[key] = item[key].join(',');
        }
    });
    return item;
});
const columns = result.data.data.columns.map(item => ({key: item.prop, title: item.label}));

ExportExcel(columns, dataSource, `${new Date().getTime().toString()}_导出.xlsx`);

注意：导入数据里有null会导致文件损坏