【Vue】手写前端导出表格为CSV文件功能

最新推荐文章于 2025-08-20 14:42:54 发布

原创

最新推荐文章于 2025-08-20 14:42:54 发布 · 203 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #javascript #excel #ecmascript

这篇博客介绍了如何在前端实现CSV文件的导出功能。通过处理JSON数据，将一级表和二级表的数据转换为逗号分隔的字符串，然后使用创建a标签的方式触发文件下载，最终生成名为'客户管理列表.csv'的CSV文件。主要涉及前端数据处理和文件下载操作。

参考博客

前端导出表格为CSV文件功能

代码

getExportList() {
  let jsonData = {
      trade:{
        tHeader: ["名字","性别","年龄","爱好","身份证号码"],
        filterVal: ["name","sex","nlin","aihao","sfz"],
        list: [{name: "名字啊",sex: "性别啊",aihao: "爱好啊",nlin:"年龄啊",sfz:"123456789012345678"},
              {name: "名字哦",sex: "性别哦",nlin:"年龄哦",aihao: "爱好哦",sfz:"123456789012345678"}]
      },
      order:{
        tHeader: ["附表名字","附表性别","附表年龄","附表爱好"],
        filterVal: ["name","sex","nlin","aihao"],
        list: [{name: "附表名字啊",sex: "附表性别啊",nlin:"附表年龄啊",aihao: "附表爱好啊",},
               {name: "附表名

最低0.47元/天解锁文章