Vue导出表格到Excel的实现及遇到的问题

最新推荐文章于 2024-07-24 09:45:15 发布

原创最新推荐文章于 2024-07-24 09:45:15 发布 · 865 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

Vue 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍如何在Vue项目中实现数据导出为Excel的功能，包括安装必要依赖、下载并配置Blob.js和Export2Excel.js文件，以及在项目中具体使用的方法。通过实例代码展示如何设置按钮触发导出，处理数据格式，最终生成Excel文件。

1.安装依赖

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

2.下载两个文件

Blob.js和 Export2Excel.js 。
新建src/vendor目录，将这两个文件放进去。

3.修改配置文件

在build/webpack.base.conf.js中resolve的alias中加入一行：
'vendor': path.resolve(__dirname, '../src/vendor'),
修改配置文件

4.使用

<button @click="handleDownload">导出</button>

methods:{
    handleDownload() {
        require.ensure([], () => {
            const {
                export_json_to_excel
            } = require('vendor/Export2Excel');
            const tHeader = ['序号', '文章标题', '作者', '阅读数', '发布时间'];
            const filterVal = ['id', 'title', 'author', 'views', '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, '列表excel');
        })
    },
    // 参数过滤
    formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]))
    },
  }