vue3纯前端导出excel文件

1.npm 集成 xlsx-js-style 库

npm i -s xlsx-js-style

2.引入和编写方法文件

import XLSX from 'xlsx-js-style';
/**
 *
 * @param {String} fineName 导出后下载的文件名称 （不需要带后缀）
 * @param {Array} data 导出excel的数据 例如：[['姓名','年龄'],['小明','19']] 下标0的数组为表头
 * @param {Array} colWidthList 列宽 例如[150,30] 下标对应第一列 第二列
 */
export function exportExcel(fineName, data, colWidthList = []) {
    const wb = XLSX.utils.book_new();
    const ws = XLSX.utils.json_to_sheet(data, {
        skipHeader: true,
    });

    // 获取所有当前数据的所有单元格 并设置样式
    //单元格样式 ：文字居中等。
    const alignment = {
        horizontal: 'center',
        vertical: 'center',
    };
    // 固定 的话是第一行第一列
    // ws['A1'].s = {
    //     alignment,
    // };
    // 动态获取所有的单元格
    Object.keys(ws).forEach((key) => {
        if (key.indexOf('!') === -1) {
            ws[key].s = {
                alignment,
            };
        }
    });

    //设置列宽 下标0 为第一列 设置
    let widthArr = [];
    colWidthList.forEach((item) => {
        widthArr.push({ wpx: item });
    });
    ws['!cols'] = widthArr;
    // 只设置第一列 宽度
    // ws['!cols'] = [
    //     {
    //         wpx: 150,
    //     },
    // ];

    XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
    XLSX.writeFile(wb, fineName + '.xlsx');
}

3.在导出按钮的文件引入并传入参数

 <el-button @click="exportFile" 
            :icon="Download"
            type="primary">
                导出
</el-button>
import { exportExcel } from '@/utils/excelConfig.js';

const exportFile = () => {
    const exc_data = [
        ['断面名称','一月','二月','三月'],
        ['断面A','20','30','40'],
    ];
    exportExcel('水质月历', exc_data, [300]);
};