前端自己导出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' ...
随机推荐
- MVC4笔记 RedirectResult,RedirectToRoute
RedirectResult:运行重新导向到其他网址,在RedirectResult的内部,基本上还是以Response.Redirect方法响应HTTP 302暂时导向. eg: public Ac ...
- IE6/IE7/IE8 JQuery下resize事件执行多次的解决方法
在使用jQuery的resize事件时发现每次改变浏览器的窗口大小时resize时间会执行两次,百度搜索了一下找到一个解决的方法,使用setTimeout来解决这个问题代码如下: var resize ...
- 07点睛Spring4.1-BeanPostProcessor
7.1 BeanPostProcessor spring通过BeanPostProcessor接口可以对所有bean或者指定的某些bean的初始化前后对bean的检查或者修改提供支持; 使用postP ...
- 【神经网络与深度学习】【计算机视觉】RCNN- 将CNN引入目标检测的开山之作
转自:https://zhuanlan.zhihu.com/p/23006190?refer=xiaoleimlnote 前面一直在写传统机器学习.从本篇开始写一写 深度学习的内容. 可能需要一定的神 ...
- 找出整数数组中出现次数超过数组长度一半的元素（Java）
Question:数组中有一个数字出现的次数超过数组长度的一半,请找出这个数字 package com.study.zhipengs.test; import java.util.Arrays; im ...
- C++大数运算模板
#include<iostream> #include<cstring> #include<cstdio> #include<iomanip> #inc ...
- 02 HTML
1. HTML概念: HTML是最基础的网页开发语言 * Hyper Text Markup Language 超文本标记语言 * 超文本: * 超文本是用超链接的方法,将各种不同空间的文字信息组织在 ...
- Java中XML的四种解析方式（二）
三.JDOM解析 特征: 1.仅使用具体类,而不使用接口. 2.API大量使用了Collections类. import org.jdom2.Attribute; import org.jdom2.D ...
- JPA逆向工程
1.1 说明 所谓的逆向工程就是通过数据库的结构生成代码. 目的:提高开发的效率 1.2 步骤 1.2.1 第一步:创建JPA项目 (1)创建项目 (2)指定项目名.JPA版本 (3)完成创建 1.2 ...
- Gitlab服务不能启动postgresql
源博文:http://www.zxmseed.com/blog/911081 1.查看启动的服务 -sh-4.1$ gitlab-ctl status warning: gitlab-workhors ...