js-xlsx实现文件导出、下载(excel)
记录一下近期使用js-xlsx的一些经验
真正的.xls\.xlsx文件,就算是空白的其实是包含了一些内容的
所以并不能直接像写入txt一样直接搞一个file往里面把数据写入就完了
现在网上查得到导出excel的一些方法:
1、在IE上使用ActiveXObject导出文件
由于我们客户端是基于chorme的,所以没有做尝试
2、导出csv文件
如果是比较简单的表格(没有表格单元格合并等需求),其实csv文件也是一个不错的选择(当然前提是你不介意这个文件是csv文件)。需求比较介意,所以没有对csv进行尝试
3、导出伪.xls\.xlsx文件
①对html代码进行格式化,最后生成一串uri文件链接,再通过<a>标签进行下载
// let uri = 'data:application/vnd.ms-excel;base64,'// let 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>' +// '<!--[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>{table}</table></body></html>'// let base64 = (s: any) => { // return window.btoa(unescape(encodeURIComponent(s))) // }// let format = (s: any, c: any) => {// return s.replace(/{(\w+)}/g, (m: any, p: any) => {// return c[p]// })// }// let tableHTML = table[0].innerHTML + table[1].innerHTML// let ctx = {// worksheet: '统计',// table: tableHTML.replace(/<(img).*?>/g, '') // 筛选掉<img>// }// let downloadLink = document.createElement('a')// downloadLink.href = uri + base64(format(template, ctx))// downloadLink.download = '成绩统计.xls'// downloadLink.click()
这种大概可以保留行内样式,比如字体颜色、字体粗细等,但是对单元格格式进行控制(有些全数字的字符串过长会被识别成科学计数法),网上很多说可以用style="mso-number-format:\\@;",尝试了之后并不可行
②当然还有一种是可以不用对html进行格式化
因为excel可以识别html代码,可以跳过方法①中对html进行格式化的步骤,直接将html导出
<html><head><meta charset="utf-8"/> //避免中文乱码</head><body><table><tr><th>标题1</th><th>标题2</th><th>标题3</th><th>标题4</th></tr><tr><td>内容1</td><td>内容2</td><td>内容3</td><td>内容4</td></tr></table></body> </html>
excel也可以展示出来效果,但是打开之前会提示文件格式和扩展名不匹配,也就是说,这只是一个披着.xls扩展名的html文件,所以它连基本的单元格边框都没有,除非你在table里写上border="1"
③另外还有一种,更简单,直接
以上三种方法生成的全是伪xls,因为他们没有excel文件里那7kb内容,所以就算拓展名改成.xls\.xlsx,也只是一个假的文件
4、使用js-xlsx库,实现真正的.xls\.xlsx导出
参考https://github.com/SheetJS/js-xlsx
①安装
npm install xlsx
或者
bower install js-xlsx
②导入
官方github上有给各种框架的demo:
可以根据项目框架选择导入方式,这里是vue:
let workbook = XLSX.utils.table_to_book(wholeTable)let xls = XLSX.write(workbook, {bookType: 'xls', // 生成的文件格式bookSST: false, // 是否生成Shared String Table,官方解释是,如果开启生成速度会下降,但在低版本IOS设备上有更好的兼容性type: 'base64', // 编码方式})
这里xlsx提供了多种方法:
写入:
aoa_to_sheet
将JS数组的数组([ [...],[...],[...] ])转换为工作表json_to_sheet
将json对象数组转换为工作表table_to_sheet
将DOM TABLE元素转换为工作表sheet_add_aoa
将JS数据数组添加到现有工作表中sheet_add_json
将json对象数组添加到现有工作表中
读取:
sheet_to_json
将工作表对象转换为JSON对象数组sheet_to_csv
将工作表转换成csvsheet_to_txt
生成UTF16格式的文本sheet_to_html
生成HTML输出sheet_to_formulae
生成公式列表(具有值回退)
单元格和单元格地址操作:
format_cell
生成单元格的文本值(使用数字格式)encode_row / decode_row
在0索引行和1索引行之间转换encode_col / decode_col
在0索引列和列名之间进行转换encode_cell / decode_cell
转换单元格地址encode_range / decode_range
转换细胞范围
可以说是肥肠强大了
转载于:https://www.cnblogs.com/sue7/p/10157441.html
js-xlsx实现文件导出、下载(excel)相关推荐
- java poi导出下载excel报表或下载到指定路径
1. 数据库查出数据导出excel浏览器并下载 /*** 导出下载excel* @param list 导出数据* @throws Exception*/public static void expo ...
- Java实现将JSON文件导出到Excel
文章目录 一.运行环境 二.需求描述 三.实现思路 四.实现代码 一.运行环境 windows10 IDEA 2022 JDK 8 Maven 3.8.6 Apache POI 5 fastjson2 ...
- 关于文件导出(下载)功能不兼容IE浏览器的解决方案
关于文件导出(下载)功能不兼容IE浏览器的解决方案 参考文章: (1)关于文件导出(下载)功能不兼容IE浏览器的解决方案 (2)https://www.cnblogs.com/padaleidelei ...
- Json转为Excel文件导出下载
JSON转Excel导出 1. 先写界面,一个输入框,一个打印按钮,一个清空输入框按钮 我用的是layui框架,随便用啥都行 <div class="mb_l">< ...
- Easyexcel配置自定义列与自定义顺序导出下载Excel文件
依赖版本 <dependency><groupId>com.alibaba</groupId><artifactId>easyexcel</art ...
- Java中使用HSSFWorkbook POI导出下载excel文件
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言 一.单元格的合并 二.表格的生成和导出 1.后端代码 2.前端代码 总结 前言 提示:这里可以添加本文要记录的大概内容 ...
- java文件流下载excel_React获取Java后台文件流下载Excel文件
记录使用blob对象接收java后台文件流并下载为xlsx格式的详细过程,关键部分代码如下. 首先在java后台中设置response中的参数: public void exportExcel(Htt ...
- js xlsx自定义样式导出
使用的技术 xlsx 用于解析和编写各种电子表格.比如excel.csv.html文件 xlsx-style 为xlsx库添加样式,比如字体颜色,大小,行宽等.但是只支持xlsx.xlsm.xlsb格 ...
- node 导入 导出 下载excel
// 导入excel router.get('/uploadExcel', function (req, res) {let data = [{name: '第一个sheet',data: [['字段 ...
- vue+elementui系统利用Export2Excel.js将表格内容导出到excel,并设置表头文字水平垂直居中
写在前面:这是纯前端导出,导出的表格是二级表头,内容是四级单元格(单元格内有四小格),这几个点学会之后应该能适应大部分导出excel的需求了.本次功能记录真实有效.对于之前没接触过导出excel需求的 ...
最新文章
- php怎么批量转码,网站文件批量转码_PHP教程
- Spring Boot + Mybatis + Shiro 后台权限管理系统
- pandas的DataFrame转化为Datatable的DataFrame
- 科学家的假想-substr的妙用
- git pull提示当前branch没有跟踪信息
- 面试题:聊一聊设计模式的基本原则
- Oauth2.0认证---授权码模式
- SQL Server 2008将数据导出到SQL脚本文件
- 编译32位_实战经验:在Windows平台编译x264
- Win10升级后出现的OEM分区处理
- 【数据库04】中级开发需要掌握哪些SQL进阶玩法
- 微信群聊小机器人的服务器,微信群里自动聊天的机器人是怎么弄的?有没有操作教程?...
- 七大数字经济重点产业!
- Vivado与Modelsim联合仿真配置【图文并茂】
- MRAM学习笔记——4.SOT-hall器件的测试
- 代码整洁之道-读书笔记之整洁的代码
- java编程中缩进的意思,解释Java 的语句缩进,请详述,并举例说明(用初级Java程序)...
- Android viewpager在scrollview中的滚动问题
- 计算机网络ppt儿童版,计算机网络完整版本ppt课件
- 计算飞机跑道长度C语言,中国各个机场跑道长度
热门文章
- Pyinstaller 4.4官方手册 3# Pyinstaller是什么?是如何工作的?
- 高德API-1.4.15操作设置
- PhotoShop 矢量蒙板
- matlab SOR统计滤波
- 单边、双边循环快速排序
- 《图解机器学习-杉山将著》读书笔记---CH3
- jeeplus多商户商城,分销商城
- 清华在职计算机博士招生简章,清华大学博士招生改革说明
- ​​​​​​​领域驱动设计DDD概论入门
- 51单片机数码管闪烁显示