前端将表格数据转为excel并下载

在项目中导出表格的需求一般由后端完成，尤其涉及到分页的情况，但不可避免的有特殊情况的发生，故而整理了记录了一下当初实现的方法

新建文件Export2Excel，放入以下代码

/* eslint-disable */
require('script-loader!file-saver');
require('./Blob.js'); //改成相对路径
require('script-loader!xlsx/dist/xlsx.core.min');
function generateArray(table) {var out = [];var rows = table.querySelectorAll('tr');var ranges = [];for (var R = 0; R < rows.length; ++R) {var outRow = [];var row = rows[R];var columns = row.querySelectorAll('td');for (var C = 0; C < columns.length; ++C) {var cell = columns[C];var colspan = cell.getAttribute('colspan');var rowspan = cell.getAttribute('rowspan');var cellValue = cell.innerText;if (cellValue !== "" && cellValue == +cellValue) cellValue = +cellValue;//Skip rangesranges.forEach(function (range) {if (R >= range.s.r && R <= range.e.r && outRow.length >= range.s.c && outRow.length <= range.e.c) {for (var i = 0; i <= range.e.c - range.s.c; ++i) outRow.push(null);}});//Handle Row Spanif (rowspan || colspan) {rowspan = rowspan || 1;colspan = colspan || 1;ranges.push({s: {r: R, c: outRow.length}, e: {r: R + rowspan - 1, c: outRow.length + colspan - 1}});};//Handle ValueoutRow.push(cellValue !== "" ? cellValue : null);//Handle Colspanif (colspan) for (var k = 0; k < colspan - 1; ++k) outRow.push(null);}out.push(outRow);}return [out, ranges];
};function datenum(v, date1904) {if (date1904) v += 1462;var epoch = Date.parse(v);return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000);
}function sheet_from_array_of_arrays(data, opts) {var ws = {};var range = {s: {c: 10000000, r: 10000000}, e: {c: 0, r: 0}};for (var R = 0; R != data.length; ++R) {for (var C = 0; C != data[R].length; ++C) {if (range.s.r > R) range.s.r = R;if (range.s.c > C) range.s.c = C;if (range.e.r < R) range.e.r = R;if (range.e.c < C) range.e.c = C;var cell = {v: data[R][C]};if (cell.v == null) continue;var cell_ref = XLSX.utils.encode_cell({c: C, r: R});if (typeof cell.v === 'number') cell.t = 'n';else if (typeof cell.v === 'boolean') cell.t = 'b';else if (cell.v instanceof Date) {cell.t = 'n';cell.z = XLSX.SSF._table[14];cell.v = datenum(cell.v);}else cell.t = 's';ws[cell_ref] = cell;}}if (range.s.c < 10000000) ws['!ref'] = XLSX.utils.encode_range(range);return ws;
}function Workbook() {if (!(this instanceof Workbook)) return new Workbook();this.SheetNames = [];this.Sheets = {};
}function s2ab(s) {var buf = new ArrayBuffer(s.length);var view = new Uint8Array(buf);for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;return buf;
}export function export_table_to_excel(id) {var theTable = document.getElementById(id);console.log('a')var oo = generateArray(theTable);var ranges = oo[1];/* original data */var data = oo[0];var ws_name = "SheetJS";console.log(data);var wb = new Workbook(), ws = sheet_from_array_of_arrays(data);/* add ranges to worksheet */// ws['!cols'] = ['apple', 'banan'];ws['!merges'] = ranges;/* 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'});saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), "test.xlsx")
}function formatJson(jsonData) {console.log(jsonData)
}
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['!cols'] = [{wpx:100},{wpx:100},{wpx:100},{wpx:100},{wpx:100},{wpx:100},{wpx:100},{wpx:100}];/* 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")
}

在需要下载的页面引入文件中的方法

const { export_json_to_excel } = require("@/vendor/Export2Excel");

在导出按钮处添加方法

 //导出的方法handleExport () {require.ensure([], () => {// 设置Excel的表格第一行的标题const tHeader = ['id',"网点代码","网点名称","编码","名称",'位置','时间',];//  对象的属性const filterVal = ["id",'netCode','netName',"code","name",'position','time',];// 数据集const list = this.tableData || [];const data = this.formatJson(filterVal, list);// excel名称可自定义const excelName = "文件名称";export_json_to_excel(tHeader, data, excelName);});},//格式化jsonformatJson (filterVal, jsonData) {return jsonData.map((v) => filterVal.map((j) => v[j]));},

前端将表格数据转为excel并下载相关推荐

从浏览器下载表格数据为Excel的两种实现方法
一.使用说明实际开发运用过程中,往往需要将页面上的一些表格数据生成Excel供用户下载使用,根据不同的需求,此处整理了两种方式:(两种方式浏览器都可直接提示下载或保存文件) 方式一: 1.需求: 生 ...
将Excel表格数据转为SQL语句
将Excel表格数据转为SQL语句 1.首先是将excel文件另存为csv格式文件 2.在当前行的最后新增一列,输入下面函数(其中表字段因人而异) =CONCATENATE("insert ...
前端进行表格数据导出到Excel表格
在一些项目中,会有可以导出表格数据的需求,这个导出的功能,前端就可以来完成,不过需要后端配合传过来表格头所对应的属性名以及这些属性名所对应的中文,搭配返回的数据,前端进行处理即可,虽然百度里面会有一大 ...
界面的表格导出为excel,并下载
最近,公司做了一个界面上的表格导出为excel并下载的一个功能.下面将具体的做法记录一下,以便后面复习. 首先先说一下需求一.界面上有一个表格: 就上面这个表格,我是写死的,要在界面上方有一个按钮, ...
js+PHP利用PHPExcel导出表格数据到excel
这里写自定义目录标题前言通过js筛选出表格数据 PHP利用PHPExcel导出表格数据到excel 前言因为在开发平台的时候遇到了需要将表格数据导出到Excel的情况,通过百度找到了PHP插件P ...
将页面中表格数据导出excel格式的文件（vue）
近期由于项目需要,需要将页面中的表格数据导出excel格式的文件,折腾了许久,在网上各种百度,虽然资料不少,但是大都不全,踩了许多坑,总算是皇天不负有心人,最后圆满解决了. 1.安装相关依赖(npm安 ...
vb用数组方式快速导出MSFlexGrid表格数据到Excel表格中
本来从MSFlexGrid或MSHFlexGrid导出数据到Excel中,是一个非常简单的问题,但论坛里还是经常有人问如何导出,有的虽然知道用单元格赋值方式循环导出,但速度太慢,因此写了一个通用的数据 ...
将页面表格导出为excel并下载
将页面表格导出为excel并下载的方式有很多, 本次介绍的是表格div的下载. 这种方式很简单,不需要去创建excel文件,也不需要创建工作簿,然后一点一点的填写数据.只需要将页面的div中的表格下载 ...
linux qt写入excel文件内容,Qt 读取Excel表格数据生成Excel表格并写入数据
Qt 读取Excel表格数据生成Excel表格并写入数据 Qt 读取Excel表格数据生成Excel表格并写入数据修改.pro文件,增加 axcontainer QT += axcontaine ...

前端将表格数据转为excel并下载

前端将表格数据转为excel并下载相关推荐

最新文章

热门文章