本篇主要记录交流过程中遇到的高频问题,如果遇到问题请先阅读此文档,然后再向群内提问
开源这个插件以来,遇到了很多群友提出的各种各样的问题,碰到的提问千奇百怪,有些是不看文档的伸手党,有些是简短一句话“程序跑不起来,大佬求帮忙!”,还有问个问题啪啪啪十几条消息就过来了,更有甚者还有在群里说“大佬在么?”
遇到这种问题,我非孔明算不出来到底是哪里有问题,像挤牙膏一样一点点问清楚也特别耽搁时间。如果手里头不忙的时候,我会引导一下,让他们把 问题截图、代码、入参出参 群里发一下,如果手里事情特别多就搁置着了,有时候群内管理或者群友看到了会帮着回复下(PS:非常感谢勤劳的管理和活跃的群友们)。
所以,群里提问可以附上 问题截图、代码、入参出参 ,还可以附上你对这个问题的思考,有利于问题定位,提高解决问题的效率。
关于提问,有一篇张鑫旭大神写的文章推荐阅读:https://www.zhangxinxu.com/wordpress/2015/05/how-to-ask-web-front-question/?utm_source=caibaojian.com
预览代码需要部署在本地服务器下,因为代码内部通过AJAX获取数据,双击打开的页面无法异步获取需要导出的数据
插件编写之初,用了一些 JQuery 的辅助方法没有剔除,所以至少需要加载 JQuery 才能使用本插件,然后再通过 Script 标签加载 layui_exts/excel.min.js,随后使用全局变量 LAY_EXCEL 调用函数
如果不知道咋用,记着直接 Script 引入文件最简单了。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>非LAYUI加载</title>
<!--先加载jquery-->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!--再加载插件-->
<script src="../../layui_exts/excel.js"></script>
<script>
LAY_EXCEL.exportExcel([['Hello', 'World', '!']], 'hello.xlsx', 'xlsx')
</script>
</head>
<body>
</body>
</html>
可参见 Demo: http://excel.wj2015.com/demos/noLayui/index.html
导出性能与实际数据结构有关,建议使用虚拟的数据做下适用性测试,确保性能满足项目需求,使用 aoa 数组可以减少内存占用,也可以将数据拆开放到多个 Sheet 中减小导出压力,也可以期待未来插件的批量导出打包 zip 功能。
excel 里边能通过合并单元格做出来的样式都可以的,一般遵循如下步骤
可以参考 demos/tableExport/index.html,或者table 的 done 回调获取到响应数据后,用全局变量把响应存起来,点击按钮时通过全局变量获取数据也是一个思路,使用 table.cache["fsDatagrid"]
可能会有清空数据不同步的问题,请知晓。
遇到这个问题,可以根据如下步骤排查
首先检查一下,插件文件是 layui_exts/excel.js
不是 src/excel.js
,后者是源码,需要打包好 XLSX.JS FileSaver.js 等后才能正常使用。
也有可能是插件冲突,之前仅遇到过一次群友由于某个 JS 文件与 XLSX.JS 中 XLSX 的声明逻辑冲突。
下载路径选择是浏览器自带的功能,我们只能定义下载的文件名。
可以去 http://excel.wj2015.com 试一下,我个人试下来,下载文件名是一个乱码,重命名为 xxx.xlsx 后可以打开,体验不大好,还没找到解决办法。
现已支持图片导入,参照 图片导出 DEMO 及 『样式设置专区』
请查看『样式设置专区』 以及 设置环绕边框辅助函数
这种问题很大概率是表头与数据域不一致导致的,比如现在有如下数据
// 纯数据
var data = [
{name: 'xxx', sex: '222'}
];
// unshift 加入表头
data.unshift({age: '年龄', name: '姓名', sex: '性别'})
// 那么 data 如下:
// [{age: '年龄', name: '姓名', sex: '性别'}, {name: 'xxx', sex: 222}]
// 导出来的数据就会有三列,与纯数据的列不一致
解决方法,1. unshift
加入表头的字段顺序与纯数据的字段顺序一致,2. 用 filterExportData
函数梳理最终结果
需要注意列对象的 key 应该避免为数字,因为数字 key 的顺序在对象中不可控,容易导致乱序
如果是分段获取数据,可以根据 当前页/总页数 做一个进度条,一旦进入导出流程,就由 XLSX.JS 控制了,暂时还无法做到进度条。
可以去 样式专区 查看相关使用方法。需要注意的是,根据反馈,如果导出格式为 xls
,则无法导出带样式的表格。
请在 v1.7.5 版本及以后的导出中设置 『writeOpt.bookSST』,示例代码如下:
excel.exportExcel({
sheet1: data
}, '测试导出数据.xlsx', 'xlsx', {
writeOpt: {
bookSST: true,
}
})
骚年,想太多了,浏览器不会把路径给你的,前端仅能通过 HTML5 的 FileReader 获取到文件内容,File 对象的 name 参数也只是文件名称罢了。
之前倒腾过一次,没弄出来,导入需要用到 Blob 以及一些辅助方法(readAsBinaryString等),导致导入的兼容性不如导出。
数据规模:前端导出纯数据 9列10w 的数据量需要 7秒左右的时间,30W数据占用1.8G,耗时24秒,普通电脑最多能导出50w数据,耗时45秒,文件大小173M,提示内存超限
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。