HTML 表格到 Excel Javascript答案

【问题标题】：HTML Table to Excel JavascriptHTML 表格到 Excel Javascript
【发布时间】：2013-06-12 03:55:18
【问题描述】：

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

【问题讨论】：

您将参数 'name' 和 'tablename' 传递给 tableToExcel 但函数没有声明任何参数
你知道如何解决这个问题吗？我的js不是很好：P
@Yuriy Galanter - 变量tableToExcel 设置为一个未命名函数的返回值，该函数在页面加载时立即执行。返回值是对匿名函数function(table,name) 的引用，所以当你调用tableToExcel 时，实际上是这个函数被执行。
@TimWilliams 是的，已经想通了，现在正在想办法回答这个问题

标签： javascript html excel html-table

【解决方案1】：

您可以将现代浏览器支持的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>'

【讨论】：

太棒了！该名称有效，但现在我收到此错误：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.
这很正常，你也应该得到这个。发生这种情况是因为该文件不是真正的 Excel，而是伪装的 XML。但在那次警告之后，文件应该可以正常打开。您可以使用文件扩展名来尝试摆脱警告（例如将其更改为 .XML 等）
嗨，我知道这是一篇较旧的帖子，但我收到一条错误消息，提示 Object 不支持属性或方法 'btoa'。
在这里查看我的答案stackoverflow.com/questions/22317951/…
@Yuriy...类似这样我有三个表格，我希望这些表格成为同一个 excel 文件中的工作表....我已经尝试过 http://stackoverflow.com/a/29717451/6547301 但表格样式不是保留，我想在excel表格中保留表格的样式

【解决方案2】：

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

【讨论】：

片段似乎坏了。
有时，我们需要为window.btoa 编码UTF-8 才能工作。见Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.
无法导出大表..！请帮忙（超过 20000 条记录）