跨浏览器javascript下载功能

Posted 2023-05-09

【中文标题】跨浏览器javascript下载功能

【英文标题】：Cross browser javascript download function

【发布时间】：2013-12-24 08:16:59

【问题描述】：

我正在客户端从我的 json 响应中构建一些内容以显示在 html 表中。 我还有一个下载按钮，点击后应该将文件保存到本地磁盘。我正在从同一个 json 响应即时创建 csvContent。

代码：

<a class="download-page" href="#" onClick="downloadPage();">Download</a>

function downloadPage() 
    window.location.href = 'data:text/csv;charset=UTF-8,'+ encodeURIComponent(csv);
    //window.location.href = "data:text/csv;charset=utf-8," + escape(csv));
    //window.open("data:text/csv;charset=utf-8," + encodeURI(csv))

这仅适用于 chrome 10。某些版本的浏览器根本不支持此功能。 IE是个大问题。但我的大多数用户都使用 IE 9 和火狐。是否有任何跨浏览器功能可以实现这一点。

CSV 数据示例：

"Testcase Reports for : jumashan\r\n
 Total Unique Stimuli : 1\r\n
 Total execution time : 0 Days 0 hours 16 minutes\r\n

 Testcase Name, Count (Pass/Fail/Error/Block), Version Number, Execution Time(HH:MM:SS),
 INIT-CHECK,2( 0 / 0 / 0 / 2 ) ,0,0:16:28,

 Testcase Reports for : prabhaa\r\n
 Total Unique Stimuli : 1\r\n
 Total execution time : 0 Days 1 hours 23 minutes\r\n"

【问题讨论】：

这样的？ ***.com/questions/3665115/…

@NinjaFart 我已经尝试过了，但它不起作用:(

您能发布一些示例 CSV 数据吗？

出于安全原因，IE 仅支持数据协议的子集。你可以阅读更多关于它的信息here 和 here

@NinjaFart 请检查我在上面编辑的示例 csv。我所做的只是格式化 json 对象并根据要求添加“，”。

【参考方案1】：

您可以通过自己在函数中构建内容来轻松获取内容。

对于下载它，只有 Chrome 允许您指定文件名。

其他网络浏览器如 Firefox 尚不提供此功能，如果您希望下载锚点推送下载，您可以调用以下函数（在之前的项目中使用）：

window.open( "data:application/octet-stream;charset=utf-8,"+escape(data));

（注意 octet-stream MIME 类型）

“数据”变量包含您要输出的 CSV 数据。

希望这会有所帮助。