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中的rem如何配置

    vue中的rem如何配置

    这篇文章主要介绍了vue中的rem如何配置,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • vue中的<template>标签与react中的<></>标签区别详解

    vue中的<template>标签与react中的<></>标签区别详解

    这篇文章主要为大家介绍了vue中的<template>标签与react中的<></>标签区别详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • vue 封装自定义组件之tabal列表编辑单元格组件实例代码

    vue 封装自定义组件之tabal列表编辑单元格组件实例代码

    这篇文章主要介绍了vue 封装自定义组件tabal列表编辑单元格组件实例代码,需要的朋友可以参考下
    2017-09-09
  • VUE中使用MUI方法

    VUE中使用MUI方法

    在本篇文章里小编给大家分享了关于VUE中使用MUI方法和步骤,有需要的朋友们可以学习参考下。
    2019-02-02
  • vue.js单文件组件中非父子组件的传值实例

    vue.js单文件组件中非父子组件的传值实例

    今天小编就为大家分享一篇vue.js单文件组件中非父子组件的传值实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue中datepicker的使用教程实例代码详解

    vue中datepicker的使用教程实例代码详解

    这篇文章主要介绍了vue-datepicker的使用,本文通过实例代码大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-07-07
  • Vue 搭建Vuex环境详解

    Vue 搭建Vuex环境详解

    这篇文章主要为大家介绍了Vue搭建Vuex环境,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-11-11
  • vue elementUI下拉框值无法选中问题及解决方案

    vue elementUI下拉框值无法选中问题及解决方案

    大家在写系统的时候,会有这样的需求:点击修改后把需要修改的数据放入表单,其中会有下拉单选框、下拉多选框,展示下拉框单选框内的数据只需要将所选id赋值给下拉框绑定的值就可以了,下面给大家分享vue elementUI下拉框值无法选中问题,感兴趣的朋友一起看看吧
    2024-03-03
  • 浅谈Vue.js 1.x 和 2.x 实例的生命周期

    浅谈Vue.js 1.x 和 2.x 实例的生命周期

    下面小编就为大家带来一篇浅谈Vue.js 1.x 和 2.x 实例的生命周期。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • 你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)

    你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)

    这篇文章主要介绍了你不知道的Vue技巧之--开发一个可以通过方法调用的组件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04

最新评论