Chrome 65 更改为在 Chrome 应用程序中自动下载 blob

Chr*_*nce 5 javascript google-chrome blob download

我有一个用 JavaScript 编写的 Google Chrome 应用程序(Windows 和 Mac),带有一个菜单项来自动下载日志文件。我已经成功使用https://github.com/eligrey/FileSaver.js直到 Chrome 65 没有问题。现在,当用户单击菜单项时,我收到以下控制台错误:

Can't open same-window link to "blob:chrome-extension://lcgcc...1904"; try target="_blank"
Run Code Online (Sandbox Code Playgroud)

所以我尝试添加 target="_blank" ,现在当我点击菜单项时,我得到一个对话框

There is no application set to open the URL blob:chrome-extension://lcgc...6b11.
Search the App Store for an application that can open this document,
or choose an existing application on your computer.
Run Code Online (Sandbox Code Playgroud)

单击对话框上的“取消”使其消失,但当然不会下载文件。

这是来自另一个问题(不是我的)的一个简单的 jsfiddle,它有类似的代码:http : //jsfiddle.net/koldev/cW7W5/

var saveData = (function () {
    var a = document.createElement("a");
    document.body.appendChild(a);
    a.style = "display: none";
    return function (data, fileName) {
        var json = JSON.stringify(data),
            blob = new Blob([json], {type: "octet/stream"}),
            url = window.URL.createObjectURL(blob);
        a.href = url;
        a.download = fileName;
        a.click();
        window.URL.revokeObjectURL(url);
    };
}());

var data = { x: 42, s: "hello, world", d: new Date() },
    fileName = "my-download.json";

saveData(data, fileName);
Run Code Online (Sandbox Code Playgroud)

我已经在我的应用程序中尝试了这个示例代码,它显示了相同的行为:一条没有 target="_blank" 的错误消息和一个带有 target="_blank" 的对话框。

请注意,此代码在 Chrome 浏览器中可以正常工作 - 它会自动下载 blob 文件。这只是 Google Chrome 应用程序中的一个问题,并且仅在我升级到 Chrome 65 之后。

知道谷歌浏览器应用程序“很快”就会消失,但与此同时,在我能找到人重写整个应用程序之前,我真的需要为我的所有用户提供一个解决方案(除了告诉他们不要升级 Chrome... )。

有谁知道自动下载不会在 Chrome 应用程序上遇到这些问题的 blob 文件的不同方法?它不需要跨浏览器,因为它是一个 Chrome 应用程序。

提前致谢!

Jos*_*osh 2

遇到了同样的问题,这是我的解决方法和笔记。

Chrome 65 进行了更改,忽略了锚点下载属性。这会导致锚点单击执行重定向而不是下载。仅当单击的 URL 是跨域时才会发生这种情况。显然,url 开头的 blob: 协议使其跨域或其他。

因此,要解决此问题,请使用适用于 Chrome 应用程序和扩展程序的仅限 chrome 平台的 API。事实证明,他们添加了一个新的 API,名为 chrome.downloads,但不久前并未提及。

假设您有一个 blob 对象要启动。首先,在应用程序的清单中添加“下载”权限。这将启用“chrome.downloads”API。

然后执行以下操作:

const url = URL.createObjectURL(blob);
const args = {url: url};
const callback = function() {};
chrome.downloads.download(args, callback);
URL.revokeObjectURL(url);
Run Code Online (Sandbox Code Playgroud)

我可以确认我刚刚在 Mac 上的 Chrome 66 中执行了此操作,现在它根据需要显示“另存为”对话框。

我对这个解决方案非常不满意,因为它不是跨平台的,但至少它有效。

API 文档: https: //developer.chrome.com/extensions/downloads