vue项目中一键导出Excel

安装依赖

    yarn add xlsx 

导入xlsx

import * as xlsx from 'xlsx';

定义类型

export interface JsonToExcelOptions {
    headers?: Record<string, string>;
    data: any[];
    filename: string;
    bookType?: xlsx.BookType;
}

创建导入工具

export const jsonToExcel = ({ headers, data, filename, bookType = 'xlsx' }: JsonToExcelOptions) => {
    return new Promise<string>((resolve, reject) => {
        if (headers) {
            data = data.map((row) => {
                const object: Record<string, string | number> = {};
                for (const key in row) {
                    if (headers[key]) {
                        object[headers[key]] = row[key];
                    } else {
                        object[key] = row[key];
                    }
                }
                return object;
            });
        }

        // 1. 创建一个工作簿 workbook
        const workBook = xlsx.utils.book_new();
        // 2. 创建工作表 worksheet
        const workSheet = xlsx.utils.json_to_sheet(data);
        // 3. 将工作表放入工作簿中
        xlsx.utils.book_append_sheet(workBook, workSheet);
        // 4. 生成数据保存
        const blobUrl = xlsx.writeFile(workBook, filename, { bookType });
        resolve(blobUrl);
    });
};

导入工具

import { jsonToExcel} from '@/utils';

绑定点击事件，创建函数

const handleExportAll = ()=>{
        jsonToExcel({
            filename: formatDate(new Date()) + '待审核商品列表.xlsx',
            headers: {
                applyForID: '申请ID',
                productName: '商品名称',
                productID: '商品ID',
                productPrice: '商品售价',
                storeID: '店铺ID',
                storeName: '店铺名称',
                commissionStartTime: '佣金开始生效时间',
                commissionEndTime: '佣金生效结束时间',
                commission_rate: '佣金率',
                service_rate: '服务费率',
                activePrice: '活动价格',
                promotionLink: '推广链接',
            },
            data: ProductSaleListData.value.list.map((value, index) => ({
                applyForID: 1,
                productName: 'saf',
                productID: 'dsfsd',
                productPrice: 34523,
                storeID: 'sdfs',
                storeName: 'ds',
                commissionStartTime: 'value',
                commissionEndTime: 'value',
                commission_rate: 'value',
                service_rate: 'value',
                activePrice: 'value',
                promotionLink: 'value',
            })),
        });
}

效果图

修改excel列宽

在第二步创建工作表 worksheet之后添加

...
  // 2. 创建工作表 worksheet
        const workSheet = xlsx.utils.json_to_sheet(data);
        /* 修改excel列宽 */
        if (filename === '2023-07-06待审核商品列表.xlsx') {
            const cols: { wch?: number | undefined }[] | undefined = []; // 设置每列的宽度
            // wpx 字段表示以像素为单位，wch 字段表示以字符为单位
            data.map((item, index) => {
                let col: { wch?: number } = {};
                index == 0 ? (col.wch = 10) : index == 1 ? 
                (col.wch = 60) : index == 3 ?
                (col.wch = 10) : (col.wch = 20);
                cols.push(col);
            });

            workSheet['!cols'] = cols; // 设置列宽信息到工作表
        }

 // 3. 将工作表放入工作簿中
 ...