vue如何导出excel文件

最新推荐文章于 2025-05-14 09:14:01 发布

衣衣1

最新推荐文章于 2025-05-14 09:14:01 发布

阅读量921

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_34633111/article/details/85786552

本文介绍了在Vue项目中如何导出Excel文件的步骤，包括安装必要的依赖包file-saver和xlsx，创建vendor目录并引入Blob.js和Export2Excel.js文件，配置webpack的alias，以及在Vue页面中编写导出代码。在实践过程中，作者遇到了vendor路径配置错误、Export2Excel.js中Blob路径调整以及不必要import语句的问题，并提供了相应的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、安装依赖包

npm install -S file-saver xlsx

npm install -D script-load

2、加入文件

建目录vendor，加入文件Blob.js和Export2Excel.js（网上寻找）

3、添加配置

alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'vendor': path.resolve(__dirname, '../src/vendor'),
    }

在webpack.base.conf.js之中的resolve中的alias加入'vendor': path.resolve(__dirname, '../src/vendor')。如上所示。

4、vue页面添加代码

 download () {
      console.log('下载表格')
      require.ensure([], () => {
        const {
          export_json_to_excel
        } = require('vendor/Export2Excel')
        var tHeader = ['Time', '王小明', '李小梅', '林林', '秦小明']
        var filterVal = ['year', 'CH1', 'CH2', 'CH3', 'CH4']
        var list = this.tableData3
        var data = this.formatJson(filterVal, list)
        export_json_to_excel(tHeader, data, '身高数据')
      })
    },
formatJson (filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },

其中，tHeader为excel标题

filterVal里的数据为vue里的table表格数据。