纯前端实现xls表格下载

1.createXlsStr:生成xls模板字符串函数

xls字符串，基本不需要变更，我们只需要通过变量控制结果即可
worksheet：xls的文件名（不是下载的文件名！）
contentStr: xls表格内部的数据（主要是tr和td元素拼接成的字符串）

function createXlsStr(worksheet,contenStr){return `<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>${worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>${contenStr}</table></body></html>`;}

2.tableToExcel：表格数据转换xls

window.btoa()将去空格的encodeURIComponent转换的str转为base64
createDataStr生成内容字符串
利用浏览器特性，将基础类型+准换后的base64,触发跳转下载
参数：jsonData-表格数据源，tableOptions-表格配置项

function tableToExcel(params){const {worksheet, jsonData, tableOptions} = params;const uri = 'data:application/vnd.ms-excel;base64,';const base64 = s => window.btoa(unescape(encodeURIComponent(s)));const contenStr = '<tr><td>测试</td></tr>'// const contenStr = createDataStr(jsonData, tableOptions)const template =createXlsStr(worksheet,contenStr)window.location.href = uri + base64(template);
}

3.createDataStr：封装配置化表单

jsonData:[{},{},{}],数据源，数组对象。
tableOptions:表格配置项，[{label:striing,key:string,render:(record:any)=>void}]
- label:表头名称
- key：数据绑定的字段名
- render:如需要自定义或者自己计算属性，将会渲染return的结果

function createDataStr(jsonData, tableOptions){// 列标题let str = tableOptions.reduce((prev, next,index) => {prev+=`<td>${next.label}</td>${index === tableOptions.length-1 ? '</tr>':''}`return prev},'<tr>');// 循环遍历，每行加入tr标签，每个单元格加td标签for(let i = 0 ; i < jsonData.length ; i++ ){const item =jsonData[i]str+='<tr>';for (let s = 0; s < tableOptions.length; s++) {// 增加\t为了不让表格显示科学计数法或者其他格式str+=`<td>${ tableOptions[s].render ? tableOptions[s].render(item) : item[tableOptions[s].key] + '\t'}</td>`;    }str+='</tr>';}return str;
}

4.完整代码:不积跬步无以至千里

// 封装配置化表单
function createDataStr(jsonData, tableOptions){// 列标题let str = tableOptions.reduce((prev, next,index) => {prev+=`<td>${next.label}</td>${index === tableOptions.length-1 ? '</tr>':''}`return prev},'<tr>');// 循环遍历，每行加入tr标签，每个单元格加td标签for(let i = 0 ; i < jsonData.length ; i++ ){const item =jsonData[i]str+='<tr>';for (let s = 0; s < tableOptions.length; s++) {// 增加\t为了不让表格显示科学计数法或者其他格式str+=`<td>${ tableOptions[s].render ? tableOptions[s].render(item) : item[tableOptions[s].key] + '\t'}</td>`;    }str+='</tr>';}return str;
}
// 生成xls模板字符串函数
function createXlsStr(worksheet,contenStr){return `<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>${worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>${contenStr}</table></body></html>`;}
// 表格数据转换xls
function tableToExcel(params){const {worksheet, jsonData, tableOptions} = params;const uri = 'data:application/vnd.ms-excel;base64,';const base64 = s => window.btoa(unescape(encodeURIComponent(s)));const contenStrDefault = '<tr><td>测试</td></tr>'const contenStr = createDataStr(jsonData, tableOptions)const template =createXlsStr(worksheet,contenStr)window.location.href = uri + base64(template);
}tableToExcel({worksheet:'测试表格',jsonData:[{name:'小明',age:18, time:'今天'},{name:'小红',age:18, time:'今天'}],tableOptions:[{label:'姓名',key:'name'},{label:'年龄',key:'age'},{label:'时间',key:'time',render:(record)=>Date().toLowerCase()},],
})

纯前端实现xls表格下载相关推荐

html5生成excel,H5纯前端生成Excel表格
H5纯前端生成Excel表格方法如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 var arr = [ 14 { 15 "姓名":"喵喵喵" ...
vue3.0 + xlsx 实现纯前端生成excel表格
vue3.0 + xlsx 实现纯前端生成excel表格 1.安装依赖 npm install xlsx --save 2.导入依赖 import * as XLSX from 'xlsx' // V ...
VUE纯前端导出excel表格功能《转载》
插件:使用vue-json-excel插件实现Vue纯前端导出简单的Excel表格功能. 使用方法 1. 安装依赖 npm install vue-json-excel 2. 引入组件 a. 全局引入 ...
纯前端实现excel表格导入导出
前言 github: https://github.com/stardew516... 以往做excel表格下载功能的时候,都是后端生成好表格后,存储在某个地方,然后给前端一个链接,前端使用a标签加d ...
excel在线_功能强大的纯前端 Excel 在线表格： Luckysheet
[导语]:Luckysheet是一款类似excel的在线表格,纯前端,功能强大.配置简单.完全开源,几行代码就能展现出一个功能完备的在线表格. 简介 Luckysheet是一款类似excel的纯前端在 ...
纯前端导入excel表格数据
安装插件 js-xlsx npm install xlsx --save js-xlsx 使用js-xlsx时,前端可以将后端返回的json数据拼接成自己需要导出的格式,下载到电脑中,完全不依赖后端. ...
一篇带你了解如何使用纯前端类Excel表格构建现金流量表
现金流量表(Cash Flow Statement),是指反映企业在一定会计期间现金和现金等价物流入和流出的报表.现金流量表是企业财务报表的三个基本报告之一(另外两个是资产负债表和损益表). 为了全面 ...
前端导出文件前端导出excel表格下载文件
导出文件的过程前端发请求, 后端处理后返回文件流, 前端通过Blob解析并下载实现过程: 前端发请求需要将响应类型更改为 arraybuffer 或 blob 不设置响应类型会导致下载的文件看起 ...
luckysheet 国产超强纯前端在线excel表格功能强大简单使用记录异常报错记录及处理
效果预览官网及在线示例 https://mengshukeji.gitee.io/LuckysheetDocs/zh/guide/ npm地址 https://www.npmjs.com/packa ...

纯前端实现xls表格下载

纯前端实现xls表格下载

1.createXlsStr:生成xls模板字符串函数

2.tableToExcel：表格数据转换xls

3.createDataStr：封装配置化表单

4.完整代码:不积跬步无以至千里

纯前端实现xls表格下载相关推荐

最新文章

热门文章