在开发过程中，经常会使用到很多ui插件，最后生成各种的表格，而需求又不仅仅是能看到表格，很多时候需要将生成的表格导出生成excel，供同事在办公中使用，记录一种vue导出excel，这个方法功能和效果都可以执行，但在运行脚本时会提示一个不能识别标签的错误，已更新修改方法！
1.首先看一下预计完成的效果
2.需要依赖的引入
npm install file-saver -S
npm install xlsx -S
npm install -D script-loader
3.需要两个js文件，内容下载地址
https://pan.baidu.com/s/1Z6kGo_Dze-J4KaoLnkWNug
提取码：anqc
4.在项目中文件存放的大概路径，文件名不要更改
5.在main.js中按照存放路径引入两个包
import Blob from './vendor/Blob'
import Export2Excel from './vendor/Export2Excel.js'
6.修改Export2Excel.js引入文件的路径
7.vue页面中写2个方法(网上方法)
export2Excel(){
require.ensure([], () => {
const { export_json_to_excel } = require('./vendor/Export2Excel');
//头
const tHeader = [ '时间', '地址', '姓名'];
//对应的标签
const filterVal = ['date', 'address', 'name'];
//标签对应的内容 是一个数组结构
const list = this.tableData;
//一个方法 我也不知道干嘛的
const data = this.formatJson(filterVal, list);
export_json_to_excel(tHeader, data, '列表excel');
})
},
formatJson(filterVal, jsonData){
return jsonData.map(v => filterVal.map(j => v[j]))
},
一个按钮 去触发expert2Excel() 这个函数就ok了
我写的那个做了一些判断下面截图
在这里补充一下，运行函数方法，此时会报一个寻找不到路径的错误问题
这里需要更改webpack.base.conf.js配置：搜索 【alias】直接定位
这就是一个简单的流程。
此时页面会有一个报错，如下：
报错.PNG
提示中的错误为无法识别的意外标识符，
查询了网上各种资料和分析后（网上资料说这个的不多）分析应该是require 浏览器不能识别的原因，因为并不影响正常使用，虽然刷新页面和初始化都会报这个错误，但是只要导出都是正常的导出的数据也没有影响
长时间调试还是觉得报错很碍眼，
方案一：下载兼容require的插件，并配置即可
方案二，直接改插件源码，如下：
将Export2Excel.js 中第二个引入文件的路径的‘script-loader!’删除
require('script-loader!../../node_modules/file-saver/src/FileSaver') // 保存文件用
require('../vendor/Blob') // 转二进制用
require('script-loader!../../node_modules/xlsx/dist/xlsx.core.min') // xlsx核心
这边用的是vue-cli脚手架，没有网上很多教程里的“在webpack.base.conf.js 里面增加resolve下一行代码
‘vendor’: path.resolve(__dirname, ‘…/src/vendor’),//新增加一行” 这样的操作的
这种方法你学会了吗？
另外一种
在网上看到也有其他的方法，这里记录一种，有空时去尝试
1.安装插件
cnpm install vue-json-excel
2.min.js中引入使用
import JsonExcel from 'vue-json-excel'
Vue.component('downloadExcel', JsonExcel)
3.直接在页面中使用
导出EXCEL
data() {
return {
json_fields: {
"头部-诊断名称": "name", //常规字段
"头部-联系电话": "phone.mobile", //支持嵌套属性
"头部-损坏区域代码": {
field: "phone.landline",
//自定义回调函数
callback: value => {
return `损坏区域代码 - ${value}`;
}
}
},
json_data: [
{
name: "损坏的组件一",
city: "New York",
country: "United States",
birthdate: "1978-03-15",
phone: {
mobile: "1-541-754-3010",
landline: "(541) 754-3010"
}
},
{
name: "损坏的组件二",
city: "Athens",
country: "Greece",
birthdate: "1987-11-23",
phone: {
mobile: "+1 855 275 5071",
landline: "(2741) 2621-244"
}
}
],
json_meta: [
[
{
" key ": " charset ",
" value ": " utf- 8 "
}
]
]
};
}
ps：
json_data: 需要导出的数据
json_fields: 自主选择要导出的字段，指定嵌套数据并将标签分配给键是标签的字段，值是JSON字段。这将“按原样”导出字段数据。如果需要自定义导出的数据，可以定义回调函数。里面的属性是excel表每一列的title,注意多个词组组成的属性名要加双引号
如果需要自定义导出的数据，可以定义回调函数。
具体步骤有待验证！