vue多sheet表格导出

工作的时候碰到的需求，需要使用vue实现多sheet表格导出，自己写了个小工具sheet-export.js，分享给大家~

 

 

1、vue安装插件

 

npm install --save file-saver
npm install xlsx --save
//如果报错请下载最新版本
//比如
npm install xlsx@0.14.5 --save
或者更高

2、把sheet-export.js放入项目中

 

//sheet-export.js

import XLSX from 'xlsx';
import FileSaver from 'file-saver'
import moment from "moment";
/*
*   field:表头字段名称
*   label:表头字段名称映射值
*   list: 表格数据和sheet表名
*   list_name: 列表名
*   数据格式例子：
*       field = [ 'nick_name','user_id','created_time','day','source_name']
*       label = { nick_name: '用户名', user_id: '用户ID', created_time: '注册日期', day: '在网时长', source_name: '注册渠道' }
*       list:[
*           {
*               data:[
*                   {created_time: '2022年08月08月', day: '8天', nick_name: "测试", source_name: "测试渠道", user_id: "1111"},
*               ],
*               sheet_name:'表1',
*           }
*       ]
*       list_name:'测试列表名称'
 */


export function sheetExport(field,label,list,list_name){
    let wb = XLSX.utils.book_new();
    list.forEach(ele=>{
        const ws = XLSX.utils.json_to_sheet(
            ele.data || [],
            {
                header: field //通过设置field可以把这个field排在前头，后续截取表格的时候，把尾部不需要的剔除
            }
        )
        // 找出 这个表格的 单元格 范围
        const range = XLSX.utils.decode_range(ws['!ref'])
        // 找到worksheet中 A1,B1,C1...等设置表头的字段，替换为上方label对应的数据
        for (let c = range.s.c; c <= range.e.c; c++) {
            const header = XLSX.utils.encode_col(c) + '1'
            ws[header].v = label[ws[header].v]
        }
        XLSX.utils.book_append_sheet(wb, ws, ele.sheet_name);
    })
    const workbookBlob = workbook2blob(wb)
    FileSaver(workbookBlob, list_name + '.xlsx')
}
function workbook2blob(workbook) {
    // 生成excel的配置项
    var wopts = {
        // 要生成的文件类型
        bookType: "xlsx",
        // // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
        bookSST: false,
        type: "binary"
    };
    var wbout = XLSX.write(workbook, wopts);
    // 将字符串转ArrayBuffer
    function s2ab(s) {
        var buf = new ArrayBuffer(s.length);
        var view = new Uint8Array(buf);
        for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
        return buf;
    }
    var blob = new Blob([s2ab(wbout)], {
        type: "application/octet-stream"
    });
    return blob;
}


export default
{
    sheetExport,
}

 

3、在页面中引用

 

在页面中引用
例子：index.vue中

//页面中引用
import {sheetExport} from "@/utils/sheet-export";
//接口请求数据
getListContrast(params).then(res=>{
    if(res.status == 0){
        let countList = []
        res.data.list.forEach(ele=>{
            countList.push(ele.count)
        })
　　　　　//设置表格对应的表头
        let field = ['nick_name','user_id','created_time','day','source_name']
　　　　  //表头映射关系
        let label = {
            nick_name: '用户名',
            user_id: '用户ID',
            created_time: '注册日期',
            day: '在网时长',
            source_name: '注册渠道'
        }
　　　　  //处理数据
        res.data.list = res.data.list.map(ele=>{
            ele.sheet_name = ele.time_contrast
            ele.data.forEach(item=>{
                delete item.source
                delete item.mobile
                item.created_time = moment(item.created_time * 1000).format('YYYY-MM-DD')
                item.day = item.day + '天'
            })
            return ele
        })
　　　　　//调用方法
        sheetExport(field, label, res.data.list, '注册数据列表')
    }
})

　　

（如需转载，请注明出处）