记录--Vue中如何导出excel表格

Posted 2023-05-20 林恒

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助

一、导出静态数据

1、安装 vue-json-excel

npm i vue-json-excel

注意，此插件对node有版本要求，安装失败检查一下报错是否由于node版本造成！

2、引入并注册组件（以全局为例）

import Vue from "vue";
import JsonExcel from "vue-json-excel"; //引入excel插件
Vue.component("downloadExcel", JsonExcel);//注册

3、使用

在template节点下使用download-excel标签即可

    <download-excel class="downloadExcel" :data="dataAttr" types="xls" :fields="fields" :name="exportName"
      :worksheet="exportSheet" :header="exportName" :footer="exportFooter" :defaultValue="exportDefaultValue">
      <el-button type="success">导出</el-button>   //可以无需button
    </download-excel>

在data节点下定义数据

dataAttr: [
        
          id: 1,
          name: \'九转大肠\',
          price: 999,
          sellCount: 6,
          rating: 100
        ],
      fields:  // 数据名称及对应的值
        编号: \'id\',
        名称: \'name\',
        价格: \'price\',
        销量: \'sellCount\',
        好评率: 
          field: \'rating\',
          callback: value => `$value%` // 以对象方式可以对数据做处理
        
      ,
      exportName: \'这是表格名称\',
      exportSheet: \'这是表格sheet的名称\',
      exportHeader: \'这是表格的标题\',
      exportFooter: \'这是表格的页脚\',
      exportDefaultValue: \'这是一个默认的数据\'

点击导出

二、导出动态数据

如果需要在点击按钮前动态的获取数据，则需要使用fetch属性来指定一个参数。

注意，使用此参数时不能再绑定data参数

以导出一个外卖商品列表为例： 

1、为fetch属性绑定了一个回调。

    <download-excel class="downloadExcel" :fetch="getDataAttr" types="xls" :fields="fields" :name="exportName"
      :worksheet="exportSheet" :header="exportName" :footer="exportFooter" :defaultValue="exportDefaultValue">
      <el-button type="success">导出 exportName </el-button>
    </download-excel>

2、在methods节点下定义方法

getDataAttr() 
      const dataAttr = []     //定义导出数据
      this.goodsList.forEach((value) =>    //进行数据处理
        let dataAttrItem = new createExcleData(value.id, value.name, value.price,  value.sellCount, value.rating) 
         //使用引入的createExcleData
        dataAttr.push(dataAttrItem) //为导出的数据数组添加数据
      )
      return dataAttr //数据整理完毕
    ,

3、新建一个js文件封装一个类创建每条数据

export default class DataAttr 
  constructor(id, name, price, sellCount, rating) 
    this.id = id;
    this.name = name,
    this.price = price,
    this.sellCount = sellCount,
    this.rating = rating;
  

4、在组件下引入，然后就可以使用了

import createExcleData from \'@/utils/createExcleData\' 

goodsList数据如下

点击导出，打开导出文件

本文转载于:

https://juejin.cn/post/7204742703506522171

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。

 

Vue2.0---将页面中表格数据导出excel （详细）

　　项目中，后台数据生成的表格如何导出成excel？

　　一、需要安装三个依赖：

             npm install -S file-saver xlsx

             npm install -D script-loader

 

　　二、项目中新建一个文件夹：（vendor---名字任取）

　　　　里面放置两个文件Blob.js 和 Export2Excel.js。

　　　　百度可下载。

　　三、在.vue文件中
　　     写这两个方法：其中list是表格的内容
　　　　export2Excel() {
　　　　　　require.ensure([], () => {
　　　　　　　　const { export_json_to_excel } = require(‘../../vendor/Export2Excel‘);
　　　　　　　　const tHeader = [‘序号‘, ‘IMSI‘, ‘MSISDN‘, ‘证件号码‘, ‘姓名‘]; //对应表格输出的title
　　　　　　　　const filterVal = [‘ID‘, ‘imsi‘, ‘msisdn‘, ‘address‘, ‘name‘]; // 对应表格输出的数据
　　　　　　　　const list = this.tableData;
　　　　　　　　const data = this.formatJson(filterVal, list);
　　　　　　　　export_json_to_excel(tHeader, data, ‘列表excel‘); //对应下载文件的名字
　　　　　　})
　　　　},
　　　　formatJson(filterVal, jsonData) {
　　　　　　return jsonData.map(v => filterVal.map(j => v[j]))
　　　　}

　　　　

　　　四、按钮导出调用export2Excel方法

　

　　　　　注：如果webpack报解析错误：

　　　　　　在build----webpack.base.conf.js中resolve的alias加入 ‘vendor‘: path.resolve(__dirname, ‘../src/vendor‘),
　　　　　　即可解决
　　　　　　alias是配置别名

　　　　　　

 　　　　Blob.js和 Export2Excel.js文件：链接: https://pan.baidu.com/s/1eRFnegU 密码: 7ijr