前端自己导出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' ...
随机推荐
- PAT 甲级 1147 Heaps (30 分) (层序遍历，如何建树，后序输出，还有更简单的方法~)
1147 Heaps (30 分) In computer science, a heap is a specialized tree-based data structure that sati ...
- mssqlserver修改表名，列名，添加表列，删除表列，修改表列类型
mssqlserver修改表名,列名,添加表列,删除表列,修改表列类型 ,代码肯定省事的呀 --添加表列 alter table test ) null; --删除表列 alter table tes ...
- Xmanager教程
简介 Xmanager是市场上领先的PC X服务器,可将X应用程序的强大功能带入Windows环境. 提供了强大的会话管理控制台,易于使用的X应用程序启动器,X服务器配置文件管理工具,SSH模块和高性 ...
- hdoj1247（字典树）
题目链接:https://vjudge.net/problem/HDU-1247 题意:给定n个字符串(n<=50000),判断其中哪些字符串恰能由另外两个不同的字符串连接而成. 思路: 暴力字 ...
- webpack package code into different bundle
Demo4操作手册 本Demo演示如何进行分块打包等较高级的使用 准备环境 初始化环境, cd到demo1目录之后, 执行如下命令: npm init -y npm install webpack w ...
- 023 Android 自定义Toast控件
1.Toast自定义控件工具类 package com.example.administrator.test62360safeguard.Utils; import android.content.C ...
- git实现码云的上传和下载
上传步骤: 1.码云上新建一个项目 XXXX? ?(项目名) 2.本地创建一个文件夹E:/XXXX,然后使用git bash? ?? 3.cd 到本地文件夹中E:/XXXX? //如果是在创建的文件中 ...
- TypeScript TSLint(TypeScript代码检查工具)
TSLint是TypeScript代码的样式风格检查工具.类似于JavaScript的ESLint,或者Ruby的Rubocop. 配置TSLint TSLint是一个外部工具,我们需要进行一次安装工 ...
- win10安装Ubuntu,用Xshell连接
一.安装Ubuntu 安装Ubuntu,安装过程就不详细说了,我是从微软商店下载的Ubuntu安装,没有用VMware,想用Xshell连接Ubuntu,中间一直出问题,现在解决,总结一下. 二.配置 ...
- 长乐培训Day8
T1 远征 题目 [题目描述] 寒枫将军将要带领他的部队去圣雪山消灭那里的冰龙.部队分成了若干个小队,属于同一个小队的人兵种相同. 寒枫将军有着杰出的指挥能力,在战斗的时候,寒枫将军能够让所有相同兵种 ...