vue 前端导出excel遇到的问题

链接: https://pan.baidu.com/s/1b66392ngKB-5F6UsV7_z9Q 提取码: 439x 

1.在vue项目下新建文件夹：vendor，从网盘中下载以下两个js文件放入其中：

2.

    导出内容

    
        
    
    
    
        ... 此处更具自己代码补充
    
    



    
    
    

 

3.data:定义个list值，用于存后端返回的list信息，和渲染表格字段

4.前端导出：在method:中添加你要导出的方法

// 导出按钮的逻辑
excelExport() {
    this.downloadLoading = true
    require.ensure([], () => {
        const {export_json_to_excel} = require('../vendor/Export2Excel')//这里根据具体路径来修改
        const tHeader = ['产品','编号', '标题',,'创建人','创建日期']
        const filterVal = ['product', 'id', 'name','title','open_date']//这是你从list中取哪些字段
        const list = this.List//后端返回的list
        // console.log(list)
        const data = this.formatJson(filterVal, list)
        export_json_to_excel(tHeader, data, 'productExcel')
        this.downloadLoading = false
    })
},
formatJson(filterVal, jsonData) {
    return jsonData.map(v => filterVal.map(j => v[j]))
}

5.然后启动前后端项目，执行接口，点击导出按钮，然后问题来了，f12第一次都会报以下错：

addScript.js?f2b5:8 [Script Loader] ReferenceError: require is not defined
    at eval (eval at module.exports (addScript.js?f2b5:27), :1:1)
    at eval ()
    at module.exports (addScript.js?f2b5:20)
    at eval (Blob.js?7f47:1)
    at Object../node_modules/script-loader/index.js!./src/vendor/Blob.js (3.js:594)
    at __webpack_require__ (app.js:790)
    at fn (app.js:151)
    at eval (Export2Excel.js?4bf8:3)
    at Module../src/vendor/Export2Excel.js (3.js:606)
    at __webpack_require__ (app.js:790)

请注意，我这边用的是vue-cli 3 脚手架，是没有网上很多教程里的“在webpack.base.conf.js 里面增加resolve下一行代码
‘vendor’: path.resolve(__dirname, ‘…/src/vendor’),//新增加一行” 这样的操作的

然后我百度半天，都是require无法引入，然后各种想办法，最后发现，把以下配置修改下就好了，

修改成

就可以了！！！！