如何将excel 转换为html
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何将excel 转换为html相关的知识,希望对你有一定的参考价值。
另存为:
参考技术A 1、点击菜单栏-文件-另存为网页2、输入导出文件名称,点击保存。
3、双击打开html文件,即会调出IE浏览器打开页面。 参考技术B
直接另存为就可以了
参考技术C 选择文件 > 另存为 > 在文件类型中选择网页文件(*.htm; *.html) > 再输入保存的网页文件名称既可。如何将html表格转换为具有多个工作表的excel?
【中文标题】如何将html表格转换为具有多个工作表的excel?【英文标题】:How to convert html table to excel with multiple sheet? 【发布时间】:2015-06-24 06:44:27 【问题描述】:如何将多个 html 表格转换为具有多个工作表的 excel 工作表?你能帮忙解决这个问题吗?
我的例子https://jsfiddle.net/kdkd/5p22gdag/
function tablesToExcel()
var tab_text = "<table border='2px'><tr bgcolor='#87AFC6'>";
var textRange; var j = 0;
tab = document.getElementById('tbl2'); // id of table
for (j = 0 ; j < tab.rows.length ; j++)
tab_text = tab_text + tab.rows[j].innerHTML + "</tr>";
//tab_text=tab_text+"</tr>";
tab_text = tab_text + "</table>";
var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) // If Internet Explorer
txtArea1.document.open("txt/html", "replace");
txtArea1.document.write(tab_text);
txtArea1.document.close();
txtArea1.focus();
sa = txtArea1.document.execCommand("SaveAs", true, "Say Thanks to Sumit.xls");
else //other browser not tested on IE 11
sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));
return (sa);
【问题讨论】:
您是否检查过这些问题:***.com/questions/24636956/… 和 ***.com/questions/18234448/…?他们似乎对此有解决方案 谢谢。我已经检查了上面给出的链接。一个小问题是所有 HTML 表格都插入到一个工作表中。 (成功创建了多个工作表)但是, 这是您想要的示例..jsfiddle.net/qxLn3h86 我已经尝试过了,但我的表格有内联 CSS,所以它不起作用。请检查这个小提琴jsfiddle.net/kdkd/qxLn3h86/49 等待解决..请帮助 【参考方案1】:我刚刚发布此内容是为了提供一个使用 css 导出多个工作表的更多选项。 Working Fiddle
我打了更多天,找到了这种方法。希望这对其他人有帮助。
$('button').click(function()
tablesToExcel(['tbl1','tbl2'], ['ProductDay1','ProductDay2'], 'TestBook.xls', 'Excel')
);
var tablesToExcel = (function()
var uri = 'data:application/vnd.ms-excel;base64,'
, tmplWorkbookXML = '<?xml version="1.0" encoding="windows-1252"?><?mso-application progid="Excel.Sheet"?>'
+ ' <Workbook xmlns="urn:schemas-microsoft-com:office:spreadsheet" xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns:html="http://www.w3.org/TR/REC-html40">'
+ ' <DocumentProperties xmlns="urn:schemas-microsoft-com:office:office">'
+ ' <Author>Qompare</Author>'
+ ' <Created>created</Created>'
+ ' </DocumentProperties>'
+ ' <Styles>'
+ ' <Style ss:ID="Default" ss:Name="Normal">'
+ ' <NumberFormat ss:Format=""/>'
+ ' </Style>'
+ ' <Style ss:ID="Header">'
+ ' <Alignment ss:Vertical="Bottom"/>'
+ ' <Borders>'
+ ' <Border ss:Color="#000000" ss:Weight="2" ss:LineStyle="Continuous" ss:Position="Right"/>'
+ ' <Border ss:Color="#000000" ss:Weight="2" ss:LineStyle="Continuous" ss:Position="Left"/>'
+ ' <Border ss:Color="#000000" ss:Weight="2" ss:LineStyle="Continuous" ss:Position="Top"/>'
+ ' <Border ss:Color="#000000" ss:Weight="2" ss:LineStyle="Continuous" ss:Position="Bottom"/>'
+ ' </Borders>'
+ ' <Font ss:FontName="Calibri" ss:Size="12" ss:Color="#000000"/>'
+ ' <Interior ss:Color="#cccccc" ss:Pattern="Solid" />'
+ ' <NumberFormat/>'
+ ' <Protection/>'
+ ' </Style>'
+ ' <Style ss:ID="Changed">'
+ ' <Borders/>'
+ ' <Font ss:Color="#ff0000"></Font>'
+ ' <Interior ss:Color="#99CC00" ss:Pattern="Solid"></Interior>'
+ ' <NumberFormat/>'
+ ' <Protection/>'
+ ' </Style>'
+ ' <Style ss:ID="Missed">'
+ ' <Borders/>'
+ ' <Font ss:Color="#ff0000"></Font>'
+ ' <Interior ss:Color="#ff0000" ss:Pattern="Solid"></Interior>'
+ ' <NumberFormat/>'
+ ' <Protection/>'
+ ' </Style>'
+ ' <Style ss:ID="Decimals">'
+ ' <NumberFormat ss:Format="Fixed"/>'
+ ' </Style>'
+ ' </Styles>'
+ ' worksheets'
+ '</Workbook>'
, tmplWorksheetXML = '<Worksheet ss:Name="nameWS">'
+ ' <ss:Table>'
+ ' rows'
+ ' </ss:Table>'
+ '</Worksheet>'
, tmplCellXML = ' <ss:CellattributeStyleIDattributeFormula>'
+ ' <ss:Data ss:Type="nameType">data</ss:Data>'
+ ' </ss:Cell>'
, 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(tables, wsnames, wbname, appname)
var ctx = "";
var workbookXML = "";
var worksheetsXML = "";
var rowsXML = "";
for (var i = 0; i < tables.length; i++)
if (!tables[i].nodeType) tables[i] = document.getElementById(tables[i]);
for (var j = 0; j < tables[i].rows.length; j++)
rowsXML += ' <ss:Row>'
for (var k = 0; k < tables[i].rows[j].cells.length; k++)
var dataType = tables[i].rows[j].cells[k].getAttribute("data-type");
var dataStyle = tables[i].rows[j].cells[k].getAttribute("data-style");
var dataValue = tables[i].rows[j].cells[k].getAttribute("data-value");
dataValue = (dataValue)?dataValue:tables[i].rows[j].cells[k].innerHTML;
if(!isNaN(dataValue))
dataType = 'Number';
dataValue = parseFloat(dataValue);
var dataFormula = tables[i].rows[j].cells[k].getAttribute("data-formula");
dataFormula = (dataFormula)?dataFormula:(appname=='Calc' && dataType=='DateTime')?dataValue:null;
ctx = attributeStyleID: (dataStyle=='Changed' || dataStyle=='Missed'|| dataStyle=='Header')?' ss:StyleID="'+dataStyle+'"':''
, nameType: (dataType=='Number' || dataType=='DateTime' || dataType=='Boolean' || dataType=='Error')?dataType:'String'
, data: (dataFormula)?'':dataValue
, attributeFormula: (dataFormula)?' ss:Formula="'+dataFormula+'"':''
;
rowsXML += format(tmplCellXML, ctx);
rowsXML += ' </ss:Row>'
ctx = rows: rowsXML, nameWS: wsnames[i] || 'Sheet' + i;
worksheetsXML += format(tmplWorksheetXML, ctx);
rowsXML = "";
ctx = created: (new Date()).getTime(), worksheets: worksheetsXML;
workbookXML = format(tmplWorkbookXML, ctx);
var link = document.createElement("A");
link.href = uri + base64(workbookXML);
link.download = wbname || 'Workbook.xls';
link.target = '_blank';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
)();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--<button onclick="tablesToExcel( [ 'sheet': 'firstsheet','tables' : ['tbl1','tbl2'], 'sheet': 'secondsheet','tables' : ['tbl5']], 'TestBook.xls', 'Excel')">Export to Excel</button> -->
<!-- button onclick="">Export to Excel</button> -->
<button >Export to Excel</button>
<table id="tbl1" class="table2excel">
<thead>
<tr>
<th data-style="Header">Product</th>
<th data-style="Header">Price</th>
<th data-style="Header">Available</th>
<th data-style="Header">Count</th>
</tr>
</thead>
<tbody>
<tr>
<td data-style="Changed">Bred</td>
<td data-style="Missed">1
</td>
<td>037.57834600204239857
</td>
<td data-style="Header">3
</td>
</tr>
<tr>
<td>Butter</td>
<td>4
</td>
<td>5
</td>
<td >6
</td>
</tr>
</tbody>
</table>
<hr>
<table id="tbl2" class="table2excel">
<thead>
<tr>
<th>Product</th>
<th>Price</th>
<th>Available</th>
<th>Count</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bred</td>
<td>7.5
</td>
<td>8
</td>
<td>9
</td>
</tr>
<tr>
<td>Butter</td>
<td>14
</td>
<td>15
</td>
<td >16
</td>
</tr>
</tbody>
</table>
<table id="joined" class="table2excel">
<thead>
<tr></tr>
</thead>
<tbody>
</tbody>
</table>
【讨论】:
【参考方案2】:@Butani Vijay
我发现您的代码存在一个问题。尽管您可能会争辩说,也许我的源表不完全符合 HTML。 具体来说,我的表的定义类似于
<table id="tbl1">
<thead>
<tr>
<th>Name</th>
<th>E-Mail</th>
<th>Last<br>Login</th>
<th>Suspended</th>
</tr>
</thead>
<tbody>
<tr>
<td><a target="_new" href="https://xxxxx.zendesk.com/agent/users/378955944453">Joe User</a></td>
<td>JUser@xyz.edu</td>
<td>2020-02-18T16:42:50Z</td>
<td>false</td>
</tr>
<tfoot>
<tr>
<td><b>Totals: </b></td>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
</tbody>
</table>
并且由于<th>Last<br>Login</th>
中包含<br>
,XML 解析表明它需要</br>
。但为什么 ??? HTML 并没有真正的</br>
因此,虽然 XLS 会打开,但电子表格中没有数据,也没有定义任何工作表
但是一个合适的解决方法是改变你的 javascript
dataValue = (dataValue)?dataValue:tables[i].rows[j].cells[k].innerHTML;
到
dataValue = (dataValue)?dataValue:tables[i].rows[j].cells[k].innerText;
【讨论】:
你不能在你的答案中解决另一个答案。如果您在现有答案中发现问题,您应该发布自己的完整答案。【参考方案3】:对多张工作表使用下面的代码。我正在使用三个表格数据来生成 Excel。 导入库:
从“xlsx”导入*为XLSX;
static doExcel1(tableId1, tableId2, tableId3)
let targetTableElm1 = document.getElementById(tableId1);
let targetTableElm2 = document.getElementById(tableId2);
let targetTableElm3 = document.getElementById(tableId3);
const wb = SheetNames: [], Sheets: ;
var ws1 = XLSX.utils.table_to_book(targetTableElm1).Sheets.Sheet1;
wb.SheetNames.push("Sheet1"); wb.Sheets["Sheet1"] = ws1;
var ws2 = XLSX.utils.table_to_book(targetTableElm2).Sheets.Sheet1;
wb.SheetNames.push("Sheet2"); wb.Sheets["Sheet2"] = ws2;
var ws3 = XLSX.utils.table_to_book(targetTableElm3).Sheets.Sheet1;
wb.SheetNames.push("Sheet3"); wb.Sheets["Sheet3"] = ws3;
console.log(ws1); console.log(ws2); console.log(ws3); console.log(wb);
const blob = new Blob([this.s2ab(XLSX.write(wb, bookType: 'xlsx', type: 'binary' ))],
type: "application/octet-stream"
);
const link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = 'demo.xlsx';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
static s2ab(s)
const buf = new ArrayBuffer(s.length);
const view = new Uint8Array(buf);
for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
return buf;
使用表 ID 调用:doExcel1("ExampleTable1","ExampleTable2","ExampleTable3");点击按钮。
注意:以上解决方案仅适用于 Angular,如果您想在节点或 js 中使用它,则需要进行一些更改。
【讨论】:
【参考方案4】:在互联网上没有找到任何东西来解决这个问题,所以我创建了自己的。这是一个创建 2 个或更多工作表(每个表 1 个工作表)并且工作正常的工作示例。享受! :)
Run the example in https://jsfiddle.net/xvkt0yw9/
这是对 XLS 导出(网页)的 .mht 表示的~逆向工程。 工作表名称在每个表的 data-SheetName 属性中定义。 该函数可以很容易地转换为其他编程语言。 (基本上全是replace mes)
还为单元格编号格式提供内联样式(作为文本、常规、2 位小数)
注意:无论您是否设置选项,单元格网格都会显示... 警告 不要缩进 javascript 函数。 (我不知道如果你这样做,XLS 会发生什么,没有测试,没有必要) Html:(将以下内容放入 test.html 文件中并在浏览器中运行。单击按钮并打开导出的 Worksheet.xls)
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script type="text/javascript">
var tablesToExcel = (function ($)
var uri = 'data:application/vnd.ms-excel;base64,'
, html_start = `<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40">`
, template_ExcelWorksheet = `<x:ExcelWorksheet><x:Name>SheetName</x:Name><x:WorksheetSource HRef="sheetSheetIndex.htm"/></x:ExcelWorksheet>`
, template_ListWorksheet = `<o:File HRef="sheetSheetIndex.htm"/>`
, template_HTMLWorksheet = `
------=_NextPart_dummy
Content-Location: sheetSheetIndex.htm
Content-Type: text/html; charset=windows-1252
` + html_start + `
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<link id="Main-File" rel="Main-File" href="../WorkBook.htm">
<link rel="File-List" href="filelist.xml">
</head>
<body><table>SheetContent</table></body>
</html>`
, template_WorkBook = `MIME-Version: 1.0
X-Document-Type: Workbook
Content-Type: multipart/related; boundary="----=_NextPart_dummy"
------=_NextPart_dummy
Content-Location: WorkBook.htm
Content-Type: text/html; charset=windows-1252
` + html_start + `
<head>
<meta name="Excel Workbook Frameset">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<link rel="File-List" href="filelist.xml">
<!--[if gte mso 9]><xml>
<x:ExcelWorkbook>
<x:ExcelWorksheets>ExcelWorksheets</x:ExcelWorksheets>
<x:ActiveSheet>0</x:ActiveSheet>
</x:ExcelWorkbook>
</xml><![endif]-->
</head>
<frameset>
<frame src="sheet0.htm" name="frSheet">
<noframes><body><p>This page uses frames, but your browser does not support them.</p></body></noframes>
</frameset>
</html>
HTMLWorksheets
Content-Location: filelist.xml
Content-Type: text/xml; charset="utf-8"
<xml xmlns:o="urn:schemas-microsoft-com:office:office">
<o:MainFile HRef="../WorkBook.htm"/>
ListWorksheets
<o:File HRef="filelist.xml"/>
</xml>
------=_NextPart_dummy--
`
, 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 (tables, filename)
var context_WorkBook =
ExcelWorksheets:''
, HTMLWorksheets: ''
, ListWorksheets: ''
;
var tables = jQuery(tables);
$.each(tables,function(SheetIndex)
var $table = $(this);
var SheetName = $table.attr('data-SheetName');
if($.trim(SheetName) === '')
SheetName = 'Sheet' + SheetIndex;
context_WorkBook.ExcelWorksheets += format(template_ExcelWorksheet,
SheetIndex: SheetIndex
, SheetName: SheetName
);
context_WorkBook.HTMLWorksheets += format(template_HTMLWorksheet,
SheetIndex: SheetIndex
, SheetContent: $table.html()
);
context_WorkBook.ListWorksheets += format(template_ListWorksheet,
SheetIndex: SheetIndex
);
);
var link = document.createElement("A");
link.href = uri + base64(format(template_WorkBook, context_WorkBook));
link.download = filename || 'Workbook.xls';
link.target = '_blank';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
)(jQuery);
</script>
</head>
<body>
<button onclick="tablesToExcel('#table_1,#table_2', 'WorkSheet.xls');">HTML Tables to XLS sheets</button>
<table id="table_1" data-SheetName="My custom sheet 1">
<thead>
<tr >
<td colspan="4" style="border-color:#fff;">
Left info
</td>
<td colspan="3" class="text-right" style="border-color:#fff;">
Right info
</td>
</tr>
<tr>
<th colspan="7" style="border-color:#fff;text-decoration:underline;font-size:2em;" class="text-center">
Title
</th>
</tr>
<tr>
<th colspan="7" style="border-left-color:#fff; border-right-color:#fff;border-top-color:#fff;text-decoration:underline;font-size:1.5em;" class="text-center">
Subtitle
</th>
</tr>
<tr>
<th colspan="7" style="border-left-color:#fff;border-right-color:#fff;border-top-color:#fff;height:50px;">
Spacer
</th>
</tr>
</thead>
<tbody>
<tr>
<td style="mso-number-format:'\@'">1</td>
<td style="mso-number-format:'General'">2</td>
<td style="mso-number-format:'0\.00'">3</td>
<td>info</td>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
</tbody>
</table>
<table id="table_2" data-SheetName="My custom worksheet 2">
<thead>
<tr >
<td colspan="2" style="border-color:#fff;">
Left info 2
</td>
<td colspan="2" class="text-right" style="border-color:#fff;">
Right info 2
</td>
</tr>
<tr>
<th colspan="4" style="border-color:#fff;text-decoration:underline;font-size:2em;" class="text-center">
Title 2
</th>
</tr>
<tr>
<th colspan="4" style="border-left-color:#fff; border-right-color:#fff;border-top-color:#fff;text-decoration:underline;font-size:1.5em;" class="text-center">
Subtitle 2
</th>
</tr>
<tr>
<th colspan="4" style="border-left-color:#fff;border-right-color:#fff;border-top-color:#fff;height:50px;">
Spacer 2
</th>
</tr>
</thead>
<tbody>
<tr>
<td style="mso-number-format:'\@'">3</td>
<td style="mso-number-format:'General'">4</td>
<td style="mso-number-format:'0\.00'">5</td>
<td>info2</td>
<td>info3</td>
<td>info4</td>
<td>info5</td>
</tr>
</tbody>
</table>
</body>
</html>
【讨论】:
【参考方案5】:Bhutani Vijay 的代码运行良好。为了兼容 IE 11,我使用了 Blob 对象,如下所示:
var tablesToExcel = (function()
var uri = 'data:application/vnd.ms-excel;base64,',
tmplWorkbookXML = '<?xml version="1.0"?><?mso-application progid="Excel.Sheet"?><Workbook xmlns="urn:schemas-microsoft-com:office:spreadsheet" xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet">' +
'<DocumentProperties xmlns="urn:schemas-microsoft-com:office:office"><Author>Axel Richter</Author><Created>created</Created></DocumentProperties>' +
'<Styles>' +
'<Style ss:ID="Currency"><NumberFormat ss:Format="Currency"></NumberFormat></Style>' +
'<Style ss:ID="Date"><NumberFormat ss:Format="Medium Date"></NumberFormat></Style>' +
'</Styles>' +
'worksheets</Workbook>',
tmplWorksheetXML = '<Worksheet ss:Name="nameWS"><Table>rows</Table></Worksheet>',
tmplCellXML = '<CellattributeStyleIDattributeFormula><Data ss:Type="nameType">data</Data></Cell>',
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(tables, wsnames, wbname, appname)
var ctx = "";
var workbookXML = "";
var worksheetsXML = "";
var rowsXML = "";
for (var i = 0; i < tables.length; i++)
if (!tables[i].nodeType) tables[i] = document.getElementById(tables[i]);
for (var j = 0; j < tables[i].rows.length; j++)
rowsXML += '<Row>'
for (var k = 0; k < tables[i].rows[j].cells.length; k++)
var dataType = tables[i].rows[j].cells[k].getAttribute("data-type");
var dataStyle = tables[i].rows[j].cells[k].getAttribute("data-style");
var dataValue = tables[i].rows[j].cells[k].getAttribute("data-value");
dataValue = (dataValue) ? dataValue : tables[i].rows[j].cells[k].innerHTML;
var dataFormula = tables[i].rows[j].cells[k].getAttribute("data-formula");
dataFormula = (dataFormula) ? dataFormula : (appname == 'Calc' && dataType == 'DateTime') ? dataValue : null;
ctx =
attributeStyleID: (dataStyle == 'Currency' || dataStyle == 'Date') ? ' ss:StyleID="' + dataStyle + '"' : '',
nameType: (dataType == 'Number' || dataType == 'DateTime' || dataType == 'Boolean' || dataType == 'Error') ? dataType : 'String',
data: (dataFormula) ? '' : dataValue,
attributeFormula: (dataFormula) ? ' ss:Formula="' + dataFormula + '"' : ''
;
rowsXML += format(tmplCellXML, ctx);
rowsXML += '</Row>'
ctx =
rows: rowsXML,
nameWS: wsnames[i] || 'Sheet' + i
;
worksheetsXML += format(tmplWorksheetXML, ctx);
rowsXML = "";
ctx =
created: (new Date()).getTime(),
worksheets: worksheetsXML
;
workbookXML = format(tmplWorkbookXML, ctx);
var link = document.createElement("A");
// IE 11
if (window.navigator.msSaveBlob)
var blob = new Blob([workbookXML],
type: "application/csv;charset=utf-8;"
);
navigator.msSaveBlob(blob, 'test.xls');
// Chrome and other browsers
else
link.href = uri + base64(workbookXML);
link.download = wbname || 'Workbook.xls';
link.target = '_blank';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
)();
【讨论】:
【参考方案6】:Here 是一个更好的解决方案,它支持以最新的 Excel 格式导出表格,即 xlsx .如果在 Chrome 上导出的总行数超过 3407,则可接受的解决方案将失败。
上面链接中的一个例子: http://jsfiddle.net/6ckj281f/
html
<button onclick="saveFile()">Save XLSX file</button>
javascript
window.saveFile = function saveFile ()
var data1 = [a:1,b:10,a:2,b:20];
var data2 = [a:100,b:10,a:200,b:20];
var opts = [sheetid:'One',header:true,sheetid:'Two',header:false];
var res = alasql('SELECT INTO XLSX("restest344b.xlsx",?) FROM ?',
[opts,[data1,data2]]);
【讨论】:
哦,这正是我想要的。谢谢!【参考方案7】:function tablesToExcel()
var tab_text = document.getElementById("MsoNormalTable").outerHTML;
var textRange; var j = 0;
var tab = document.getElementById('MsoNormalTable'); // id of table
var sa;
var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
var txt = document.getElementById('txtArea1').contentWindow;
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) // If Internet Explorer
txt.document.open("txt/html", "replace");
txt.document.write(tab_text);
txt.document.close();
txt.focus();
sa = txt.document.execCommand("SaveAs", true, "Say Thanks to Sumit.xls");
else //other browser not tested on IE 11
sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));
return (sa);
<iframe id="txtArea1" style="display:none"></iframe>
它可以在 IE7+ 上正常工作... :)
【讨论】:
【参考方案8】:你可以这样做:Here is Full Example
HTML:
<table id="tbl1" class="table2excel">
<tr>
<td>Product</td>
<td>Price</td>
<td>Available</td>
<td>Count</td>
</tr>
<tr>
<td>Bred</td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>Butter</td>
<td>4 </td>
<td>5 </td>
<td >6 </td>
</tr>
</table>
<hr>
<table id="tbl2" class="table2excel">
<tr>
<td>Product</td>
<td>Price</td>
<td>Available</td>
<td>Count</td>
</tr>
<tr>
<td>Bred</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>Butter</td>
<td>14</td>
<td>15</td>
<td >16</td>
</tr>
</table>
<button onclick="tablesToExcel(['tbl1','tbl2'], ['ProductDay1','ProductDay2'], 'TestBook.xls', 'Excel')">Export to Excel</button>
Javascript:
var tablesToExcel = (function()
var uri = 'data:application/vnd.ms-excel;base64,'
, tmplWorkbookXML = '<?xml version="1.0"?><?mso-application progid="Excel.Sheet"?><Workbook xmlns="urn:schemas-microsoft-com:office:spreadsheet" xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet">'
+ '<DocumentProperties xmlns="urn:schemas-microsoft-com:office:office"><Author>Axel Richter</Author><Created>created</Created></DocumentProperties>'
+ '<Styles>'
+ '<Style ss:ID="Currency"><NumberFormat ss:Format="Currency"></NumberFormat></Style>'
+ '<Style ss:ID="Date"><NumberFormat ss:Format="Medium Date"></NumberFormat></Style>'
+ '</Styles>'
+ 'worksheets</Workbook>'
, tmplWorksheetXML = '<Worksheet ss:Name="nameWS"><Table>rows</Table></Worksheet>'
, tmplCellXML = '<CellattributeStyleIDattributeFormula><Data ss:Type="nameType">data</Data></Cell>'
, 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(tables, wsnames, wbname, appname)
var ctx = "";
var workbookXML = "";
var worksheetsXML = "";
var rowsXML = "";
for (var i = 0; i < tables.length; i++)
if (!tables[i].nodeType) tables[i] = document.getElementById(tables[i]);
for (var j = 0; j < tables[i].rows.length; j++)
rowsXML += '<Row>'
for (var k = 0; k < tables[i].rows[j].cells.length; k++)
var dataType = tables[i].rows[j].cells[k].getAttribute("data-type");
var dataStyle = tables[i].rows[j].cells[k].getAttribute("data-style");
var dataValue = tables[i].rows[j].cells[k].getAttribute("data-value");
dataValue = (dataValue)?dataValue:tables[i].rows[j].cells[k].innerHTML;
var dataFormula = tables[i].rows[j].cells[k].getAttribute("data-formula");
dataFormula = (dataFormula)?dataFormula:(appname=='Calc' && dataType=='DateTime')?dataValue:null;
ctx = attributeStyleID: (dataStyle=='Currency' || dataStyle=='Date')?' ss:StyleID="'+dataStyle+'"':''
, nameType: (dataType=='Number' || dataType=='DateTime' || dataType=='Boolean' || dataType=='Error')?dataType:'String'
, data: (dataFormula)?'':dataValue
, attributeFormula: (dataFormula)?' ss:Formula="'+dataFormula+'"':''
;
rowsXML += format(tmplCellXML, ctx);
rowsXML += '</Row>'
ctx = rows: rowsXML, nameWS: wsnames[i] || 'Sheet' + i;
worksheetsXML += format(tmplWorksheetXML, ctx);
rowsXML = "";
ctx = created: (new Date()).getTime(), worksheets: worksheetsXML;
workbookXML = format(tmplWorkbookXML, ctx);
var link = document.createElement("A");
link.href = uri + base64(workbookXML);
link.download = wbname || 'Workbook.xls';
link.target = '_blank';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
)();
【讨论】:
这真是天才! :-) 我已经尝试过了,但我的表格有内联 CSS,所以它不起作用。请检查这个小提琴jsfiddle.net/kdkd/qxLn3h86/49 这个链接可能对你有帮助。***.com/questions/18467418/… 那是文件,但两个代码不同,一个用于创建多个工作表,另一个用于 CSS .. 我如何合并??? 此答案在 IE 11 中不起作用。是否有任何替代解决方案可以使其在 IE 上运行?提前致谢以上是关于如何将excel 转换为html的主要内容,如果未能解决你的问题,请参考以下文章
如何将带有html标签的一列文本转换为excel中vba中的格式化文本
如何将word,excel,powerpoint等转换成html或pdf