但我要説明一點:
這個代碼功能能夠實現,但是table裏如果有20多位的數字,那會顯示成1.111E+41,這樣的結果非常不好,但我又沒有辦法解決,如果有人能解決,請告訴我一聲,謝謝了!
ps.又發現一個問題,下面的代碼不知道為什麼容易亂碼
1.js代碼
//grid導出exl
function outputAddress(grid, strMethod) {
try {
var xls = new ActiveXObject("Excel.Application");
}
catch (e) {
alert("要打印該表,您必須安裝Excel電子表格軟件,同時瀏覽器須使用“ActiveX 控件”,您的瀏覽器須允許執行控件。
return;
}
xls.visible = true; //設置excel為可見
var xlBook = xls.Workbooks.Add;
var xlSheet = xlBook.Worksheets(1);
var cm = grid.getColumnModel();
var colCount = cm.getColumnCount();
var temp_obj = [];
//只下載沒有隱藏的列(isHidden()為true表示隱藏,其他都為顯示)
//臨時數組,存放所有當前顯示列的下標
for (i = 0; i < colCount; i++) {
if (cm.isHidden(i) != true || (strMethod != null && (strMethod.indexOf("#" + cm.getColumnById(i).dataIndex.toString() + "#") > -1))) {
temp_obj.push(i);
}
}
for (i = 1; i <= temp_obj.length; i++) {
//顯示列的列標題
xlSheet.Cells(1, i).Value = (cm.getColumnHeader(temp_obj[i - 1])).toString().replace('<center>', "").replace('</center>', "").replace('<middle>', "").replace('</middle>', "").replace('<br>', "");
if (cm.getColumnHeader(temp_obj[i - 1]).indexOf('<center>') > -1) {
xlSheet.Cells(1, i).HorizontalAlignment = -4108;
}
}
var store = grid.getStore();
var recordCount = store.getCount();
var view = grid.getView();
for (i = 1; i <= recordCount; i++) {
for (j = 1; j <= temp_obj.length; j++) {
//EXCEL數據從第二行開始,故row = i + 1;
xlSheet.Cells(i + 1, j).Value = view.getCell(i - 1, temp_obj[j - 1]).innerText;
}
}
xlSheet.Columns.AutoFit;
xls.ActiveWindow.Zoom = 100
xls.UserControl = true; //很重要,不能省略,不然會出問題 意思是excel交由用户控制
xls = null;
xlBook = null;
xlSheet = null;
}
function replaceHtml(replacedStr, repStr, endStr) {
var replacedStrF = "";
var replacedStrB = "";
var repStrIndex = replacedStr.indexOf(repStr);
while (repStrIndex != -1) {
replacedStrF = replacedStr.substring(0, repStrIndex);
replacedStrB = replacedStr.substring(repStrIndex, replacedStr.length);
replacedStrB = replacedStrB.substring(replacedStrB.indexOf(endStr) + 1, replacedStrB.length);
replacedStr = replacedStrF + replacedStrB;
repStrIndex = replacedStr.indexOf(repStr);
}
return replacedStr;
}
function replaceHtml1(replacedStr, repStr, endStr) {
var replacedStrF = "";
var replacedStrB = "";
var repStrIndex = replacedStr.indexOf(repStr);
while (repStrIndex != -1) {
replacedStrF = replacedStr.substring(0, repStrIndex);
replacedStrB = replacedStr.substring(repStrIndex, replacedStr.length);
replacedStrB = replacedStrB.substring(replacedStrB.indexOf(endStr) + 1, replacedStrB.length);
replacedStr = replacedStrF + replacedStrB;
repStrIndex = replacedStr.indexOf(repStr);
}
return replacedStr;
}
//elTalbeOut 這個為導出內容的外層表格,主要是設置border之類的樣式,elDiv則是整個導出的html部分
function htmlToExcel(GridPanel_ID, ColumnWidth, Border) {
try {
if (navigator.userAgent.indexOf("MSIE") > 0) {
ToExcel_IE(GridPanel_ID, ColumnWidth, Border);
}
else {
ToExcel_FF(GridPanel_ID, Border);
}
ColumnWidth = null;
} catch (e) {
alert(e.description)
}
}
function ToExcel_IE(GridPanel_ID, ColumnWidth, Border) {
//獲取需要導出的內容
var elDiv = document.getElementById(GridPanel_ID);
//設置導出前的數據,為導出後返回格式而設置
var elDivStrBak = elDiv.innerHTML;
//過濾elDiv內容
var elDivStr = elDiv.innerHTML;
elDivStr = replaceHtml(elDivStr, "<A", ">");
elDivStr = replaceHtml(elDivStr, "</A", ">");
elDivStr = replaceHtml(elDivStr, "<IMG", ">");
//設置table的border=1,這樣到excel中就有表格線 ps:感謝雙面提醒
if (Border != null) {
elDivStr = elDivStr.replace(/<TABLE/g, "<TABLE border=" + Border);
}
elDiv.innerHTML = elDivStr;
elDivStr = "";
var oRangeRef = document.body.createTextRange();
oRangeRef.moveToElementText(elDiv);
oRangeRef.execCommand("Copy");
//返回格式變換以前的內容
elDiv.innerHTML = elDivStrBak;
//內容數據可能很大,所以賦空
elDivStrBak = "";
elDiv = null;
var oXL = new ActiveXObject("Excel.Application")
var oWB = oXL.Workbooks.Add;
var oSheet = oWB.ActiveSheet;
oSheet.Paste();
//oSheet.Cells.NumberFormatLocal = "@";
oSheet.Columns("D:D").Select
oSheet.Columns.AutoFit;
ColumnWidth = (ColumnWidth == null ? '' : ColumnWidth);
for (i = 0; i < ColumnWidth.length; i++) {
oSheet.Columns(parseInt(ColumnWidth[i].split(",")[0])).ColumnWidth = parseInt(ColumnWidth[i].split(",")[1]);
}
//oXL.Selection.ColumnWidth = 20
oXL.ActiveWindow.Zoom = 100
oXL.Visible = true;
oXL.UserControl = true; //很重要,不能省略,不然會出問題 意思是excel交由用户控制
oSheet = null;
oWB = null;
appExcel = null;
oXL = null;
}
var ToExcel_FF = (function() {
var uri = 'data:application/vnd.ms-excel;base64,',
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>',
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(GridPanel_ID, Border) {
var elDiv = document.getElementById(GridPanel_ID);
//過濾elDiv內容
var elDivStr = elDiv.innerHTML;
elDivStr = replaceHtml(elDivStr, "<a", ">");
elDivStr = replaceHtml(elDivStr, "</a", ">");
elDivStr = replaceHtml(elDivStr, "<img", ">");
//設置table的border=1,這樣到excel中就有表格線 ps:感謝雙面提醒
if (Border != null) {
elDivStr = elDivStr.replace(/<table/g, "<table border=" + Border);
}
var ctx = { worksheet: '' || 'Worksheet', table: elDivStr }
window.location.href = uri + base64(format(template, ctx));
//返回格式變換以前的內容
elDivStr = "";
elDiv = null;
}
})()
View Code
2.調用方法
var arrStr = new Array() //可以通過數組的形式設置列寬,如果不設置傳null可以
arrStr.push("1,120");
arrStr.push("2,120");
arrStr.push("4,120");
htmlToExcel("gridArray", arrStr, 1);//這裏的1代表的是border=1的意思。
以上方法在IE中導出的Excel測試通過,但是在Firefox中導出的文件可能需要手動的修改文件後綴名(如8trX_ZaE.xls.part)
本文章為轉載內容,我們尊重原作者對文章享有的著作權。如有內容錯誤或侵權問題,歡迎原作者聯繫我們進行內容更正或刪除文章。