踹掉后端，前端导出Excel！
前言
导出Excel文件这个功能，通常都是在后端实现返回前端一个下载链接，但有时候我们只想导出前端页面上已经有了的数据，不想再调后端导出接口浪费服务器资源，学习本文demo例子，我们踹掉后端，直接在前端导出Excel！
代码实现
1、利用Blob对象构造一个a标签的href链接，从而实现文件下载，Excel支持html格式，因此我们只需要将构造好的html内容放到Blob对象中，即可下载Excel表格
2、利用base64编码构造一个a标签的href链接，从而实现文件下载，同上，我们需要将构造好的html内容URI编码拼到base64链接，即可下载Excel表格
//blob、base64转文件下载，通过A标签模拟点击,设置文件名
/*
万能流 application/octet-stream
word文件 application/msword
excel文件 application/vnd.ms-excel
txt文件 text/plain
图片文件 image/png、jpeg、gif、bmp
*/
function downloadByBlob(fileName, text) {
let a = document.createElement("a");
a.href = URL.createObjectURL(new Blob([text], {type: "application/octet-stream"}));
a.download = fileName || 'Blob导出测试.txt';
a.click();
a.remove();
URL.revokeObjectURL(a.href);
}
function downloadByBase64(fileName, text) {
let a = document.createElement('a');
a.href = 'data:application/octet-stream;base64,' + window.btoa(unescape(encodeURIComponent(text)));
a.download = fileName || 'Base64导出测试.txt';
a.click();
a.remove();
URL.revokeObjectURL(a.href);
}
封装导出Excel表格方法
//踹掉后端，前端导出Excel！
function exportExcel(fileName,columns,datas){
//列名
let columnHtml = "";
columnHtml += "<tr style=\"text-align: center;\">\n";
for (let key in columns) {
columnHtml += "<td style=\"background-color:#bad5fd\">"+columns[key]+"</td>\n";
}
columnHtml += "</tr>\n"; //数据
let dataHtml = "";
for (let data of datas) {
dataHtml += "<tr style=\"text-align: center;\">\n";
for (let key in columns) {
dataHtml += "<td>"+data[key]+"</td>\n";
}
dataHtml += "</tr>\n";
} //完整html
let excelHtml = "<html xmlns:o=\"urn:schemas-microsoft-com:office:office\"\n" +
" xmlns:x=\"urn:schemas-microsoft-com:office:excel\"\n" +
" xmlns=\"http://www.w3.org/TR/REC-html40\">\n" +
"<head>\n" +
" <!-- 加这个，其他单元格带边框 -->" +
" <xml>\n" +
" <x:ExcelWorkbook>\n" +
" <x:ExcelWorksheets>\n" +
" <x:ExcelWorksheet>\n" +
" <x:Name></x:Name>\n" +
" <x:WorksheetOptions>\n" +
" <x:DisplayGridlines/>\n" +
" </x:WorksheetOptions>\n" +
" </x:ExcelWorksheet>\n" +
" </x:ExcelWorksheets>\n" +
" </x:ExcelWorkbook>\n" +
" </xml>\n" +
" <style>td{font-family: \"宋体\";}</style>\n" +
"</head>\n" +
"<body>\n" +
"<table border=\"1\">\n" +
" <thead>\n" +
columnHtml +
" </thead>\n" +
" <tbody>\n" +
dataHtml +
" </tbody>\n" +
"</table>\n" +
"</body>\n" +
"</html>"; //下载
downloadByBlob((fileName || "导出Excel")+".xls",excelHtml);
}
效果演示
导出txt文档
downloadByBlob("downloadByBlob-导出txt文档.txt","downloadByBlob\n导出txt简单测试\n");
downloadByBase64("downloadByBase64-导出txt文档.txt","downloadByBase64\n导出txt简单测试\n");
导出Excel表格
exportExcel("xx业务Excel导出", {"id": "编号", "name": "名字", "age": "年龄", "time": "参加工作时间"}, [{
"id": "A001",
"name": "张三",
"age": "18",
"time": new Date().toLocaleString()
},{
"id": "A002",
"name": "李四",
"age": "20",
"time": new Date().toLocaleString()
}]);
导出word文档也是一样
后记
参考上我们之前的《FreeMarker模板引擎》，先画好我们想要的文档格式然后转成xml，调用我们封装好的方法，将构造好的xml内容转成文件，实现前端导出复杂格式文档！
如果有复杂数据，建议还是在后端操作，当然你也可以把数据返回前端在前端导出也行
前端导出Excel主要是利用Bolb、base64，以及Excel支持html格式的特性，这个特性不仅前端可以利用，后端也一样可以，这里也分享一下后端工具类，原理都是一样的
package cn.huanzi.qch.util; import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.OutputStream;
import java.io.PrintWriter;
import java.text.SimpleDateFormat;
import java.util.*; /**
* Excel工具类
*/
public class ExcelUtil { /**
* 导出
* 无需依赖POI
*/
/*
示例：
try {
//列名
LinkedHashMap<String, String> columns = new LinkedHashMap<>(4);
columns.put("id","编号");
columns.put("name","名字");
columns.put("age","年龄");
columns.put("time","参加工作时间"); //数据
List<Map<String, Object>> datas = new ArrayList<>(3);
HashMap<String, Object> hashMap = new HashMap<>();
hashMap.put("id","A001");
hashMap.put("name","张三");
hashMap.put("age",18);
hashMap.put("time",new Date());
datas.add(hashMap); //带换行符：
HashMap<String, Object> hashMap2 = new HashMap<>();
hashMap2.put("id","A002");
hashMap2.put("name","李四 李四1 李四2");
hashMap2.put("age",20);
hashMap2.put("time",new Date());
datas.add(hashMap2); HashMap<String, Object> hashMap3 = new HashMap<>();
hashMap3.put("id","A003");
hashMap3.put("name","王五");
hashMap3.put("age",25);
hashMap3.put("time",new Date());
datas.add(hashMap3); //导出
ExcelUtil.exportByResponse(this.getResponse(),"Excel导出测试",columns,datas);
//ExcelUtil.exportByFile(new File("D:\\XFT User\\Downloads\\Excel导出测试.xls"),columns,datas);
} catch (Exception e) {
e.printStackTrace();
}
*/
public static void exportByResponse(HttpServletResponse response, String fileName, LinkedHashMap<String, String> columns, List<Map<String, Object>> datas) throws Exception {
response.addHeader("Content-disposition", "attachment; filename=" + fileName + ".xls");
response.setContentType("application/ms-excel"); StringBuilder sb = exportOfData(columns, datas); OutputStream out = response.getOutputStream();
out.write(sb.toString().getBytes("UTF-8"));
out.flush();
out.close();
} public static void exportByFile(File file, LinkedHashMap<String, String> columns, List<Map<String, Object>> datas) {
StringBuilder sb = exportOfData(columns, datas); try (PrintWriter myFile = new PrintWriter(file,"UTF-8")) {
myFile.println(sb);
} catch (Exception e) {
System.err.println("exportByFile()，操作出错...");
e.printStackTrace();
}
System.out.println(file.getName() + "，操作完成！");
} //其他单元格无边框
private static StringBuilder exportOfData(LinkedHashMap<String, String> columns, List<Map<String, Object>> datas) {
StringBuilder sb = new StringBuilder("<html xmlns:o=\"urn:schemas-microsoft-com:office:office\"" +
" xmlns:x=\"urn:schemas-microsoft-com:office:excel\"" +
" xmlns=\"http://www.w3.org/TR/REC-html40\">"); //加这个，其他单元格带边框
sb.append("<head>" +
" <xml>" +
" <x:ExcelWorkbook>" +
" <x:ExcelWorksheets>" +
" <x:ExcelWorksheet>" +
" <x:Name></x:Name>" +
" <x:WorksheetOptions>" +
" <x:DisplayGridlines/>" +
" </x:WorksheetOptions>" +
" </x:ExcelWorksheet>" +
" </x:ExcelWorksheets>" +
" </x:ExcelWorkbook>" +
" </xml>" +
" <style>td{font-family: \"宋体\";}</style>" +
"</head>"); sb.append("<body>"); sb.append("<table border=\"1\">"); //列名
sb.append("<tr style=\"text-align: center;\">");
for (Map.Entry<String, String> entry : columns.entrySet()) {
sb.append("<td style=\"background-color:#bad5fd\">" + entry.getValue() + "</td>");
}
sb.append("</tr>"); //数据
for (Map<String, Object> data : datas) {
sb.append("<tr style=\"text-align: center;\">");
for (Map.Entry<String, String> entry : columns.entrySet()) {
Object dataValue = data.get(entry.getKey()); //如果是日期类型
if (dataValue instanceof java.util.Date) {
dataValue = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(dataValue);
}
sb.append("<td>" + dataValue.toString() + "</td>");
}
sb.append("</tr>");
} sb.append("</table>"); sb.append("</body>"); sb.append("</html>"); return sb;
} //前端导出Excel
/*
示例：
exportExcel("xx业务Excel导出", {"id": "编号", "name": "名字", "age": "年龄", "time": "参加工作时间"}, [{
"id": "A001",
"name": "张三",
"age": "18",
"time": new Date().toLocaleString()
},{
"id": "A002",
"name": "李四",
"age": "20",
"time": new Date().toLocaleString()
}]);
*/
/*
//blob、base64转文件下载，通过A标签模拟点击,设置文件名
//万能流 application/octet-stream
//word文件 application/msword
//excel文件 application/vnd.ms-excel
//txt文件 text/plain
//图片文件 image/png、jpeg、gif、bmp
function downloadByBlob(fileName, text) {
let a = document.createElement("a");
a.href = URL.createObjectURL(new Blob([text], {type: "application/octet-stream"}));
a.download = fileName || 'Blob导出测试.txt';
a.click();
a.remove();
URL.revokeObjectURL(a.href);
}
function downloadByBase64(fileName, text) {
let a = document.createElement('a');
a.href = 'data:application/octet-stream;base64,' + window.btoa(unescape(encodeURIComponent(text)));
a.download = fileName || 'Base64导出测试.txt';
a.click();
a.remove();
URL.revokeObjectURL(a.href);
} //踹掉后端，前端导出Excel！
function exportExcel(fileName,columns,datas){
//列名
let columnHtml = "";
columnHtml += "<tr style=\"text-align: center;\">\n";
for (let key in columns) {
columnHtml += "<td style=\"background-color:#bad5fd\">"+columns[key]+"</td>\n";
}
columnHtml += "</tr>\n"; //数据
let dataHtml = "";
for (let data of datas) {
dataHtml += "<tr style=\"text-align: center;\">\n";
for (let key in columns) {
dataHtml += "<td>"+data[key]+"</td>\n";
}
dataHtml += "</tr>\n";
} //完整html
let excelHtml = "<html xmlns:o=\"urn:schemas-microsoft-com:office:office\"\n" +
" xmlns:x=\"urn:schemas-microsoft-com:office:excel\"\n" +
" xmlns=\"http://www.w3.org/TR/REC-html40\">\n" +
"<head>\n" +
" <!-- 加这个，其他单元格带边框 -->" +
" <xml>\n" +
" <x:ExcelWorkbook>\n" +
" <x:ExcelWorksheets>\n" +
" <x:ExcelWorksheet>\n" +
" <x:Name></x:Name>\n" +
" <x:WorksheetOptions>\n" +
" <x:DisplayGridlines/>\n" +
" </x:WorksheetOptions>\n" +
" </x:ExcelWorksheet>\n" +
" </x:ExcelWorksheets>\n" +
" </x:ExcelWorkbook>\n" +
" </xml>\n" +
" <style>td{font-family: \"宋体\";}</style>\n" +
"</head>\n" +
"<body>\n" +
"<table border=\"1\">\n" +
" <thead>\n" +
columnHtml +
" </thead>\n" +
" <tbody>\n" +
dataHtml +
" </tbody>\n" +
"</table>\n" +
"</body>\n" +
"</html>"; //下载
downloadByBlob((fileName || "导出Excel")+".xls",excelHtml);
}
*/
}
踹掉后端，前端导出Excel！的更多相关文章
- 前端导出excel表
前端导出excel表 方式一: 前端js实现 : https://www.cnblogs.com/zhangym118/p/6235801.html 方式二: java后端实现: https://bl ...
- 前端导出Excel兼容写法
今天整理出在Web前端导出Excel的写法,写了一个工具类,对各个浏览器进行了兼容. 首先,导出的数据来源可能有两种: 1. 页面的HTML内容(一般是table) 2. 纯数据 PS:不同的数据源, ...
- 前端导出Excel
1.首先,需要下载一个叫better-xlsx,的插件,以yarn 为例 ' yarn add better-xlsx --save '下载相关依赖包( npm 方式 ' npm i better-x ...
- js前端导出excel
此例子是利用html特性,纯前端导出excel,样式不好看,兼容主流浏览器. var tableid = jQuery(this).closest("div.tab-label-wrap&q ...
- vue 纯前端导出 excel 表格
在开发后台管理系统的时候,很多地方都要用到导出excel 表格,比如将table中的数据导出到本地,那么实现这种需求往往有两种方案: 一.后端开发一个下载链接,前端将这个链接放到 a 标签的 href ...
- 前端导出excel数据-jsonToExcel
咳咳,好久没有写博了... 在工作中遇到了纯前端,将数据导出为excel文件.正文开始: 第一步 安装依赖: npm i xlsx 第二步 写导出函数: import XLSX from 'xlsx' ...
- js前端导出Excel表格后数字自动变成科学计数法问题
一般的文件导出都是后端进行导出,最近一个项目遇到导出接口挂掉了,前端实现导出的情况. 背景是vue框架,iView组件.可以直接使用exportCsv方法进行导出. 导出时进行一下行和列的切割就可以了 ...
- js前端导出excel：json形式的导出
第一中形式的导出:主要是表头对应主体数据,json形式的导出 js库文件名称 : table2excel.js这个js库文件是网上找的,并且自己根据自己业务需求把内容改了一下复制到 table2exc ...
- vue项目，前端导出excel
今天研究一下前端如何导出excel,边查边实践,边记录 1.安装依赖库 xlsx:这是一个功能强大的excel处理库,但是上手难度也很大,还涉及不少二进制的东西 file-saver:ES5新增了相关 ...
随机推荐
- Nginx--sub_filter模块
客户端浏览器访问替换html中的字符: location / { root /web/htdocs; random_index on; index index.html index.htm; subs ...
- 洛谷 P1020 [NOIP1999 普及组] 导弹拦截
Coidng #include <iostream> #include <algorithm> #include <cstring> #include <ve ...
- github新手使用指南
常用命令: Git 速查表(摘自 AI有道) 一.常见命令 git init : 初始化 git 仓库,即将一个文件夹初始化为一个 git 仓库.具体的操作是创建一个 .git 隐藏文件夹 git ...
- Intellij IDEA实现SpringBoot项目多端口启动的两种方法
有时候使用springboot项目时遇到这样一种情况,用一个项目需要复制很多遍进行测试,除了端口号不同以外,没有任何不同.遇到这种情况怎么办呢?这时候可以使用Intellij IDEA解决 前言 有时 ...
- memcached 如何实现冗余机制？
不实现!我们对这个问题感到很惊讶.Memcached 应该是应用的缓存层.它的设 计本身就不带有任何冗余机制.如果一个 memcached 节点失去了所有数据,您 应该可以从数据源(比如数据库)再次获 ...
- (转载) MOS管区分NP沟道
三极管是流控型器件,MOS管是压控型器件,两者存在相似之处.三极管机可能经常用,但MOS管你用的可能较少.对于MOS管先抛出几个问题: 如何区分P-MOS和N-MOS: 如何区分MOS的G.D.S ...
- 解释AOP模块？
AOP模块用于发给我们的Spring应用做面向切面的开发, 很多支持由AOP联盟提供,这样就确保了Spring和其他AOP框架的共通性.这个模块将元数据编程引入Spring.
- 汽车中的低速can和高速can的区别
转自:https://zhuanlan.zhihu.com/p/33212308
- 一整套PCB设计流程和要点，老板再也不怕我出错！
资料输入阶段 1. 在流程上接收到的资料是否齐全(包括:原理图.*.brd文件.料单.PCB设计说明以及PCB设计或更改要求.标准化要求说明.工艺设计说明文件) 2. 确认PCB模板是最新的 3. 确 ...
- 前端性能优化（Application Cache篇）
正巧看到在送书,于是乎找了找自己博客上记录过的一些东西来及其无耻的蹭书了~~~ 小广告:更多内容可以看我的博客 之前在segmentfault上刷问题看到一个关于manifest的问题,很好奇就研究了 ...