如何将 HTML 表格导出到 Chrome 和 IE 支持的 Excel?

2024-05-07

在我的 MVC 项目中,我有一个与 Knockout 绑定的 HTML 表。

我正在尝试将表格导出到 Excel。

我在客户端尝试使用 JavaScript:

self.exportToExcel = function () {
    javascript: window.open('data:application/vnd.ms-excel,' + $("#tableToprint").innerHTML());
}

OR:

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 cellspacing="0" rules="rows" border="1" style="color:Black;background-color:White;border-color:#CCCCCC;border-width:1px;border-style:None;width:100%;border-collapse:collapse;font-size:9pt;text-align:center;">{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 }
    if (navigator.msSaveBlob) {
        var blob = new Blob([format(template, ctx)], { type: 'application/vnd.ms-excel', endings: 'native' });
        navigator.msSaveBlob(blob, 'export.xlsx')
    } else {
        window.location.href = uri + base64(format(template, ctx))
    }
}
})()

但这两个代码都可以在 Chrome 中运行,但不能在 IE 中运行。

我想使用 JavaScript 或 jQuery 在客户端执行此操作,但如果没有两种浏览器都支持的解决方案,我也可以通过对我的 Web API 的 AJAX Post 请求在服务器端执行此操作。

如何使用 JavaScript/jQuery 或 AJAX 和 Web API 将 HTML 表格导出到 Chrome 和 IE 支持的 Excel?

有什么建议吗?


我用eligrey.filesaver https://github.com/eligrey/FileSaver.js/blob/master/FileSaver.js然后就用它作为

window.saveAs(blob,文件名);

根据 jparaya 的回答,我创建了一个小样本plunker https://plnkr.co/edit/xho71KpwCNso8pOChZxT?p=preview, 用filesaver保存文件 除了保存部分之外,它与 jparaya 的代码相同:

function fnExcelReport(id, name) {
  var tab_text = '<html xmlns:x="urn:schemas-microsoft-com:office:excel">';
  tab_text = tab_text + '<head><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>';
  tab_text = tab_text + '<x:Name>Test Sheet</x:Name>';
  tab_text = tab_text + '<x:WorksheetOptions><x:Panes></x:Panes></x:WorksheetOptions></x:ExcelWorksheet>';
  tab_text = tab_text + '</x:ExcelWorksheets></x:ExcelWorkbook></xml></head><body>';
  tab_text = tab_text + "<table border='1px'>";
  var exportTable = $('#' + id).clone();
  exportTable.find('input').each(function (index, elem) { $(elem).remove(); });
  tab_text = tab_text + exportTable.html();
  tab_text = tab_text + '</table></body></html>';
  var fileName = name + '_' + parseInt(Math.random() * 10000000000) + '.xls';

  //Save the file
  var blob = new Blob([tab_text], { type: "application/vnd.ms-excel;charset=utf-8" })
  window.saveAs(blob, fileName);
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何将 HTML 表格导出到 Chrome 和 IE 支持的 Excel? 的相关文章

随机推荐

  • 在 jQuery 中删除或更改 CSS 伪类

    一个足够简单的问题 如此简单 是否可以使用 jQuery 删除或更改 CSS 伪类 或者任何其他与此相关的 Javascript 方法 具体来说 我想摆脱 专注于输入 我无法以任何方式直接更改 CSS 文件 谢谢你的帮助 Buster 我无
  • 干净地销毁System V共享内存段

    我在用shmget shmat and shmctl分别获取和创建共享内存段 将其附加到进程地址空间中并删除它 我想知道进程是否仍然可以使用共享内存段 即使它已被分离并要求使用删除 shmctl id IPC RMID 在一个过程中 我无法
  • 如何从具体类转换为接口类型?

    我正在构建一个多层应用程序 当我将对象从表示层传递到业 务层时 我想将其转换为接口类型 因为业务层不知道表示层的具体类 public ActionResult SubmitSurvey SurveyAnswer answers ISurve
  • 通过 POST 将 JSON 编码的变量从 PHP 传递到 Javascript

    我有一个多维数组 我想将其发送到带有 Javascript 的 PHP 脚本 该脚本解析 JSON 数据并将其绘制在 Google 地图上 我正在尝试使用表单来模拟它
  • 使用 Rails/ActiveRecord 覆盖旧数据库中列的名称或别名

    我正在针对旧数据库编写 Rails 应用程序 此旧数据库中的一个表有一个名为object id 很遗憾object id也是 Ruby 中每个对象的属性 因此当 ActiveRecord 尝试使用这些对象来制定查询时 它使用 Ruby 定义
  • 如何有效地计算 Perl 中覆盖给定范围的范围?

    我有一个大约 30k 范围的数据库 每个范围都作为一对起点和终点给出 12 80 34 60 34 9000 76 743 我想编写一个 Perl 子例程来表示一个范围 不是来自数据库 并返回数据库中完全 包含 给定范围的范围数 例如 如果
  • WCF 数据契约/序列化

    我创建了一个简单的 WCF 应用程序 它公开一个操作 此操作采用复合数据类型作为参数 我没有用 DataContract 属性修饰这个复合数据类型 但这是有效的 我可以在 WSDL 中看到它的架构 现在我的理解是 这个新的自定义类型应该用
  • 更新插入不适用于 updateOnebulkWrite v3.4

    我正在尝试批量写入一些更新 除了更新插入之外的所有内容都正常 我的代码完美地更新了所有项目 并且没有给出任何错误 这里的问题是批量插入updateOne没有更新插入 这是我的代码的未经测试和缩短的示例 因此您可能会发现一些语法错误 希望您明
  • 使用 GenericRecord 在 Avro 中填充嵌套记录的问题

    假设我有以下架构 name Profile type record fields name firstName type string name address type type record name AddressUSRecord f
  • 将数据从 Excel 导出到 Outlook

    我已经用 Excel 起草了一封电子邮件 其中填充了数据表中的信息 单元格 A1 到 A4 包含 嗨 希望你做得好 和消息 等等 A5到H10有一个包含信息的表格 A11到A30有类似 期待您的回复 的电子邮件内容 我只想复制 A1 A4
  • 在 Firebase 群组消息应用中实现已读回执功能

    我想在我的 Firebase 群组消息应用中实现 Seen 功能 您能否建议采取最好 最有效的方法 工作代码将不胜感激 例如 应用程序会显示 已被 6 人看过 or 15 人看过 在群组消息中 这是我的项目 https github com
  • Cesium - 为什么 scene.pickPositionSupported 为 false

    我最终试图在我的房子顶部画一个多边形 我能做到 问题是 在缩小 放大和旋转 或相机移动 时 多边形不会粘在我房子的顶部 我得到了很大的帮助这个答案 https stackoverflow com a 35992537 1735836 所以
  • 有人请解释 Calendar.get(cal.DAY_OF_WEEK) 如何给出正确的输出,而 cal.DAY_OF_WEEK 是默认且未修改的? [复制]

    这个问题在这里已经有答案了 我想知道约会的日子 当我在 cal set year month 1 day 中设置日期时 设置日历字段YEAR MONTH DAY OF MONTH HOUR OF DAY 和 MINUTE 的值 其他字段的先
  • Cloud Functions for Firebase - 创建新用户时写入数据库

    我对 Firebase 和 javascript 语言的 Cloud Functions 非常陌生 我试图在每次创建用户写入数据库时 添加一个函数 这是我的代码 const functions require firebase functi
  • 重绘不会更新屏幕

    我想重新粉刷我的屏幕 到目前为止 它所做的只是在第一个屏幕上显示一个点 即头部应该在的位置 这很好 但是我在代码中写道 我希望每秒将头部向下移动 10 像素 我正在打印头部应该在的位置 并且在命令提示符中显示 y 值确实在增加 然而在我的屏
  • C 中类似函数的宏定义

    我想定义一个像 MACRO 这样的函数 IE define foo x if x gt 32 x else 2 x endif 那是 if x gt 32 then foo x present x else foo x present 2
  • Netbeans 中的方法必须调用 super() 错误

    最近我做了一个 Netbeans 项目 并使用 SVN 来配合它 我看到重复的类错误 并在控制台中显示 java lang VerifyError class pie chart explorer PieChartExplorer meth
  • 将可为空的数字转换为字符串

    我想将可为空的数字转换为字符串维持空值 这就是我正在做的 int i null string s i null null i ToString 有更短的吗 您可以编写一些扩展方法 public static string ToNullStr
  • 如何连接flutter到localhost mysql数据库

    我想将本地主机 mysql 数据库连接到 flutter 但我没有这样做 我尝试了 mysql1 与这些连接 ConnectionSettings host 10 0 2 2 port 3306 user root password roo
  • 如何将 HTML 表格导出到 Chrome 和 IE 支持的 Excel?

    在我的 MVC 项目中 我有一个与 Knockout 绑定的 HTML 表 我正在尝试将表格导出到 Excel 我在客户端尝试使用 JavaScript self exportToExcel function javascript wind