javascript前端导出Excel简单写法

方法一：

/*** 导出表格数据到 Excel 文件* @param {Array} tableData - 表格数据* @param {Array} fieldLabels - 表头组成的数组* @param {Array} fieldKeys - 列属性名组成的数组* @param {String} fileName - 导出的文件名*/
function exportExcel(tableData, fieldLabels, fieldKeys, fileName) {let dataStr = fieldLabels.toString() + '\r\n';tableData.forEach(item => {fieldKeys.forEach(key => {// 加引号是为了使换行符在单元格内正常显示 dataStr += `"${item[key]}"\t,`;});dataStr += '\r\n';});// encodeURIComponent 解决中文乱码const url = "data:text/xls;charset=utf-8,\ufeff" + encodeURIComponent(dataStr);const link = document.createElement("a");link.href = url;link.download = fileName + ".xls";link.style.display = 'none';link.click();
}

为了让单元格中的数据不被转换格式（如过大的数字会被转为科学技术法显示），需要在数据后面加多余的字符，如以上代码的 \t。
long类型会有被截取的情况，导致精度不对

方法二：通过 HTML 导出 Excel 【推荐使用】

function exportExcel(tableData, fieldKeys, fieldLabels, fileName){// 用于替换数据中的换行符，是其可以在单元格内正常显示const wrapMark = '<br style="mso-data-placement:same-cell;"/>';// 设置单元格数据显示为文本格式，避免过大的数字以科学计数法的形式显示const tdTagHeader = `<td style="mso-number-format:'\@'">`;let dataStr = '<tr>'fieldLabels.forEach(label => {dataStr += `${tdTagHeader + label}</td>`;})dataStr += '</tr>';tableData.forEach(item => {dataStr += '<tr>'fieldKeys.forEach(key => {// 这种方式本质是导出 html 文件，html 中连续的空格符会被合并成一个显示// replace(/ /g, '&nbsp;') 将空格符替换成 &nbsp; 使其可以正常显示dataStr += tdTagHeader + `${item[key]}`.replace(/ /g, '&nbsp;').replace(/\n/g, wrapMark) + '</td>';});dataStr += '</tr>'})//设置 Worksheet 名const workSheet = 'Sheet1'const template = `<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><meta charset="UTF-8" /><!--[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>${dataStr}</table></body></html>`;const url = 'data:application/vnd.ms-excel;base64,' + window.btoa(unescape(encodeURIComponent(template))) ;const link = document.createElement("a");link.href = url;link.download = fileName + ".xls";link.style.display = 'none';link.click();
}

测试数据

const tableData =  [{ id: 874311049969889280, date: '2021-08-09 15:19:58.226000', manager: '王小虎', address: '蝙蝠山种猪场 工程' },{ id: 930129881019613184, date: '2022-01-10 16:04:04.612000', manager: '张小星', address: '德邦场 工程' },{ id: 873293464263864320, date: '2021-08-06 19:56:26.888000', manager: '刘小备', address: '牛栏山种 猪场' },{ id: 951031816474943488, date: '2022-03-09 08:20:54.364000', manager: '赵小云', address: '瓦塘种 猪场(仁隆场)' }]fieldKeys = ['id', 'date', 'manager', 'address'],fieldLabels = ['ID', '日期', '负责人', '地址'],fileName = '测试文件';exportExcel(tableData, fieldLabels, fieldKeys, fileName);

原文：前端表格数据导出为 Excel 的简单方法

javascript前端导出Excel简单写法相关推荐

前端导出excel兼容IE和主要浏览器
前端导出excel兼容IE和主要浏览器前端导出excel所见即所得,比较简单,代码送上 1.页面调用 <a class="img-button margin_r_5" hr ...
js 使用前端导出excel,设置标题和页脚,实现特殊表格需求
js前端导出excel,网上的例子很多,大部分都是使用如下代码: //统计导出$scope.statisExport=function(){toOutPutExcel('statisTable', ' ...
Vue实现在前端导出Excel
安装依赖进入项目文件夹,打开cmd或者在Webstorm中的Terminal中输入: npm install -S file-saver xlsx npm install -D script-loa ...
vue-json-excel前端导出excel教程
vue-json-excel是一个专门为解决前端导出Excel而开发的一个组件库. 个人认为,导出在前端做,不是特别合适,最好是后端提供导出下载文件接口,如果后端确实不想提供接口,要让你做前端导出,那 ...
vue导出excel加一个进度条_Vue实现在前端导出Excel
安装依赖进入项目文件夹,打开cmd或者在Webstorm中的Terminal中输入: npm install -S file-saver xlsx npm install -D script-loa ...
前端导出excel(element+xlsx+filesaver插件),表格数据重复问题解决
纯前端导出excel,表格数据渲染重复业务需求页面有table表格里的多条数据,并且没有分页.需求希望不调用接口,纯前端生成excel文件实现导出功能. 效果图 1.安装依赖(xlsx 和 fil ...
js vue 设置excel单元格样式_vue项目使用xlsx-style实现前端导出Excel样式修改（添加标题，边框等），并且上传npm踩坑记录...
前段时间,我们项目提出一个前端导出Excel表格的需求, 这个很简单,利用xlsx,file-saver很容易实现(网上很多教程). 后来需要加入标题,标题居中显示,加入边框等等样式需求,这就给我很多 ...
excel导出_学习笔记—— 前端导出excel
这两天工作上来了两个需求,一个是打印的功能,一个是导出的功能.功能其实之前已经做出来了,打印我用的是printjs的插件,excel用的是Export2Excel.js,但是产品要求打印页面和导出的e ...
前端导出excel自定义样式(行高除外)
前端导出excel需要用到的依赖有xlsx.xlsx-style import XLSX from 'xlsx'; import XLSXStyle from 'xlsx-style'; npm in ...
vue+elementui表格前端导出excel以及自定义导出样式
vue+elementui表格前端导出excel以及自定义导出样式项目遇到前端自己导出表格,我自己把后端给我的数据处理了一波,合并重复列啊,以及表头合并啊.可没想到导出竟然也要前端自己来弄,于是乎请 ...

javascript前端导出Excel简单写法

方法一：

方法二：通过 HTML 导出 Excel 【推荐使用】

测试数据

javascript前端导出Excel简单写法相关推荐

最新文章

热门文章