HTML 表格转 Excel Javascript

IT技术 javascript html excel html-table
2021-02-07 02:31:05

我正在尝试使用此脚本将 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))
}
})()
2个回答

您可以将download现代浏览器支持的属性用于a锚元素。首先通过添加一个不可见的锚点来修改你的 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>'
在此处查看我的答案stackoverflow.com/questions/22317951/...
2021-03-24 02:31:05
这是正常的，你以前也应该得到这个。发生这种情况是因为该文件不是真正的 Excel，而是伪装的 XML。但是在那次警告之后，无论如何文件都应该可以正常打开。您可以使用文件扩展名来尝试摆脱警告（例如将其更改为 .XML 等）
2021-03-25 02:31:05
嗨，我知道这是一篇较旧的帖子，但我收到一条错误消息，指出对象不支持属性或方法“btoa”。
2021-03-25 02:31:05
@Yuriy...类似这样我有三个表格，我希望这些表格成为同一个 Excel 文件中的工作表....我试过这个http://stackoverflow.com/a/29717451/6547301但表格样式不保留，我想保留excel表中表格的样式
2021-04-04 02:31:05
惊人的！该名称有效，但现在我收到此错误：The file you are trying to open, 'name.xls', is a different format than specified in the file extension. Verify that the file is not corrupted and is from a trusted source before opening the file.
2021-04-11 02:31:05

上面的 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>

有时，我们需要编码 UTF-8window.btoa才能工作。请参阅无法在“Window”上执行“btoa”：要编码的字符串包含超出 Latin1 范围的字符。
2021-03-18 02:31:05
大表无法导出..！请帮助（超过20000条记录）
2021-03-24 02:31:05
片段似乎已损坏。
2021-04-12 02:31:05
其它你可能感兴趣的问题
上一篇如何在 Safari/Chrome 中从 javascript 打印 IFrame 下一篇将数据从一个 HTML 文件传输到另一个