前言
最近在做项目的时候遇到一个需求，要求前端导出excel，经过多次尝试终于是把这个功能做出来了。
对于后端
后端导出的话可以分为两种方式：
- 服务器端生成：根据用户请求到数据库查询出相应数据，调用POI&JXL，jacob/jawin+excel，随后将生成的文件以.xls的格式返回并指定请求头为application/vnd.ms-excel，这样浏览器就会提示要下载的文件是excel文件
缺点：需要读取数据库，如果数据量过大或并发操作，会增加服务器压力 - 服务器端中转（推荐）：将html的table或是拼接的csv传到服务器端，随后将生成的文件以.xls的格式返回并指定请求头为application/vnd.ms-excel，这样浏览器就会提示要下载的文件是excel文件。与服务器端生成相比，跨平台，性能更优越（比poi/jxl方式少了取数和生成二进制文件）
对于前端
前端导出根据浏览器不同相应的处理方式也会不同：
- activex方式：如果使用ie浏览器，可以新建一个ActiveXObject对象，传入Excel.Application即可进行配置
var curTbl = document.getElementById(tableid);
var oXL = new ActiveXObject("Excel.Application");
var oWB = oXL.Workbooks.Add(); //创建AX对象excel
var oSheet = oWB.ActiveSheet; //获取workbook对象
var sel = document.body.createTextRange(); //激活当前sheet
sel.moveToElementText(curTbl); //把表格中的内容移到TextRange中
sel.select(); //全选TextRange中内容
sel.execCommand("Copy"); //复制TextRange中内容
oSheet.Paste(); //粘贴到活动的EXCEL中
oXL.Visible = true; //设置excel可见属性
缺点：只能在ie浏览器才可以进行使用该方法，并且存在安全性问题，需要设置ActiveXObject的安全认证
- data协议方式（推荐）：对于支持data协议的浏览器，可以将html或是csv先用js base64处理，然后设置前缀data:application/vnd.ms-excel;base64,，即可使浏览器将其中的数据当做excel来处理，浏览器将提示下载或打开excel文件
const uri = 'data:application/vnd.ms-excel;base64,'
const template = '<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"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>'
function base64(s) {
return window.btoa(unescape(encodeURIComponent(s)))
}
function format(s, c) {
return s.replace(/{(\w+)}/g,
function (m, p) {
return c[p];
})
}
export default function (target, name) {
const table = document.querySelector(target)
let ctx = {
worksheet: 'Sheet1',
table
}
window.location.href = uri + base64(format(template, ctx))
}
ps
本方法已经上传到npm，可以到npm上搜索并下载export-table-excel
网友评论