码上编程

vue三种方式导出报表至excel

1、序言

1.1、源码

源码在下方，复制运行，安装相应的插件即可

1.2、坑

方式一、方式二安装相同插件：

npm install xlsx xlsx-style file-saver

导入 xlsx-style 会报如下的错误

解决办法：

（1）去node_modules下面找到xlsx/dist/ 修改相应配置，这样非常不好，每次npm install，都要跑去node_modules下面修改，非常麻烦！

（2）新建vue.config.js，复制如下代码，重启项目即可

module.exports = {
    configureWebpack: (config) => {
        // 解决xlsx-style报错的问题
        return {
            externals: [{
                './cptable': 'var cptable'
            }]
        }
    }
}

还有一个坑

解决办法：

1.3、实现功能说明

未实现：

（1）单元格样式修改还未实现，后期找到合适的方法会更新此博客

（2）不能导出图片至excel表中，只把表格数据导出至excel表

（3）导出的excel报表没有多个Sheet

已实现：

（1）表格正常导出

（2）多级表头导出

（3）单元格自定义内容、合计行导出

2、方式一（xlsx）（不推荐）

2.1、工具方法

Export2Excel.js

export function export_json_to_excel({
    multiHeader = [], // 第一行表头
    multiHeader2 = [],	// 第二行表头
    data,
    filename, //文件名
    merges = [], // 合并
    bookType = 'xlsx'
} = {}) {
    /* original data */
    filename = filename || '列表';
    data = [...data]
    data.unshift(multiHeader2)
    data.unshift(multiHeader)
    console.log('data:', data)
    var ws_name = "SheetJS";
    var wb = new Workbook(),
        ws = sheet_from_array_of_arrays(data);

    if (merges.length > 0) {
        if (!ws['!merges']) ws['!merges'] = [];
        merges.forEach(item => {
            ws['!merges'].push(XLSX.utils.decode_range(item))
        })
    }

    /* add worksheet to workbook */
    wb.SheetNames.push(ws_name);
    wb.Sheets[ws_name] = ws;

    var wbout = XLSXStyle.write(wb, {
        bookType: bookType,
        bookSST: false,
        type: 'binary'
    });

    saveAs(new Blob([s2ab(wbout)], {
        type: "application/octet-stream"
    }), `${filename}.${bookType}`);
}

2.2、使用

// multiHeader: 一级表头
// multiHeader2：二级表头
// data：表格数据
// merges：需要合并的单元格
// filename：导出的excel文件名
import('@/utils/Export2Excel').then((excel) => {
        excel.export_json_to_excel({
          multiHeader,
          multiHeader2,
          data,
          merges,
          filename: '报表导出一',
        });
      })

2.3、目标效果

2.4、缺点

（1）没有合计行

（2）表格插槽自定义的内容，如添加的单位: kg、cm、岁不能一起导出来

（3）最痛苦的是多级表头导出的时候还要一个个算单元格哪些需要合并、多级表头数组的字段排放，字段少还好，多的时候就痛苦面具了！

3、方式二（xlsx结合dom）（推荐）

3.1、工具方法

Export2Excel.js

// 根据dom导出表格
export function exportToExcel(idSelector, fileName, titleNum = 1) {
    // 设置导出的内容是否只做解析，不进行格式转换     false：要解析， true:不解析
    const xlsxParam = { raw: true }
    let table = document.querySelector(idSelector).cloneNode(true);

    // 因为element-ui的表格的fixed属性导致多出一个table，会下载重复内容，这里删除掉
    if (table.querySelector('.el-table__fixed-right'))
        table.removeChild(table.querySelector('.el-table__fixed-right'));
    if (table.querySelector('.el-table__fixed'))
        table.removeChild(table.querySelector('.el-table__fixed'));

    const wb = XLSX.utils.table_to_book(table, xlsxParam)
    let range = XLSX.utils.decode_range(wb.Sheets['Sheet1']['!ref']);
    let cWidth = [];
    for (let C = range.s.c; C < range.e.c; ++C) {   //SHEET列
        let len = 100; //默认列宽
        let len_max = 400; //最大列宽
        for (let R = range.s.r; R <= range.e.r; ++R) {  //SHEET行
            let cell = { c: C, r: R };                    //二维 列行确定一个单元格
            let cell_ref = XLSX.utils.encode_cell(cell);  //单元格 A1、A2
            if (wb.Sheets['Sheet1'][cell_ref]) {
                // if (R == 0){
                if (R < titleNum) {
                    wb.Sheets['Sheet1'][cell_ref].s = {  //设置第一行单元格的样式 style
                        alignment: {
                            horizontal: 'center',
                            vertical: 'center',
                        },
                    };
                } else {
                    wb.Sheets['Sheet1'][cell_ref].s = {
                        alignment: {
                            horizontal: 'center',
                            vertical: 'center',
                        },
                    };
                }
                //动态自适应：计算列宽
                let va = JSON.parse(JSON.stringify(wb.Sheets['Sheet1'][cell_ref].v));
                var card1 = JSON.parse(JSON.stringify(va)).match(/[\u4e00-\u9fa5]/g); //匹配中文
                var card11 = "";
                if (card1) {
                    card11 = card1.join("")
                }
                var card2 = JSON.parse(JSON.stringify(va)).replace(/([^\u0000-\u00FF])/g, "");  //剔除中文
                let st = 0;
                if (card11) {
                    // st += card11.length * 16  //中文字节码长度
                    st += card11.length * 20  //中文字节码长度
                }
                if (card2) {
                    // st += card2.length * 8  //非中文字节码长度
                    st += card2.length * 10  //非中文字节码长度
                }
                if (st > len) {
                    len = st;
                }
            }
        }
        if (len > len_max) {//最大宽度
            len = len_max;
        }

        cWidth.push({ 'wpx': len });     //列宽
    }
    wb.Sheets['Sheet1']['!cols'] = cWidth
    const wbout = XLSXStyle.write(wb, { bookType: 'xlsx', bookSST: false, type: 'binary' })
    try {
        saveAs(new Blob([s2ab(wbout)], { type: '' }), `${fileName}.xlsx`)
    } catch (e) {
        if (typeof console !== 'undefined') {
            console.log(e, wbout)
        }
    }
    return wbout
}

3.2、使用

import { exportToExcel } from '@/utils/Export2Excel'
methods: {
    // 方式二导出报表
    handleExport2() {
      // exportToExcel(表格id选择器, 导出文件名称);
      exportToExcel('#table', '报表导出二');
    },
  }

3.2、效果

除了合计行有点小小的瑕疵，其他部分非常完美了，代码少，实现的功能又多，相当于导出el-table了！

4、方式三（vue-json-excel）（不推荐）

# 安装插件

npm i vue-json-excel

# 插件官网：GitHub - jecovier/vue-json-excel

4.1、使用

字段说明

字段名称	字段类型	字段说明
data	Array	表格数据
fields	Object	不填写的话，导出的excel表头名称为 data数据里面的属性名称，其实就是字段名称映射成中文
type	string	导出的文件类型，默认xls
name	string	导出的文件名称
title	string	excel表格标题

main.js

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

import JsonExcel from "vue-json-excel";
Vue.component("downloadExcel", JsonExcel);
Vue.use(ElementUI);

new Vue({
  render: h => h(App),
}).$mount('#app')

页面使用

每个字段可以自定义单元格格式化输出内容，比如加上单位

4.2、效果

4.3、缺点

（1）多级表头导不出来，官方文档写的不够详细

（2）没有合计行

（3）配置稍显繁琐

5、源码

vue.config.js

module.exports = {
    configureWebpack: (config) => {
        // 解决xlsx-style报错的问题
        return {
            externals: [{
                './cptable': 'var cptable'
            }]
        }
    }
}