JS 下载
- import XLSX from 'xlsx'
- exportExcel() {
- var aoa = [
- ['姓名', '性别', '年龄', '注册时间'],
- ['张三', '男', 18, new Date()],
- ['李四', '女', 22, new Date()]
- ];
- var sheet = XLSX.utils.aoa_to_sheet(aoa);
- Export.openDownloadDialog(Export.sheet2blob(sheet), '导出. xlsx');
- },
- sheet2blob(sheet, sheetName) {
- sheetName = sheetName || 'sheet1';
- var workbook = {
- SheetNames: [sheetName],
- Sheets: {}
- };
- workbook.Sheets[sheetName] = sheet;
- // 生成 Excel 的配置项
- var wopts = {
- bookType: 'xlsx', // 要生成的文件类型
- bookSST: false, // 是否生成 Shared String Table, 官方解释是, 如果开启生成速度会下降, 但在低版本 iOS 设备上有更好的兼容性
- type: 'binary'
- };
- var wbout = XLSX.write(workbook, wopts);
- var blob = new Blob([s2ab(wbout)], {type:"application/octet-stream"});
- // 字符串转 ArrayBuffer
- function s2ab(s) {
- var buf = new ArrayBuffer(s.length);
- var view = new Uint8Array(buf);
- for (var i=0; i!=s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
- return buf;
- }
- return blob;
- },
- /**
- * 通用的打开下载对话框方法, 没有测试过具体兼容性
- * @param url 下载地址, 也可以是一个 blob 对象, 必选
- * @param saveName 保存文件名, 可选
- */
- openDownloadDialog(url, saveName)
- {
- if(typeof url == 'object' && url instanceof Blob)
- {
- url = URL.createObjectURL(url); // 创建 blob 地址,
- }
- var aLink = document.createElement('a');
- aLink.href = url;
- aLink.download = saveName || ''; // html5 新增的属性, 指定保存文件名, 可以不要后缀, 注意, file:/// 模式下不会生效
- var event;
- if(Windows.MouseEvent) event = new MouseEvent('click');
- else
- {
- event = document.createEvent('MouseEvents');
- event.initMouseEvent('click', true, false, Windows, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
- }
- aLink.dispatchEvent(event);
- }
通过 URL.createObjectURL 来给 blob 对象生成临时 URL
HTML5 的 download 属性
这个属性很重要, 它可以指定下载文件名, 并且可以告诉浏览器目标链接是一个下载链接, 不是一个普通链接, 我们看下面代码就能看出区别了:
- <a href="data:text/txt;charset=utf-8, 测试下载纯文本" download="测试. txt">
- 下载 1
- </a>
- <a href="data:text/txt;charset=utf-8, 测试下载纯文本">
- 下载 2
- </a>
可以发现, 下载 1 按钮能够实现下载, 点击下载 2 链接时直接在浏览器打开文件内容了.
参考:
JS 弹出下载对话框以及实现常见文件类型的下载
如何使用 JavaScript 实现纯前端读取和导出 Excel 文件
来源: http://www.jianshu.com/p/7698247d2e19