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

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

2.

<el-form-item>
    <el-button type="primary" @click="excelExport" >导出内容</el-button>
</el-form-item>

<el-table
        :data="list"
        border
        stripe
        :max-height="clientHeight"
        class="table"
        @sort-change="changeTableSort"
        :default-sort=sortRule>
    <el-table-column label="序号" align="center" width="70">
        <template slot-scope="scope"><span>{{scope.$index+(currentPage - 1) * pageSize + 1}} </span></template>
    </el-table-column>
    <el-table-column
            property="product"
            label="产品">
    </el-table-column>
        ... 此处更具自己代码补充
    <el-table-column
            property="open_date"
            label="创建日期"
            :sortable="'custom'"
            :sort-orders="['ascending', 'descending']">
    </el-table-column>
</el-table>

<div class="block">
    <!--            假分页-->
    <el-pagination class="paging"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="currentPage"
                   :page-sizes="[5, 10, 50, 100]"
                   :page-size="pageSize"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total=total>
    </el-pagination>
</div>

 

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), <anonymous>:1:1)
    at eval (<anonymous>)
    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无法引入，然后各种想办法，最后发现，把以下配置修改下就好了，

修改成

就可以了！！！！