前端自己导出Excel
1、导出当前页面，这是最简单的，只是导出当前页面的数据。
exportData(tableid, name) {
let table;
let uri = 'data:application/vnd.ms-excel;base64,',
template = '<html><head><meta charset="UTF-8"></head><body><table border="1">{table}</table></body></html>',
base64 = function (
s) {
return window.btoa(unescape(encodeURIComponent(s)))
},
format = function (s, c) {
return s.replace(/{(\w+)}/g, function (m, p) {
return c[p];
})
};
table = document.getElementById(tableid)
let ctx = {
worksheet: name || 'Worksheet',
table: table.innerHTML
};
window.location.href = uri + base64(format(template, ctx))
},
2、导出有分页的数据
exportData2() {
let table;//把所有要导出的数据全部封装成tbody内的数据，然后导出
let uri = "data:application/vnd.ms-excel;base64,",
template =
'<html><head><meta charset="UTF-8"></head><body><table border="1">{table}</table></body></html>',
base64 = function(s) {
return window.btoa(unescape(encodeURIComponent(s)));
},
format = function(s, c) {
return s.replace(/{(\w+)}/g, function(m, p) {
return c[p];
});
};
let ctx = {
worksheet:"导出",
table: table
};
window.location.href = uri + base64(format(template, ctx));
},
当前导出的话，我目前在我司的项目上应用，导出超过700条，数据就会在base64处转化失败，建议导出如果超过700条时，可以进行二次封装，每次只是500条，可以存两个变量，一个是{table}，一个是base64转化后的数据，然后组合起来，直至数据获取完毕，然后再导出
前端自己导出Excel的更多相关文章
- # vue 如何通过前端来导出excel表格
在做一些简单的demo时,偶尔会遇到导出excel表格.如果请后端帮忙的话 比较浪费时间,那么前端如何导出excel表格,下面就来记录一下之前使用到的案例 一.安装依赖 npm i file-save ...
- 前端 json 导出 excel
参考:https://blog.csdn.net/abel_yang/article/details/78684786 在github上有大神提供现成的插件,非常感谢 https://cuikangj ...
- 前端实现导出excel
结果: 将网页上拿到的数据导出成excel文件 实现: HTML代码 <div> <button type="button" onclick="expo ...
- js 前端 table 导出 excel
园子,github,stackoverflow 关于前端下载的文章不少 园子里大部分都是 利用ActiveXObject对象来实现,可他有个缺点安全等级,还有必须安装excel…… github,st ...
- vue项目，前端导出excel
今天研究一下前端如何导出excel,边查边实践,边记录 1.安装依赖库 xlsx:这是一个功能强大的excel处理库,但是上手难度也很大,还涉及不少二进制的东西 file-saver:ES5新增了相关 ...
- 如何使用JavaScript实现前端导入和导出excel文件
一.SpreadJS 简介 SpreadJS 是一款基于 HTML5 的纯 JavaScript 电子表格和网格功能控件,以“高速低耗.纯前端.零依赖”为产品特色,可嵌入任何操作系统,同时满足 .NE ...
- Atitit.导出excel功能的设计 与解决方案
Atitit.导出excel功能的设计 与解决方案 1.1. 项目起源于背景1 1.2. Js jquery方案(推荐)jquery.table2excel1 1.3. 服务器方案2 1.4. 详细 ...
- 前端导出Excel兼容写法
今天整理出在Web前端导出Excel的写法,写了一个工具类,对各个浏览器进行了兼容. 首先,导出的数据来源可能有两种: 1. 页面的HTML内容(一般是table) 2. 纯数据 PS:不同的数据源, ...
- 前端导出excel数据-jsonToExcel
咳咳,好久没有写博了... 在工作中遇到了纯前端,将数据导出为excel文件.正文开始: 第一步 安装依赖: npm i xlsx 第二步 写导出函数: import XLSX from 'xlsx' ...
随机推荐
- python：datetime.datetime is not JSON serializable 报错问题解决
问题: 项目使用django开发,返回的数据中有时间字段,当json.dumps()时提示:datetime.datetime is not JSON serializable 解决: import ...
- Django:将后台返回的数据填充到select下拉框中
select选择框如下: <select data-placeholder="选择项目..." class="form-control" name=&qu ...
- php 常用的常量
/* php 常用的常量 */ 1.系统常量 * FILE 当前PHP文件的相对路径 * LINE 当前PHP文件中所在的行号 * FUNCTION 当前函数名,只对函数内调用起作用 * CLASS ...
- 基于vue-cli、elementUI的Vue简单入门例子
vue-cli.elementUI的安装教程请看: https://www.cnblogs.com/joe235/p/12013818.html 把HelloWorld.vue文件修改为: <t ...
- windows环境下安装: VMware 15 + centos 7
第一步: 下载 centos7 http://isoredirect.centos.org/centos/7/isos/x86_64/ 选择阿里云镜像下载,速度最快 注意: 尽量使用下载工具下载, ...
- 走进热修复框架AndFix的世界
关于阿里的开源热修复框架AndFix引起了广泛共鸣,受到了很多人的青睐.那今天就跟随我的步伐来详细了解一下AndFix的详细信息和使用方法.1.什么是AndFix? AndFix是阿里巴巴出的一个专门 ...
- 史上最浅显易懂的RxJava入门教程
RxJava是一个神奇的框架,用法很简单,但内部实现有点复杂,代码逻辑有点绕.我读源码时,确实有点似懂非懂的感觉.网上关于RxJava源码分析的文章,源码贴了一大堆,代码逻辑绕来绕去的,让人看得云里雾 ...
- [C语言]小知识点 持续更新
2019-11-24 1.如果输入: printf(,)); 会得到0: 这和我们的日常判断不相符! 然而,改成: printf(,)); 就可以成功输出“2”: 因此,注意pow函数返回的是浮点数, ...
- ABP中的本地化处理（下）
在上篇文章中我们的重点是讲述怎样通过在Domain层通过PreInitialize()配置ILocalizationConfiguration中的Sources(IList<ILocalizat ...
- vue利用keep-alive/beforeRouteLeave前进刷新后退不刷新(缓存)
keep-alive缓存 在vue中默认router-link进入页面组件都是不缓存的.对于数据不会更新的页面.可以使用keep-alive来缓存以提高性能. 在项目src/router/inde ...