vue实现excel导出的时候报错

vue实现excel导出的时候报错:

app.js:7935 Uncaught (in promise) TypeError: Cannot read property 'map' of undefined
    at VueComponent.formatJson (app.js:7935)
    at VueComponent.boundFn [as formatJson] (app.js:108790)
    at app.js:7922 

代码:

<el-button type="primary" icon="edit" :disabled="this.sels.length === 0"  v-if="hasPerm('kh:download')" @click="outExe()">excel导出</el-button>     
//excel导出开始
     outExe() {
                this.$confirm('此操作将导出excel文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.excelData = this.dataList //你要导出的数据list。
                    this.export2Excel()
                }).catch(() => {
                
                });
            },
       export2Excel() {
                var that = this;
                require.ensure([], () => {
                    const { export_json_to_excel } = require('../../excel/Export2Excel'); //这里必须使用绝对路径
                    const tHeader = ['序号','公司名称', '公司地址', '客户名称','客户类型','电话','手机','地址','最新跟进记录','前负责人','客户状态','跟进日期','跟进内容','发起日期','负责人']; // 导出的表头名
                    const filterVal = ['xuhao','gongsimingcheng','gongsidizhi','khmc','khlx', 'dianhua','shouji','dizhi','zuixingenjinjilu','qianfzr','genjinneirong','faqiriqi','fuzeren']; // 导出的表头字段名
                    const list = that.excelData;
                    const data = that.formatJson(filterVal, list);
                    let time1,time2 = '';
                    if(this.start !== '') {
                        time1 = that.moment(that.start).format('YYYY-MM-DD')
                    }
                    if(this.end !== '') {
                        time2 = that.moment(that.end).format('YYYY-MM-DD')
                    }
                    export_json_to_excel(tHeader, data, `[${time1}-${time2}]CRM客户excel`);// 导出的表格名称,根据需要自己命名
                })
            },
            formatJson(filterVal, jsonData) {
                return jsonData.map(v => filterVal.map(j => v[j]))
            },
    //excel导出结束

 

解决办法:

在方法中加.catch

代码如下:

<el-button type="primary" icon="edit" :disabled="this.sels.length === 0"  v-if="hasPerm('kh:download')" @click="outExe()">excel导出</el-button>     
//excel导出开始
     outExe() {
                this.$confirm('此操作将导出excel文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.excelData = this.dataList //你要导出的数据list。
                    this.export2Excel()
                }).catch(() => {
                
                });
            },
           export2Excel() {
                var that = this;
                require.ensure([], () => {
                    const { export_json_to_excel } = require('../../excel/Export2Excel'); //这里必须使用绝对路径
                    const tHeader = ['序号','公司名称', '公司地址', '客户名称','客户类型','电话','手机','地址','最新跟进记录','前负责人','客户状态','跟进日期','跟进内容','发起日期','负责人']; // 导出的表头名
                    const filterVal = ['xuhao','gongsimingcheng','gongsidizhi','khmc','khlx', 'dianhua','shouji','dizhi','zuixingenjinjilu','qianfzr','genjinneirong','faqiriqi','fuzeren']; // 导出的表头字段名
                    const list = that.excelData;
                    const data = that.formatJson(filterVal, list);
                    let time1,time2 = '';
                    if(this.start !== '') {
                        time1 = that.moment(that.start).format('YYYY-MM-DD')
                    }
                    if(this.end !== '') {
                        time2 = that.moment(that.end).format('YYYY-MM-DD')
                    }
                    export_json_to_excel(tHeader, data, `[${time1}-${time2}]CRM客户excel`);// 导出的表格名称,根据需要自己命名
                }) .catch(err => {
                    console.log("sadasda");
              });
            },
            formatJson(filterVal, jsonData) {
                return jsonData.map(v => filterVal.map(j => v[j]))
            },
    //excel导出结束

运行结果如下:

 

Vue可以利用第三方库来实现Excel的导入和导出,下面是一个简单的示例: 首先,安装`xlsx`和`file-saver`这两个库: ``` npm install xlsx file-saver --save ``` 然后在Vue组件,定义一个方法来实现Excel导出: ```javascript import XLSX from 'xlsx'; import FileSaver from 'file-saver'; export default { methods: { exportExcel() { // 构建Excel数据 const data = [ ['姓名', '年龄', '性别'], ['张三', 18, '男'], ['李四', 20, '女'], ['王五', 22, '男'], ]; // 创建一个Workbook对象 const workbook = XLSX.utils.book_new(); // 创建一个Worksheet对象 const sheet = XLSX.utils.aoa_to_sheet(data); // 添加Worksheet到Workbook XLSX.utils.book_append_sheet(workbook, sheet, 'Sheet1'); // 生成Excel文件 const excelFile = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' }); // 保存Excel文件 const fileName = 'data.xlsx'; const blob = new Blob([excelFile], { type: 'application/octet-stream' }); FileSaver.saveAs(blob, fileName); }, }, }; ``` 以上代码,我们使用`XLSX`库创建一个Workbook对象,并添加一个Worksheet对象。然后使用`FileSaver`库保存Excel文件。 接下来,我们来实现Excel的导入功能。在Vue组件,定义一个方法来实现Excel导入: ```javascript import XLSX from 'xlsx'; export default { data() { return { tableData: [], }; }, methods: { importExcel(event) { // 获取上传的文件 const file = event.target.files[0]; // 创建一个FileReader对象 const reader = new FileReader(); // 读取Excel文件 reader.onload = (e) => { // 获取Excel文件数据 const data = new Uint8Array(e.target.result); const workbook = XLSX.read(data, { type: 'array' }); // 获取第一个Worksheet const sheet = workbook.Sheets[workbook.SheetNames[0]]; // 将Worksheet转换为JSON数据 const json = XLSX.utils.sheet_to_json(sheet, { header: 1 }); // 将JSON数据转换为表格数据 const tableData = []; for (let i = 1; i < json.length; i++) { const row = {}; for (let j = 0; j < json[0].length; j++) { row[json[0][j]] = json[i][j]; } tableData.push(row); } this.tableData = tableData; }; // 读取文件数据 reader.readAsArrayBuffer(file); }, }, }; ``` 以上代码,我们使用`XLSX`库读取Excel文件,并将Worksheet转换为JSON数据。然后将JSON数据转换为表格数据,最终存储在Vue组件的`tableData`变量
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值