基于Vue项目实现自定义多表头表格导出

本方法在export2Excel.js文件里面改动较少，适用性较强

安装依赖：

npm install -S file-saver
npm install -S xlsx
npm install -D script-loader

在项目中新建一个文件夹（一般在src下新建，文件名自取，在这里命名为vendor），在文件夹中放入Blob.js 和 export2Excel.js 。这两个文件需自行下载。
修改配置文件：在build文件夹下找到webpack.base.conf.js的alias做如下修改

'vendor': path.resolve(__dirname, '../src/vendor') //新增一行

下面可以在.Vue应用文件中定义excle导出事件了。

//导出表格,一级表头
handleDownloadExcel(){var that = this;//此处引用方式可能和网上的不太一样，作者因为在尝试用别的方法时报错This dependency was not found,该引用方式则没有该报错import('@/vendor/Export2Excel').then(excel=>{const THeader = ['单位名称','纳税人识别号','培训名称','交易单号','应缴金额','交易金额','缴费时间',];// 导出的表头字段名，需要导出表格字段名,类似于循环中data.Companynameconst filterVal = ['Companyname','taxNum', 'projectDetailsName', 'TransactionNumber', 'payNum', 'ispay', 'payTime'];// multipleSelection为需要导出的具体数据       const list = that.multipleSelection;//下方9行注销掉的内容可代替 const list = that.multipleSelection;作者在学习积累中，无法详细说明其区别。// let number = 0;// let newArrayList = []; // const list = newArrayList;// that.multipleSelection.map((item, index) => {//     newArrayList.push(Object.assign({}, item, {//         changeType: number++//     }))// });// newArrayList.splice(newArrayList.findIndex(item => item.changeType === 0), 0);const data = that.formatJson(filterVal, list);//data.unshift为添加的自定义表头，就是数组添加，可在之前之后打应查看data的变化data.unshift(['1','','','','','1','',])console.log(data)excel.export_json_to_excel(THeader, data,'表格')});
},
formatJson(filterVal, jsonData) {return jsonData.map(v => filterVal.map(j => v[j]))
},

此时调用方法导出表格如图所示：此处THeader数据依然在顶部，可以把THeader的数据直接当作一级表头即可，原来数据可依上述方法插入。

此处需要插入表头的数据已插入到表格中，接下来就是将需要合并的单元格合并。
合并单元格，此处需要更改export2Excel.js中的内容，找到export_json_to_excel在里面合并单元格，增加或修改ws['!merges']，有些ws['!merges']在export_table_to_excel，一定要在export_json_to_excel中配置

export function export_json_to_excel(th, jsonData, defaultTitle) {/* original data */var data = jsonData;data.unshift(th);var ws_name = "SheetJS";var wb = new Workbook(), ws = sheet_from_array_of_arrays(data);ws['!merges'] = [{//合并A2到E2s:{ c:0,r:1},e:{c:4,r:1}//上方可理解为: s:{ c:0,r:1},从1列的第2行，及A2，类似于数组计数（+1）//               e:{c:4,r:1},到第5列的第2行，及E2， //理解后可自定义合并             },//可定义多个合并//{//    s:{ c:0,r:1},e:{c:4,r:1}//}];/* add worksheet to workbook */wb.SheetNames.push(ws_name);wb.Sheets[ws_name] = ws;var wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: false, type: 'binary'});var title = defaultTitle || '列表'saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), title + ".xlsx")
}

此时导出的表格样式为：

此时已经合并表格

因为作者临时记录，自己也是新接触，有错误的地方还请各位大神指点，万分感谢~~~

vue项目导出自定义多级表头表格相关推荐

如何在 Vue 中导出数据至 Excel 表格 - 卡拉云
本文首发:<如何在 Vue 中导出数据至 Excel 表格 - 卡拉云> 我们经常需要在 Vue 搭建的后台管理系统里导出数据到 Excel / CSV ,方便我们将数据共享给其他同学或在 ...
Vue项目引入自定义字体 tinymce自定义字体的使用
字体也不是随便就能使用的,如果是有版权的字并且进行了大规模商用,很有可能面临着一大笔的赔偿金,所以公司会购买一些字体的使用权,所以在日常做项目时会经常使用到自定义字体引入的问题.我遇到的是Vue项目的 ...
Vue用Export2Excel导出excel,多级表头数据
VUE 使用Export2Excel导出数据,以及多级表头最近公司做项目,需要导出数据到excel表格使用到了 element UI ,Export2Excel 特此记录,毕竟好记性不如烂笔头不 ...
vue项目导出Excel表格
我们开发的时候可能需要导出表格,来实现客户的需求,接下来就从vue项目中介绍导出excal表格的方式. 以这个项目为实例来分析,导出就要选择数据,我这里做了全选数据导出和单选数据导出,先开一下如何处理 ...
Vue项目中指定区域的表格数据导出为Excel文件
vue项目中导出excel时有是会需要指定导出的区域如下图操作部分我们不需要导出只导出表格部分简记录下实现过程赋代码一. 安装三个依赖项 npm install -S file-saver np ...
vue有纵向和横向表头表格
github源码地址:https://github.com/zhjing1019/moreTreeTable 使用方法一.下载该组件 npm install more-tree-table 在mai ...
vue项目html引入css,vue项目引入自定义.css的样式文件
ES6的引入方式: .vue文件中 css文件引入 @import "../assets/common/common.css";//自定义.css的样式路径 js文件的引入在ma ...
微信小程序——多级表头表格
*****因为小程序不支持table,没办法只能通过组件递归的方式实现多级表头的渲染 /*** 这是表头数据格式*/ headerList: [{"name":"city ...
vue项目中自定义icon图标
vue项目中有时需要用到自定义图标,用法如下新建icon.css文件,定义图标及其名称 /*指针图标*/ .icon-pointer {background: url('../assets/imag ...

vue项目导出自定义多级表头表格

基于Vue项目实现自定义多表头表格导出

vue项目导出自定义多级表头表格相关推荐

最新文章

热门文章