HTML 表格到 Excel Javascript

Posted 2023-03-05

技术标签:

【中文标题】HTML 表格到 Excel Javascript【英文标题】：HTML Table to 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 是的，已经想通了，现在正在想办法回答这个问题 【参考方案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'。在这里查看我的答案***.com/questions/22317951/… @Yuriy...类似这样我有三个表格，我希望这些表格成为同一个 excel 文件中的工作表....我已经尝试过 http://***.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 条记录）

以上是关于HTML 表格到 Excel Javascript的主要内容，如果未能解决你的问题，请参考以下文章

利用JavaScript所见即所得的生成Excel表格

怎么用js将excel中的数据读取后显示到网页中的表格

Java如何做动态表格？

使用 JavaScript / JQuery 将 html 表数据导出到 Excel 在 Chrome 浏览器中无法正常工作

请教如何用JQuery导入导出excel表格

JS 将页面上的表格导出为 Excel 文件