1、背景
首先呢,這次是我最近在寫個需求,前面我有提到過導出excel用java代碼導出,但是這樣寫代碼比較繁瑣,而且如果帶有很複雜的格式要求,看着就腦仁疼。所以我就想到了在前端直接導出來。下面開始
2、步驟
首先我呢做了很多百度細節,有非常多的,我大概總結了一些在前端導出我遇到的問題。首先你會遇到兼容性的問題。然後就是安全性問題,還有文檔打開的時候會有明顯提升文件缺失或者損壞。還有就是如果你樣式寫非常複雜也會導出有一定差異。最後就是如果這些你都不在乎,下面我的代碼你可能會用到,我百度了很多代碼這是相對比較好的。
第一份,這份比較不錯我就是在項目中用的這份代碼:
//判斷是否IE瀏覽器
function isIE() {
if (!!window.ActiveXObject || "ActiveXObject" in window) {
return true;
} else {
return false;
}
}
function method() {
var lHtml = document.getElementById("myDiv").innerHTML;
var tableHtml='<html><head><meta charset="UTF-8"></head><body>';
tableHtml += lHtml;
tableHtml += '</body></html>';
var excelBlob = new Blob([tableHtml], {type: 'application/vnd.ms-excel'});
var fileName = "EXCEL.xls";
if(isIE()){
window.navigator.msSaveOrOpenBlob(excelBlob,fileName);
}else{
var oa = document.createElement('a');
oa.href = URL.createObjectURL(excelBlob);
oa.download = fileName;
document.body.appendChild(oa);
oa.click();
}
使用的時候 var lHtml = document.getElementById("myDiv").innerHTML;
修改一下這裏的ID,直接調用table表格包起來的DIV。注意一點,這裏table標籤需要一個div包起來。
下面是第二份。
//第五種方法
var idTmr;
function getExplorer() {
var explorer = window.navigator.userAgent ;
//ie
if (explorer.indexOf("MSIE") >= 0) {
return 'ie';
}
//firefox
else if (explorer.indexOf("Firefox") >= 0) {
return 'Firefox';
}
//Chrome
else if(explorer.indexOf("Chrome") >= 0){
return 'Chrome';
}
//Opera
else if(explorer.indexOf("Opera") >= 0){
return 'Opera';
}
//Safari
else if(explorer.indexOf("Safari") >= 0){
return 'Safari';
}
}
function method5(tableid) {
if(getExplorer()=='ie')
{
var curTbl = document.getElementById(tableid);
var oXL = new ActiveXObject("Excel.Application");
var oWB = oXL.Workbooks.Add();
var xlsheet = oWB.Worksheets(1);
var sel = document.body.createTextRange();
sel.moveToElementText(curTbl);
sel.select();
sel.execCommand("Copy");
xlsheet.Paste();
oXL.Visible = true;
try {
var fname = oXL.Application.GetSaveAsFilename("Excel.xls", "Excel Spreadsheets (*.xls), *.xls");
} catch (e) {
print("Nested catch caught " + e);
} finally {
oWB.SaveAs(fname);
oWB.Close(savechanges = false);
oXL.Quit();
oXL = null;
idTmr = window.setInterval("Cleanup();", 1);
}
}
else
{
tableToExcel(tableid)
}
}
function Cleanup() {
window.clearInterval(idTmr);
CollectGarbage();
}
var tableToExcel = (function() {
var uri = 'data:application/vnd.ms-excel;base64,',
template = '<html><head><meta charset="UTF-8"></head><body><table>{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]; }) }
return function(table, name) {
if (!table.nodeType) table = document.getElementById(table)
var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML}
window.location.href = uri + base64(format(template, ctx))
}
})()
使用的時候調用method5(tableid) 就行了
tableid 就是table表格的ID
下面我需要告訴大家的是這裏table表格如果沒有加 border標籤是 不會顯示線條的
所以我一般會選擇加上線條粗細爲1 縫隙爲0的標籤
<table border="1" cellspacing="0">
3、總結
其實很近沒更新文章了,主要是技術點get不深不能胡編亂造,然後就是最近確實工作比較 多。這次也是遇到了個需求,正好我以前又使用過前端直接導出,就想到了這個簡便的方案,但是缺點的很明顯,前面也說了。文件會缺損。應爲excel軟件可以識別頁面標籤,但是比較他不是瀏覽器,識別起來有限。打開肯定會遇到兼容性問題。xlsx後綴你導出來就肯定打不開。然後就是瀏覽器兼容性問題。所以使用java代碼poi導出確實是比較安全和比較合理的方式,但是工作量會很大。看選擇唄。