1

我正在努力让现有的 Ajax 风格的 Web 应用程序作为 Chrome 打包应用程序运行。Ajax 应用程序在打包应用程序内的 Web 视图中运行，并且大部分运行良好。

Ajax 应用程序允许用户使用标准 HTML 5 上传和拖放来上传文档。上传工作正常，但下载不工作。

这是 Ajax 应用程序中逻辑的简化示例。它使用 Javascript 处理点击事件，执行一些逻辑，然后通过设置隐藏 IFrame 的位置最终触发下载。

<html>
<head>
  <script type="text/javascript">
  function downloadFile(url) {
    window.frames['dataTransfer'].location = url;
  }
  </script>
</head>
<body>
  <a href="http://www.google.com" target="_blank">Google</a><br/>
  <a href="https://s3.amazonaws.com/LYHKDevA1/2058e6cab4304af3a39eeb275eeac96d?response-content-disposition=attachment%3Bfilename%3D%22TestFile.pdf%22%3Bfilename*%3DUTF-8%27%27TestFile.pdf&Signature=FUlZZqNoJ%2F%2FvHIPX6CPDkvJ7uik%3D&Expires=1437854276&AWSAccessKeyId=1ZAN0NYFJ2DCQX8AN8G2" target="_blank">Download PDF</a><br/>
  <a href="#" onclick="downloadFile('https://s3.amazonaws.com/LYHKDevA1/2058e6cab4304af3a39eeb275eeac96d?response-content-disposition=attachment%3Bfilename%3D%22TestFile.pdf%22%3Bfilename*%3DUTF-8%27%27TestFile.pdf&Signature=FUlZZqNoJ%2F%2FvHIPX6CPDkvJ7uik%3D&Expires=1437854276&AWSAccessKeyId=1ZAN0NYFJ2DCQX8AN8G2');return false;" target="_blank">Download PDF JS</a><br/>
  <iframe name="dataTransfer" style="width: 0; height: 0; border: none;"></iframe><br/>
</body>
</html>

如果您在标准 Chrome 选项卡中运行它，所有 3 个链接都可以正常工作。然而，在 Chrome 应用程序中，只有前 2 个链接有效 - 单击第 3 个链接没有任何作用。在开发者工具的网络部分，它实际上似乎开始下载，但很快就被取消了。

Chrome 应用程序的清单允许 Webview 和涉及的相关域。

{
  "manifest_version": 2,
  "name": "Test Download",
  "version": "0.1.0",
  "permissions": [
    "webview",
    "<DOMAIN OF THE SAMPLE PAGE ABOVE>",
    "https://s3.amazonaws.com/"
  ],
  "app": {
    "background": {
      "scripts": ["background.js"]
    }
  },
  "icons": {},
  "minimum_chrome_version": "28"
}

Chrome 应用程序也有一些简单的newwindow处理。

window.onload = function() {
  var webview = document.querySelector('#app-webview');
  webview.src = '<URL TO SAMPLE PAGE ABOVE>';
  webview.addEventListener('newwindow', function(e) {
    e.preventDefault();
    e.stopPropagation();
    window.open(e.targetUrl);
  });
};

关于如何使下载工作的任何建议（希望不需要对 Ajax 应用程序进行重大更改）？

4

1 回答 1

4

从 webview 来宾下载的文件由permissionrequest每次下载尝试的事件控制。默认响应是拒绝下载权限。

注意：下载权限请求现在要到 Chrome 30 才会登陆，而且似乎还没有提供文档。不过，它通常是一个稳定的 API，而且从现在到那时不太可能发生变化。

为了覆盖此行为，您需要处理该事件并明确允许下载发生。举个例子：

var webview = document.querySelector('#app-webview');
webview.addEventListener('permissionrequest', function(e) {
  if (e.permission === 'download') {
    e.request.allow();
  }
});

e.url如果您想进一步过滤您的授权，该事件包括附加信息（例如 中的下载 URL ）。

请注意，这只会允许使用常规 Chrome 文件下载体验进行下载，这不一定是您在打包应用程序中想要的。chrome.downloads在API 可用于应用程序之前，您的选择是有限的。

一种可能性是拒绝下载请求，从事件中获取 URL，并使用 XHR、fileSystem API 和您想要构建的任何 UX 手动管理下载过程。

于 2013-07-26T03:38:49.267 回答