vue 导出Excel

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/JYL15732624861/article/details/79743877

导出为Excel的功能,记录两个方法:

1.vue中Table组件中自带exportCsv方法,可以实现导出功能,并且可以实现自定义导出列

方法名说明参数
exportCsv将数据导出为 .csv 文件,说明:
  • 支持IE9~IE11、Edge、Chrome、Safari、Firefox 全系列浏览器。
  • IE9、Safari 需要手动修改后缀名为 .csv
  • IE9暂时只支持英文,中文会显示为乱码。
params(Object):
  • filename 文件名,默认为 table.csv
  • original 是否导出为原始数据,默认为 true
  • noHeader 不显示表头,默认为 false
  • columns 自定义导出的列数据
  • data 自定义导出的行数据
  • callback 添加此函数后,不会下载,而是返回数据
  • separator 数据分隔符,默认是逗号(,)
  • quoted 每项数据是否加引号,默认为 false
说明:columns 和 data 需同时声明,声明后将导出指定的数据,建议列数据有自定义render时,可以根据需求自定义导出内容

实例:

Table组件,绑定表格中的信息为positionData

 <Table id='t1' :height="height" ref="tableM"   size="small":columns="positionColumns" :stripe="true" :data="positionData" border ></Table>

导出按钮上绑定export()函数

<Button type="primary" size="small" @click="export()"> 导出  </Button>

export函数:$refs父组件需要数据来源,所以要在Table组件中注册ref="tableM" 

export() {
            this.$refs.tableM.exportCsv({
                filename: '表格',//自定义文件名
                //columns: this.positionColumns.filter((col, index) => index < 2),自定义导出列
            });           
        },

更多可参考官网:https://www.iviewui.com/components/table

通过本方法可以导出.csv的原始数据文件,下面介绍导出.xlsx格式的文件


2.转化json数据到Excel

(1)首先安装依赖,在终端输入命令:

npm install -S file-saver xlsx  

npm install -D script-loader

(2)在项目src下新建一个文件夹vendor,在此文件夹下放置两个文件Blob.js和Export2Excal.js

链接: https://pan.baidu.com/s/1m6d-aOff2fX4WB7mXxXDZQ 密码: ypb5


(3)export函数

 export() { 
          require.ensure([], () => {        
            const { export_json_to_excel } = require('@/vendor/Export2Excel.js');  //引入文件      
            const tHeader = [ '编码', '名称', ]; //表头
            const filterVal = ['ID', 'Name',;//table表格中对应的属性名     
            const data = this.formatJson(filterVal, this.positionData); //表格绑定数据positionData转json       
            export_json_to_excel(tHeader, data, 'position');
            })
 
        },
         formatJson(filterVal, jsonData) {
                return jsonData.map(v => filterVal.map(j => v[j]))
         },

注意:require('@/vendor/Export2Excel.js');路径以webpack.base.config.js中alias的声明为准


导出完成。

展开阅读全文

没有更多推荐了,返回首页