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

 更新时间:2017年12月04日 10:48:56   作者:OneSongOneStory  
本篇主要介绍了Vue导出json数据到Excel电子表格的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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

一、安装依赖(前面基本一样)

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

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

这里贴下下载地址:

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:

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

这里说明一下:

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

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

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

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • vue中$nextTick的用法讲解

    vue中$nextTick的用法讲解

    今天小编就为大家分享一篇关于vue中$nextTick的用法讲解,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-01-01
  • Vue.js实现模拟微信朋友圈开发demo

    Vue.js实现模拟微信朋友圈开发demo

    本篇文章主要介绍了Vue.js实现模拟微信朋友圈开发demo,实现展示朋友圈,评论,点赞等功能,有兴趣的可以了解一下。
    2017-04-04
  • vue3中使用logicFlow的方法代码示例

    vue3中使用logicFlow的方法代码示例

    在Vue3环境下,使用LogicFlow可实现流程图的绘制,详细步骤包括引入LogicFlow库,注册节点与边,设置主题和渲染数据,还包括使用Map和Menu进行功能扩展和右键编辑,以及通过事件监听实现交互,
    2024-10-10
  • Element中Slider滑块的具体使用

    Element中Slider滑块的具体使用

    这篇文章主要介绍了Element中Slider滑块的具体使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • 如何正确快速使用Vue中的插槽和配置代理

    如何正确快速使用Vue中的插槽和配置代理

    这篇文章主要介绍了正确快速使用Vue中的插槽和配置代理的相关知识,插槽分为三种,分别是默认插槽、具名插槽、作用域插槽,下面分别列出了如何使用这三种插槽,需要的朋友可以参考下
    2023-01-01
  • 详细聊聊Vue的混入和继承

    详细聊聊Vue的混入和继承

    混入(mixin)是一种非常灵活的方式,用来分发Vue组件中可复用的功能,一个混入对象可以包含任意组件选项,下面这篇文章主要给大家介绍了关于Vue混入和继承的相关资料,需要的朋友可以参考下
    2021-09-09
  • 详解vue3.x页面功能拆分方式

    详解vue3.x页面功能拆分方式

    本文主要介绍了vue3.x页面功能拆分方式,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-05-05
  • Element Plus实现Affix 固钉

    Element Plus实现Affix 固钉

    本文主要介绍了Element Plus实现Affix 固钉,Affix组件用于将页面元素固定在特定可视区域,文中通过示例代码介绍的非常详细,感兴趣的小伙伴们可以参考一下
    2021-07-07
  • Element Timeline时间线的实现

    Element Timeline时间线的实现

    本文主要介绍了Element Timeline时间线的实现,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • 详解vuejs中执行npm run dev出现页面cannot GET/问题

    详解vuejs中执行npm run dev出现页面cannot GET/问题

    这篇文章主要介绍了详解vuejs中执行npm run dev出现页面cannot GET/问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04

最新评论