Vue导出json数据到Excel电子表格

DirtyMind 发布于2019-08-21 17:44 / 3511人阅读

摘要：网上看了很多文档感觉都不全，这里写一篇完整的详细教程。一安装依赖前面基本一样二下载两个所需要的文件和。是每一栏的名称，需手动输入。是中的值，也是要自己写的。这里记得要与里面的名称对应这里可定义导出的文件名参考文章

网上看了很多文档感觉都不全，这里写一篇完整的详细教程。

一、安装依赖（前面基本一样）

npm install file-saver --save
npm install xlsx --save
npm install script-loader --save-dev

二、下载两个所需要的js文件Blob.js和 Export2Excel.js。

这里贴下下载地址：

http://xiazai.jb51.net/201708/yuanma/Export2Exce_jb51.rar

三、src目录下新建vendor文件夹，将Blob.js和 Export2Excel.js放进去。

四、更改webpack.base.conf.js配置

在resolve的alias： 
"vendor": path.resolve(__dirname, "../src/vendor")

五、在.vue文件中
script部分

data(){
  return{
    list:[
        {
          name:"韩版设计时尚风衣大",
          number:"MPM00112",
          salePrice:"￥999.00",
          stocknums:3423,
          salesnums:3423,
          sharenums:3423,
      },
      {
          name:"韩版设计时尚风衣大",
          number:"MPM00112",
          salePrice:"￥999.00",
          stocknums:3423,
          salesnums:3423,
          sharenums:3423,
      },
    ]
  }

methods:{
    formatJson(filterVal, jsonData) {
    　　　　return jsonData.map(v => filterVal.map(j => v[j]))
    　　},
    export2Excel() {
    　　　　require.ensure([], () => {
    　　　　　　const { export_json_to_excel } = require("../../../vendor/Export2Excel");
    　　　　　　const tHeader = ["商品名称","商品货号","售价","库存","销量","分享",];
    　　　　　　const filterVal = ["name", "number", "salePrice", "stocknums", "salesnums", "sharenums", ];
    　　　　　　const list = this.goodsItems;
    　　　　　　const data = this.formatJson(filterVal, list);
    　　　　　　export_json_to_excel(tHeader, data, "商品管理列表");
    　　　　})
    　 }
}

template:

这里说明一下：

1、export2Excel()中require的路径因个人项目结构不同可能需要多带带调整，如果报module not found "../../Export2Excel.js"之类请自行修改路径。

2、tHeader是每一栏的名称，需手动输入。

3、filterVal是data中list的key值，也是要自己写的。

4、这里记得要与data里面的list名称对应

5、这里可定义导出的excel文件名

参考文章：https://www.cnblogs.com/Mrfan...

GPU云服务器云服务器 js数据导出到excel js导出数据到excel js 导出数据到excel excel表格导出

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89932.html

使用 SpreadJS 实现 JavaScript 中导入和导出Excel文件

摘要：而作为一款深受用户喜爱的电子表格工具，借助其直观的界面出色的计算性能和图表工具，已经成为数据统计领域不可或缺的软件之一。使用实现的导入和导出通过纯，您完全可以实现导入和导出文件功能，并为最终用户提供与这些文件进行交互的界面。 JavaScript是一个涵盖多种框架、直译式、可以轻松自定义客户端的脚本语言，在 Web 应用程序中，更加易于编码和维护。而Excel 作为一款深受用户喜爱的电...

Jioby 2019-08-23 18:31 评论0 收藏0
vue.js中如何导出Excel表格

摘要：有一个项目需求，要求在前端项目中导出表格，经过查找代码确实可以实现，具体实现步骤为安装依赖导入两个下载和，在目录下新建文件夹，里面放入和两个文件在引入这两个文件在组件中使用导出的方法序号昵称姓名上面设置的表格第一行的标题上面的是里对有一个项目需求，要求在前端项目中导出Excel表格，经过查找代码,Vue.js确实可以实现，具体实现步骤为： 1.安装依赖 npm install -S ...

lunaticf 2019-08-23 18:03 评论0 收藏0
Vue 2019开发者图谱

摘要：为了便于您更清晰的理解的体系架构，在这里我将为您展示年开发者知识图谱，它包含了所有开发过程中的关键部分。在数据展示前端导入导出图表面板数据绑定等场景无需大量代码开发和测试，可极大节省企业研发成本并降低交付风险。作为 Vue 的初学者，您或许已经听过很多关于它的专业术语了，例如：单页面应用程序、异步组件、服务器端呈现等，您可能还听过和Vue经常一起被提到的工具和库，如Vuex、Webp...

cgspine 2019-08-23 18:14 评论0 收藏0
XCel 项目总结 - Electron 与 Vue 的性能优化

摘要：而这里的单元格信息是唯一的，所以直接通过为一个空对象赋值即可。和相关的知识和技巧高亮的列单元格采用展示。在中，被选中的单元格会高亮相应的行和列，以提醒用户。 showImg(https://segmentfault.com/img/bVGkdk?w=900&h=500); XCEL 是一个 Excel 数据清洗工具，其通过可视化的方式让用户轻松地对 Excel 数据进行筛选。 XCEL...

XUI 2019-08-22 10:45 评论0 收藏0