Vue导出excel表格

1.安装pikaz-excel-js，推荐版本0.2.16

npm install pikaz-excel-js@0.2.16

2.在vue文件中引入并使用

<template>
    <excel-export 
        ref="excelExport"
        :bookType="excelOption.bookType" 
        :filename="excelOption.filename" 
        :sheet="excelOption.sheet"
        :manual="excelOption.manual"
    >
    </excel-export>
</template>
<script>
import { ExcelExport } from "pikaz-excel-js";
export default {
    components: {
        ExcelExport
    },
    data() {
        return {
            // 导出excel配置项
            excelOption: {
                bookType: "xlsx", // 文件类型
                filename: "合同续签意向", // 文件名
                manual: true, // 是否手动导出
                // 表格数据
                sheet: []
            }
        }
    }
}
</script>

3.导出的方法

// 导出
async exportData() {
    let loading = this.$loading({
        lock: true,
        text: "数据加载中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
    });
    // exportData是列表数据
    exportData.forEach(item => {
        // 可以对数据的每一项进行简单的处理，例如状态1，2，3，4改成待付款，已付款，待收货，已收货
    });
    let tmp = {
    // 设置每一列的列头
    tHeader: [ '表格头1', '表格头2', '表格头2', '表格头4'],
    // 表格数据
    table: exportData,
    // 表格头对应的字段
    keys: [ 'contract_no', 'contract_type_name', 'resource_name', 'customer_name']
    };
    // 赋值配置好的数据
    this.excelOption.sheet = [tmp];
    // 执行导出的方法
    this.$nextTick(() => {
    this.$refs.excelExport.pikaExportExcel();
    });
    loading.close();
}

4.导出excel还支持合并表格，具体的合并方法可以看pikaz-excel-js插件的官网，直达：

Package - pikaz-excel-js