纯前端导出excel 插件xlsx和file-saver

最新推荐文章于 2024-06-21 11:06:52 发布

落落的前端学习之路

最新推荐文章于 2024-06-21 11:06:52 发布

阅读量571

点赞数

分类专栏： react excel导出 javascript 文章标签：前端 javascript vue.js

本文链接：https://blog.youkuaiyun.com/qq_36904182/article/details/125411617

版权

javascript 同时被 3 个专栏收录

24 篇文章

订阅专栏

react

8 篇文章

订阅专栏

excel导出

1 篇文章

订阅专栏

这篇博客介绍了如何在Vue-element-admin项目中利用xlsx插件和file-saver库高效导出上万条数据到Excel文件。通过提供源码链接和具体步骤，展示了从数据处理到文件保存的完整过程，包括关键函数`export_json_to_excel`的调用和数据格式化方法`formatJson`的实现。

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

使用插件 xlsx 导出表格，file-saver保存文件

vue-element-admin,源码中找的；导出上万条数据还是很快的

gitHub地址,/vendor/Export2Excel的js文件

使用方法

 export_json_to_excel({
                        header: res.header,
                        data: res.exportData,
                        filename: `${fileName}1-${exportData.length}`,
                        autoWidth: true,
                        bookType: "xlsx"
                    })

对应数据处理

 import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['Id', 'Title', 'Author', 'Readings', 'Date']
        const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
        const list = this.list
        const data = this.formatJson(filterVal, list)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: this.filename,
          autoWidth: this.autoWidth,
          bookType: this.bookType
        })
        this.downloadLoading = false
      })
 formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        if (j === 'timestamp') {
          return parseTime(v[j])
        } else {
          return v[j]
        }
      }))
    }