前言
导出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 += "n";
for (let key in columns) {
columnHtml += ""+columns[key]+"n";
}
columnHtml += "n";
//数据
let dataHtml = "";
for (let data of datas) {
dataHtml += "n";
for (let key in columns) {
dataHtml += ""+data[key]+"n";
}
dataHtml += "n";
}
//完整html
let excelHtml = "n" +
"n" +
" " +
" n" +
"n" +
"";
//下载
downloadByBlob((fileName || "导出Excel")+".xls",excelHtml);
}
效果演示
导出txt文档
downloadByBlob("downloadByBlob-导出txt文档.txt","downloadByBlobn导出txt简单测试n");
downloadByBase64("downloadByBase64-导出txt文档.txt","downloadByBase64n导出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
");
sb.append("");
sb.append("");
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 += "n";
for (let key in columns) {
columnHtml += ""+columns[key]+"n";
}
columnHtml += "n";
//数据
let dataHtml = "";
for (let data of datas) {
dataHtml += "n";
for (let key in columns) {
dataHtml += ""+data[key]+"n";
}
dataHtml += "n";
}
//完整html
let excelHtml = "n" +
"n" +
" " +
" " + entry.getValue() + " " + dataValue.toString() + " n" +
"n" +
"";
//下载
downloadByBlob((fileName || "导出Excel")+".xls",excelHtml);
}
*/
}
版权声明
作者：huanzi-qch
出处：https://www.cnblogs.com/huanzi-qch
若标题中有“转载”字样，则本文版权归原作者所有。若无转载字样，本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接，否则保留追究法律责任的权利.
