【使用SheetJS实现在网页端导出 Excel 表格保存（js-xlsx）】

【使用SheetJS实现在网页端导出Excel表格保存（js-xlsx）】

文前白话
- 引入库文件
- 导出表格步骤
- 效果

文前白话

通过使用 SheetJS 库可以通过点击按钮，实现页面数据以 excel 、CSV 等文件形式导出到本地。
官方网址: https://sheetjs.com/.

详细介绍与使用可以详读库文档介绍：README.md
链接: https://github.com/SheetJS/sheetjs.

引入库文件

不同的使用场景有不同的方式：
在浏览器中，只需添加一个script标签:


<script lang="javascript" src="dist/xlsx.full.min.js"></script>

所需的文件：xlsx.full.min.js 或者 xlsx.min.js 可以在 github 官网文件仓库中的 dist 目录下。两个使用哪一个都可以。链接为：
链接: https://github.com/SheetJS/sheetjs/tree/master/dist.
引入页面位置放在要执行页面js的前面。

导出表格步骤

在点击按钮的函数下面添加导出步骤：（在对应的js文件中添加）


$('#button-content .title').on('click', function() {const btnDesc = $(this).find('span').html()if (btnDesc === '查询') {console.log('查询');getTableData({startTime: startTime,endTime: endTime})return}if (btnDesc.indexOf('导出报表') !== -1) {//使用 sheetjs 导出表格// 1、创建一个工作簿 workbook console.log(XLSX);const wb = XLSX.utils.book_new()//  2、创建工作表 worksheetconst ws = XLSX.utils.json_to_sheet([{id:1,name:"张三",age:20},{id:2,name:"李四",age:21},{id:3,name:"王五",age:20},{id:4,name:"麻子",age:20},{id:5,name:"狗蛋",age:20},{id:6,name:"七熊",age:20}])// 3、把工作表放到工作簿中 XLSX.utils.book_append_sheet(wb,ws, 'sheet')// 4、生成数据保存XLSX.writeFile(wb,"测试表格.xls",{ bookType: 'xls'})// alert(btnDesc) return}
})

注意：
若出现导出文件后，打开 Excel 表格时候，出现 : “导出文件格式和扩展名不匹配”, 表格无法打开。尝试以下：
1、注意保存文件格式 xlsx / xls
2、注意方法前的 XLSX 的大小写
3、检查引入文件xlsx.full.min.js的版本
在导出自己的数据时候，可以将后端的依照数据格式数据取出，放到【 {id:1,name:“张三”,age:20},】相对应得位置即可。
示例：


var queryDataResult = null  // 定义存储查询表格数据变量// 局部代码
console.log(res);var result = JSON.parse(res)console.log(result);if (result.code === 200) {const data = result.dataqueryDataResult = result.data   // 引出搜索的表格数据renderTable(data)}}, 500)//局部代码// 顶部搜索栏按钮事件
$('#button-content .title').on('click', function() {const btnDesc = $(this).find('span').html()if (btnDesc === '查询') {console.log('查询');getTableData({startTime: startTime,endTime: endTime})return}if (btnDesc.indexOf('导出报表') !== -1) { if (!queryDataResult || !queryDataResult.length) { // 判断数据是否为空return}console.log(queryDataResult)var  date55555 = queryDataResultconsole.log(XLSX);const wb = XLSX.utils.book_new()const ws = XLSX.utils.json_to_sheet(date55555)XLSX.utils.book_append_sheet(wb,ws, 'sheet')XLSX.writeFile(wb,"导出表格.xls",{bookType: 'xls'})

效果

RE:

SheetJS js-xlsx 社区版文档: https://github.com/rockboom/SheetJS-docs-zh-CN.
前端使用SheetJS的js-xlsx实现表格生成: https://www.shangmayuan.com/a/7857789cedc34e6287561f11.html.

【使用SheetJS实现在网页端导出 Excel 表格保存（js-xlsx）】相关推荐

将物流信息导出EXCEL表格保存的方法
小编分享批量查询物流信息并将查询到的物流导出表格保存的方法,有需求的朋友可以接着往下看,学到这个方法将大大提升查单效率. 开始操作之前,先给大家看下导出表格保存的物流信息,在表格中一一显示着. 开始操 ...
将查询好的快递单号以及物流导出EXCEL表格
最近有很多朋友在问,如何查询多家快递,并将物流导出EXCEL表格保存呢?今天小编给大家分享一个新的查询技巧,下面一起来试试吧. 材料准备: 一台Win系统的电脑快递单号若干步骤演示: 运行[快递批 ...
js网页导出excel表格文件
下载地址 js网页导出excel表格文件,没有使用任何第三方js类库,简单的实现table数据导出效果. dd:
luckysheet导出excel表格(使用exceljs，支持图片)
一.技术 exceljs;luckysheet; 参考文档:使用exceljs导出luckysheet表格_csdn_lsy的博客-CSDN博客_luckysheet 导出; https://gith ...
java io导出excel表格_Java IO 导入导出Excel表格
1.将excel导入到内存 1. 调用工作簿Workbook的静态方法getWorkbook(),获得工作簿Workbook对象 InputStream in = new FileInputStrea ...
node-xlsx - 简单几行代码处理导入、导出 excel 表格数据，免费开源的 javascript 工具库
最近开发的项目上需要把数据导出为 xlsx 文档,找了一圈,发现 node-xlsx 简单好用,分享给各位. 关于 node-xlsx 在 web 开发中,管理后台生成 excel 报表并且下载,一个 ...
elementui中有导出组件吗_Element-ui组件库Table表格导出Excel表格
安装 npm install --save xlsx file-saver 两个插件的详细地址在下面 https://github.com/SheetJS/js-xlsx https://github ...
com.alibaba.easyexcel导出指定的列_使用Python导入导出Excel表格
这篇文章的目的是讲解使用python导入导出Excel表格,目前还不涉及数据处理,主要实现为数据的展示. 第一步,准备材料 python3.8的安装包一个Excel表格第二步,安装软件 pytho ...
适用于主流浏览器导出Excel表格的代码
适用于主流浏览器导出Excel表格的代码问题描述: 有时候写项目会遇到在网页点击按钮可以把网页上显示的table表格数据从浏览器上直接下载下来, 优点是用户可以自由选择有价值的数据进行下载到用户本地 ...

【使用SheetJS实现在网页端导出 Excel 表格保存（js-xlsx）】

【使用SheetJS实现在网页端导出Excel表格保存（js-xlsx）】

文前白话

引入库文件

导出表格步骤

效果

【使用SheetJS实现在网页端导出 Excel 表格保存（js-xlsx）】相关推荐

最新文章

热门文章