Vue实现在前端导出Excel 方法1

Posted 2021-12-03 yingyigongzi

也可以去看我的方法2：https://www.cnblogs.com/yingyigongzi/p/10915403.html

-------------------------------------------------------------------------------------

参考1：http://www.pianshen.com/article/613969950/

参考2：https://www.cnblogs.com/Mrfan217/p/6944238.html

npm安装:

cnpm install -S file-saver xlsx
cnpm install -D script-loader

下载所需的两个文件：Blob.js、Export2Excel.js

https://download.csdn.net/download/badao_liumang_qizhi/10767801

或者：

https://gitee.com/BenDanXianSheng/excel_relyon.git

新建vendor，名称不一定非是vendor，建议但不非得将此目录放在与单页面同级的目录。将上面两个js文件放在vendor目录中。

比如：我自己在src下的assets下自己新建了一个文件夹vendor，把Blob.js、Export2Excel.js放入其中

然后

修改配置文件

在项目目录下的build下的 webpack.base.conf.js这个webpack的配置文件中的

resolve的alias中加入：

‘vendor‘:path.resolve(__dirname,‘../src/account/vendor‘),

 具体路径根据实际而写，这里是按照我的方式写的路径。

实现代码

点击导出按钮

<template>
    <div>
       <Button type="success" @click="export2Excel">Success</Button>
    </div>
</template>
<script>
// 参考：https://www.cnblogs.com/Mrfan217/p/6944238.html
export default {
    name:‘‘,
    data () {
        return {
        }
    },
    methods: {
      export2Excel() {
        require.ensure([], () => {
          const { export_json_to_excel } = require(‘vendor/Export2Excel‘);
          const tHeader =
            [
            ‘编号‘, ‘标题‘, ‘作者‘,‘回顾‘, ‘时间‘    
            ];
          const filterVal =
            [‘id‘, ‘title‘,‘author‘,‘pageviews‘,‘display_time‘];  
           const list =
           [
             {id: 1, title: 2, author: 3, pageviews: 4, display_time: 5},
             {id: 6, title: 7, author: 8, pageviews: 9, display_time: 10},
             {id: 11, title: 12, author: 13, pageviews: 14, display_time: 15},
            ];
          const data = this.formatJson(filterVal, list);       
          export_json_to_excel(tHeader, data, ‘**账单报表‘);
        })
      },
      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]))
    }
    },
    computed:{

    },

}
</script>
<style scoped>

</style>