前端自己导出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' ...
随机推荐
- NDK开发和NDK双进程守护
https://www.jianshu.com/p/433b2c93c6a7 NDK进程守护 https://blog.csdn.net/k393393/article/details/7895435 ...
- didMoveToSuperview方法认识和使用
由来: 今天给项目添加新功能——点击弹出阳历,阴历日期选择. 弹出日期选择是弹出的控制器,里面的日期选择控件是封装的View,View使用Xib画的, 遇到的问题是:控制器传数据给View,在awak ...
- 【warning】set the environment variable MXNET_CUDNN_AUTOTUNE_DEFAULT to 0 to disable
前言 运行mxnet程序的时候出现这个warning信息,但是不影响整个程序的运行,不过宝宝喜欢将warning信息尽量也clear,强迫症嘛?!哈哈哈哈 问题描述 [::] src/operator ...
- 【ARTS】01_45_左耳听风-201900916~201900922
ARTS: Algrothm: leetcode算法题目 Review: 阅读并且点评一篇英文技术文章 Tip/Techni: 学习一个技术技巧 Share: 分享一篇有观点和思考的技术文章 Algo ...
- C# 代码自动生成工具
开源:C# 代码自动生成工具,支持站点前后台 前言 写这个项目有很长一段时间了,期间也修修改改,写到最后,自己也没咋用(研究方向变化了). 正文 具体项目开源了:https://github.co ...
- simple config of webpack
Demo1操作手册 本Demo演示进行简单配置的基本使用 准备环境 初始化环境, cd到demo目录之后, 执行如下命令: npm init -y npm install webpack webpac ...
- 034 Android NavigationView和DrawerLayout实现抽屉式导航设计(侧边栏效果)
1.创建带侧滑效果的activity 右击,new---->activity---->选择NavgationDrawer Activity 2.xml文件布局 (1)activity_ma ...
- java中selenium判断某个元素是否存在
selenium工具 直接通过findElement方法获取某个元素,如果该元素不存在肯定会报错,selenium又没有可以判断该元素是否存在的方法 于是我们可以手写一个工具类,来判断这个元素是否存在 ...
- visual studio code编辑python文件
visual studio code 安装.通过360软件管家,查找visual studio code 下载安装即可 设置visual studio code为中文 打开进入软件,Ctrl + Sh ...
- PAT(B) 1081 检查密码（Java）
题目链接:1081 检查密码 (15 point(s)) 题目描述 本题要求你帮助某网站的用户注册模块写一个密码合法性检查的小功能.该网站要求用户设置的密码必须由不少于6个字符组成,并且只能有英文字母 ...