HTML Table to Excel Javascript
HTML Table to Excel Javascript
我试图使用这个脚本将html表保存到Excel文件,它工作得很好,但是它没有以正确的名称出现,而是随机字符串。我不明白为什么。
我用:
<input type="button" onclick="tableToExcel('tablename', 'name')" value="Export to Excel">
代码var tableToExcel = (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(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))
}
})()
对于a
锚元素,可以使用现代浏览器支持的download
属性。首先通过添加一个不可见的锚来修改你的HTML:
<a id="dlink" style="display:none;"></a>
<input type="button" onclick="tableToExcel('tablename', 'name', 'myfile.xls')" value="Export to Excel">
还请注意,函数tableToExcel
的调用现在有第三个参数-您指定的文件名。
现在使用修改后的原始函数代码:
var tableToExcel = (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 (table, name, filename) {
if (!table.nodeType) table = document.getElementById(table)
var ctx = { worksheet: name || 'Worksheet', table: table.innerHTML }
document.getElementById("dlink").href = uri + base64(format(template, ctx));
document.getElementById("dlink").download = filename;
document.getElementById("dlink").click();
}
})()
注意最后3行代码:而不是将URL分配给窗口-他们将其分配给新的锚,然后使用新的download
属性强制下载作为给定的文件名,然后简单地调用锚的click()
方法。
试一试。
更新-支持utf-8字符
根据下面@WorldSEnder的评论,模板中一个简单的meta
标签将使excel支持utf-8字符,如印地语。
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"><meta charset="utf-8"/><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>'
上面的3行代码在我的情况下不起作用,但这里是我发现的,我希望它能有所帮助。
function tableToExcel(table, name, filename) {
let 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"><title></title><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]--><meta http-equiv="content-type" content="text/plain; charset=UTF-8"/></head><body><table>{table}</table></body></html>',
base64 = function(s) { return window.btoa(decodeURIComponent(encodeURIComponent(s))) }, format = function(s, c) { return s.replace(/{('w+)}/g, function(m, p) { return c[p]; })}
if (!table.nodeType) table = document.getElementById(table)
var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML}
var link = document.createElement('a');
link.download = filename;
link.href = uri + base64(format(template, ctx));
link.click();
}
<!DOCTYPE html>
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<input
type="button"
onclick="tableToExcel('myTable', 'name', 'myfile.xls')"
value="Export to Excel"
>
<table id="myTable">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>
</body>
</html>
试试这个简单的方法。
把这个按钮放在你想显示导出按钮的任何地方
<button id="btnExport" onclick="fnExcelReport('myExcelFile.xlsx');" class="btn btn-sm btn-primary"> Export </button>
将这些行添加到页面底部
<script src="https://cdn.jsdelivr.net/gh/linways/table-to-excel@v1.0.4/dist/tableToExcel.js"></script>
<script>
function fnExcelReport(fileName) {
let table = document.getElementsByTagName("table");
return TableToExcel.convert(table[0], {
name: fileName,
sheet: {
name: 'Sheet 1'
}
});
}
</script>
相关文章:
- 提交按钮,该按钮位于使用 Excel VBA 的 Javascript 中
- 如何处理javascript中的循环引用,类似于Excel提供迭代限制的方式
- 将Excel BLOB转换为javascript数组
- 使用JavaScript调用Excel文件
- CefSharp ChromiumWebBrowser javascript excel导出无法工作
- Javascript表导出到excel utf8
- 如何使用 javascript 创建和编辑 excel 文件
- Javascript JSON 到 Excel 文件下载
- 用javascript将图像导出到excel中
- 通过javascript用java处理excel文件
- 从javascript打开excel文件并传递参数
- 从excel中提取Javascript
- 将excel公式转换为JavaScript
- Javascript支持Excel图表对象吗
- 将Excel值复制到javascript代码中
- 如何使用javascript将Excel工作簿保存到当前用户桌面
- 如何使用html中的javascript代码解析Excel文件
- 使用JavaScript导出到excel
- Javascript Excel Sheet
- Javascript Excel OpenFile