前言(感谢技术的分享者)

参考博客地址
github地址
由SheetJS出品的js-xlsx是一款非常方便的只需要纯JS即可读取和导出excel的工具库,功能强大,支持格式众多,支持xls、xlsx、ods(一种OpenOffice专有表格文件格式)等十几种格式。

demo(上面参考博客写的很清楚,只给一个我的demo)

<script type="text/javascript" src="xlsx.core.min.js"></script>
<table id="_searchTable" border="1" bordercolor="#d9edf7" style="width: 100%;">
</table>
<button type="button" class="btn btn-default btn-sm" onclick="Search();">统计</button>
function exportExcel() {
var sheet = XLSX.utils.table_to_sheet($("#_searchTable")[0]);
var blob = sheet2blob(sheet);
openDownloadDialog(blob, '社会服务汇总表.xlsx');
}
// 将一个sheet转成最终的excel文件的blob对象,然后利用URL.createObjectURL下载
function 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 保存文件名,可选
*/
function 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(window.MouseEvent) event = new MouseEvent('click');
else
{
event = document.createEvent('MouseEvents');
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
}
aLink.dispatchEvent(event);
}

使用javascript纯前端导出excel的更多相关文章

  1. vue 纯前端导出 excel 表格

    在开发后台管理系统的时候,很多地方都要用到导出excel 表格,比如将table中的数据导出到本地,那么实现这种需求往往有两种方案: 一.后端开发一个下载链接,前端将这个链接放到 a 标签的 href ...

  2. 纯前端导出Excel表格

    <html> <head> <p style="font-size: 20px;color: red;">使用a标签方式将json导出csv文件 ...

  3. js前端导出excel

    此例子是利用html特性,纯前端导出excel,样式不好看,兼容主流浏览器. var tableid = jQuery(this).closest("div.tab-label-wrap&q ...

  4. 前端导出Excel兼容写法

    今天整理出在Web前端导出Excel的写法,写了一个工具类,对各个浏览器进行了兼容. 首先,导出的数据来源可能有两种: 1. 页面的HTML内容(一般是table) 2. 纯数据 PS:不同的数据源, ...

  5. Extjs4.2纯前台导出Excel总结

    前段时间做了两个项目,用到了Extjs4.2纯前台导出Excel,遇到很多的问题,从网上也找了很多资料,在这里总结一下,做一个记录: 使用方法: 1.下载extexcel文件包,这里可以下载http: ...

  6. 纯前端导出pdf文件

    纯前端js导出pdf,已经用于生产环境. 工具: 1.html2canvas,一种让html转换为图片的工具. 2.pdfmake或者jspdf ,一种生成.编辑pdf,并且导出pdf的工具. pdf ...

  7. 前端导出excel表

    前端导出excel表 方式一: 前端js实现 : https://www.cnblogs.com/zhangym118/p/6235801.html 方式二: java后端实现: https://bl ...

  8. javascript 将 table 导出 Excel ,可跨行跨列

    <script language="JavaScript" type="text/javascript"> //jQuery HTML导出Excel ...

  9. 前端导出Excel

    1.首先,需要下载一个叫better-xlsx,的插件,以yarn 为例 ' yarn add better-xlsx --save '下载相关依赖包( npm 方式 ' npm i better-x ...

随机推荐

  1. SpringBoot通过Ajax批量将excel中数据导入数据库

    Spring Boot通过Ajax上传Excel并将数据批量读取到数据库中 适合场景:需要通过excel表格批量向数据库中导入信息 操作流程 [1]前端上传一个excel表格 [2] 后端接收这个ex ...

  2. 【LeetCode】933.最近的请求次数

    933.最近的请求次数 知识点:队列: 题目描述 写一个 RecentCounter 类来计算特定时间范围内最近的请求. 请你实现 RecentCounter 类: RecentCounter() 初 ...

  3. 解决远程连接服务器数据库报错:Host ‘XXXXXX’ is blocked because of many connection errors

    参考:https://blog.csdn.net/li_li_lin/article/details/72764683和 https://blog.csdn.net/zaishijizhidian/a ...

  4. PAT乙级:1072开学寄语(20分)

    PAT乙级:1072开学寄语(20分) 题干 下图是上海某校的新学期开学寄语:天将降大任于斯人也,必先删其微博,卸其 QQ,封其电脑,夺其手机,收其 ipad,断其 wifi,使其百无聊赖,然后,净面 ...

  5. 【LeetCode】94. 二叉树的中序遍历

    94. 二叉树的中序遍历 知识点:二叉树:递归:Morris遍历 题目描述 给定一个二叉树的根节点 root ,返回它的 中序 遍历. 示例 输入:root = [1,null,2,3] 输出:[1, ...

  6. windows下搭建vue开发环境实践

    Vue.js是一套构建用户界面的 "渐进式框架".与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已 ...

  7. C#.NET 国密SM3withSM2签名与验签 和JAVA互通

    C# 基于.NET FRAMEWORK 4.5 JAVA 基于 JDK1.8 一.要点 1.签名算法:SM3withSM2. 2.签名值byte[] 转字符串时,双方要统一,这里是BASE64. 二. ...

  8. koa踩坑记录

    1.koa热更新用nodemon 2.koa中暂不支持import/export 3.只发送options请求,没有后续请求   当ctx.set('Access-Control-Allow-Cred ...

  9. GC Roots包含哪些

    1.虚拟机栈中引用的对象 2.方法区中静态属性.常量引用的对象 3. 本地方法栈中引用的对象 4. 被Synchronized锁持有的对象 5. 记录当前被加载类的SystemDictionary 6 ...

  10. 正则:支持6-20位数字、字母和特殊字符(仅限!@#$%^&*())

    checkpwd(newpsd); function checkpwd() { var newpsd = $(":input[name='newpsd']").val(); var ...