Vue导出表格数据、及xlsx-style复杂样式编辑

一、导出数据

　   方案一

Vue项目中将表格内的数据导出为Excel文件_vue导出excel表格-优快云博客    相当详细的一篇文档

　　方案二：插件vue-json-excel（vue）

　　参考：VUE中使用vue-json-excel超级方便导出excel表格数据_vue-json-excel设置编码为数字-优快云博客

　　1.安装依赖

npm install vue-json-excel -S

　　2.main.js引入并注册

import JsonExcel from 'vue-json-excel'
Vue.component('downloadExcel', JsonExcel)

　　3.页面中使用

<download-excel :data="json_data" :fields="json_fields" name="filename.xls">
       <button>导出EXCEL</button>
</download-excel>

　　data() {
            return {
                json_fields: {  
                    "名称": "name",    // “名称”为表格内列头，“name”为表格数据json_data对应的键
                    "电话": "phone", 
                    "年龄": "custom.age", // 支持嵌套属性
                    "自定义": {
                        field: "custom.number",
                        //自定义回调函数
                        callback: value => {
                            return `number - ${value}`;
                        }
                    }
                },
                json_data: [    // 表格数据
                    {
                        name: "张三",
                        phone: "188****8888",
                        custom: {
                            age: "11",
                            number: 2222
                        }
                    }
                ],
            }
        }

　　下载的表格效果：

 二、合并单元格、背景字体、换行，插件xlsx-style（vue）

　　参考：https://www.cnblogs.com/yinxingen/p/11052184.html

　　1.安装依赖

　　xlsx插件同样可以导出excel，xlsx-style在xlsx的基础上还能修改表格样式

npm i xlsx-style -S

　　2.安装依赖后直接使用会出现报错，这里给出三种解决方案

　　2.1 方案一：修改依赖包源码，将\node_modules\xlsx-style\dist\cpexcel.js 807行 的 var cpt = require(’./cpt’ + ‘able’); 改成 var cpt = cptable;（弊端：每次拉包时都需要修改）

　　2.2 方案二：复制依赖包该文件