使用 JavaScript 导出带有表单输入值的 html 表答案

【问题标题】：Export html table with form input values in it using JavaScript使用 JavaScript 导出带有表单输入值的 html 表
【发布时间】：2019-04-08 18:15:45
【问题描述】：

我有一个 HTML 表格。在其<th></td> 标签内有表单输入字段，类型为文本、数字、日期和时间。我有以下 JavaScript，通过它我可以将表格导出到 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))
  }
})()

// SelectAll Checkboxes
function selectAll(source) {
    checkboxes = document.getElementsByName('select_all[]');
    for (var i in checkboxes)
        checkboxes[i].checked = source.checked;
}

【问题讨论】：

标签： javascript html export-to-excel form-fields

【解决方案1】：

并非所有浏览器都广泛支持您采用的方法，并且使用纯 Javascript 导出到 Excel 在很大程度上是徒劳的。您可能会得到它的工作，但保证它跨浏览器和支持更改充其量是冒险的。

更好、更简洁、更简单的方法是实现一个网格插件，该插件存储您的表格数据并具有内置的导出逻辑，可以跨浏览器工作并获得可靠的结果......他们花时间工作通过浏览器特性并以 .xls 或 .xlsx 格式提供可靠的结果。我选择的网格是Datatables，它非常简单。但也有其他几种选择。

【讨论】：