时间戳

首页 > 解决方案 > 在 Safari 中使用 FileSaver.js 会损坏下载

javascript - 在 Safari 中使用 FileSaver.js 会损坏下载

问题描述

我正在使用 FileSaver.js 在客户端使用 FileSaver.js 下载图像。在 Chrome 和 IE11 中运行良好。但是在 Safari 11.1（我需要对 12+ 的支持）中，图像（.png 或 .jpg）会下载，但随后无法打开，并且操作系统会抱怨文件损坏或文件类型不受支持。

我的下载看起来像这样：

fileName = Ext.isIE || Ext.isSafari ? fileName + fileExtension : fileName;
saveAs(new Blob([file], { type: contentType }), fileName);

（saveAs 不会在 IE11 或 Safari 中添加文件扩展名，因此添加了 fileExtension）

无论如何，file 是一个 svg 字符串，contentType 是“image/png”或“image/jpeg”。我还尝试了以下调整：将 ";charset=utf-8" 附加到无济于事的 contentType 中。预先添加“数据：”来创建一个 dataURL，但我很确定 FileSaver.js 应该处理这个问题。

我读到在 FileSaver.js 中检查浏览器是否为 Safari 时可能存在问题，因此我进入 FileSaver.js 源代码并将检查更改为 Ext.isSafari（使用 ExtJs 6）。没有帮助。我难住了。

将不胜感激任何和所有的帮助，谢谢。

标签： javascriptsvgextjssafarifilesaver.js

解决方案

当然，问题不在于 FileSaver.js。它甚至与浏览器无关，它是操作系统。

问题是我不能只在 SVG blob 上添加 .png 或 .jpg 并期望它表现良好。在 Windows（Chrome 和 IE11）上，“通过扩展名更改转换”工作正常，但 Mac 不接受它是合法的，因此拒绝文件损坏。

我可以通过下载带有 .svg 扩展名的 svg 文件来重新创建它，看到它在 Mac 上打开得很好，然后将扩展名更改为 .png 并看到我收到了相同的错误消息。我猜Windows只是更宽容。

推荐阅读