Phonegap / Cordova 3.6 - 通过blob:文件下载文件

问题描述:

我们有一个使用Phonegap 3.6.3并使用 Phonegap build 建立的应用程式。
作为这个应用程序的一部分,我们需要下载一个文件到用户的设备上。该文件可能是.pdf,图像或任何二进制文件。

We have an app using Phonegap 3.6.3 and built with Phonegap build. As part of this app, we need to download a file onto the device of the user. The file might be a .pdf, an image or any binary file.

我们希望在应用程序中使用blob:file链接下载文件,而不是使用文件传输等插件。

We hope to download the file with a blob:file link in the app, and not use a plugin such as file-transfer.

文件从Base64数据转换,并创建一个Blob对象。
一个objectURL是通过window.URL.createObjectURL()生成的,它被添加到一个元素的href属性。

The file is converted from Base64 data and a Blob object is created. An objectURL is generated through window.URL.createObjectURL() and this is added to the href attribute of an a element.

DOM包含以下

<a href="blob:file%3A///cf2e336c-8c10-4e54-9e99-26f7d5a0115f" download="1.jpg" style="display: none;"></a>

在桌面上,这没有问题,但在与cordova 3.6.3打包的应用程序只是失败默默。

On desktop, this works without problems, but in the app packaged with cordova 3.6.3 it just fails silently.

我怀疑它与cordova中的白名单功能有关。
在问题 http://*.com/a/31945728/250787 其他人已解决了相同的问题与cordova插件白名单。
不幸的是,这个插件只适用于cordova 4.0 +

I suspect it's related to whitelist functionality in cordova. In the question http://*.com/a/31945728/250787 others have solved the same problem with the cordova-plugin-whitelist. Unfortunately, this plugin is only for cordova 4.0+

我试过使用访问原始元素,但没有一个语句似乎有效果

I've tried using the access origin element, but none of the statements appears to have an effect

<access origin="blob:*" launch-external="yes" />
<access origin="blob:*"/>

我已经有访问来源来限制应用程序主后端系统的流量

I already have a access origin to limit traffic to the main backend system of the app

<access origin="https://mobilbackend.mycompany.com/*"/>

如何解决?

好的。 blob:需要对白名单系统进行特殊添加,其中似乎有一个不完全理解_OR_正在使用过期文档。我可以告诉,因为 launch-external =yes已被删除使用。

Okay. blob: requires special additions to the whitelist system, of which you seem to have an incomplete understanding _OR_ are using outdated documentation. I can tell because launch-external="yes" has been removed from use.


  • 您需要同时使用白名单插件,并添加< meta(...)/> .npmjs.com / package / cordova-plugin-whitelistrel =nofollow> cordova-plugin-whitelist 。

  • 白名单工作表应该有所帮助。
    如何应用Cordova / Phonegap白名单系统

  • You will need to use both the whitelist plugin and add a <meta (...) /> entry into the header of our .html pages.
  • You need to implement the cordova-plugin-whitelist.
  • This whitelist worksheet should help. HOW TO apply the Cordova/Phonegap the whitelist system

注意这会使您的应用程序无法访问。

将此添加到您的 config.xml

<plugin name="cordova-plugin-whitelist" source="npm" spec="1.1.0" />
<allow-navigation href="*" />
<allow-intent href="*" />
<access origin="*" /> <!-- Required for iOS9 -->

注意您的应用程式现已无法使用。
将以下内容添加到您的 index.html 和每个 .html 页面。

<meta http-equiv="Content-Security-Policy" 
         content="default-src * blob:; 
                  style-src * 'self' 'unsafe-inline' 'unsafe-eval'; 
                  script-src * 'self' 'unsafe-inline' 'unsafe-eval';">

我已经将 blob: code> CSP 定义。但是,这只是打开了应用程序,允许 blob: URL。当你说下载文件时,我还不清楚你的意思,因为 blob:不是传输协议。它仅用于定义文件类型

I have added blob: into the CSP definition. However, this just opens up the app to allow the blob: URL. It is still not clear to me what you mean when you say "download the file", as blob: is not transport protocol. It is only intended to define a type of file.

我还建议您阅读此白名单工作表,请务必阅读 9。 CSP(内容安全政策)
最后,如果您要继续讨论,请继续 Google网上论坛

I also recommend reading this whitelist worksheet, make sure to read 9. CSP (Content Security Policy) Lastly, if you want to continue this discussion, please continue on Google Groups