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

【问题标题】：Phonegap/Cordova 3.6 - Download of file through blob:filePhonegap/Cordova 3.6 - 通过 blob:file 下载文件
【发布时间】：2016-03-25 05:28:20
【问题描述】：

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

我们希望在应用中下载带有blob:file链接的文件，而不是使用file-transfer之类的插件。

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

DOM 包含以下内容

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

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

我怀疑它与cordova 中的白名单功能有关。在问题https://stackoverflow.com/a/31945728/250787 中，其他人使用cordova-plugin-whitelist 解决了同样的问题。不幸的是，这个插件只适用于cordova 4.0+

我尝试过使用 access origin 元素，但这些语句似乎都没有效果

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

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

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

如何解决？

【问题讨论】：

@dpamas，您真的在使用 Phonegap Build，Phonegap 的云服务吗？您是否也在使用 Phonegap CLI，即在您的机器上本地运行的命令行版本？
@JesseMonroy650 是的，我真的在使用基于云的 Phonegap 构建服务 :) 因此，我无法直接对生成的 android 类进行任何更改，并且仅限于它们在其中公开的配置选项config.xml 文件。我没有使用 Phonegap CLI。
@dpamas，显然你对 Cordova/Phonegap 的工作方式有一些误解。几乎任何你需要做的事情都可以通过插件来完成。如果您想创建类，可以创建自己的插件。 Plugin Development Guide。请稍等片刻回答。
@dpamas，你的帖子让我很困惑，因为 Phonegap Build 没有版本 3.6.5 listed as being avaiable。我必须假设你的帖子有错字。现在要明确一点，您必须设置编译器的版本，否则您将获得最新版本 - 当前为 cli-5.2.0。另一个因素是，如果您使用的是最新的编译器版本，则需要使用新的whitelist 系统。此外，Google 和 Apple 现在都需要此类过滤器。
另外一点，Tools Release 版本不同于“固定版本”，可能是您引用的版本。您可以通过phongap-version preference 设置编译器版本。 FWIW：我有教程可以让你度过whitelist 的混乱。

标签： file cordova blob phonegap-build

【解决方案1】：

好的。 blob: 需要对whitelist 系统进行特殊添加，您似乎对它的理解不完整_或_正在使用过时的文档。我可以知道，因为 launch-external="yes" 已被取消使用。

您将需要同时使用whitelist 插件并将<meta (...) /> 条目添加到我们.html 页面的标题中。
您需要实现cordova-plugin-whitelist。
此白名单 工作表应该会有所帮助。 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: 添加到CSP 定义中。但是，这只会打开应用程序以允许 blob: URL。当您说“下载文件”时，我仍然不清楚您的意思是什么，因为blob: 不是传输协议。它仅用于定义type of file。

我还推荐阅读此whitelist worksheet，请务必阅读9. CSP (Content Security Policy) 最后，如果您想继续讨论，请继续Google Groups

【讨论】：

感谢您提供背景信息，帮助我更好地了解各个部分如何组合在一起。不幸的是，您的建议确实使二进制数据添加到 blob:file 锚点保留在设备上（与桌面浏览器上的方式相同）。 CSP 可能不涉及，因为 chrome 开发工具从未显示任何 CSP 项目阻止的警告（并且添加元对问题没有影响）。我的猜测是，Cordova 现在让我们通过 blob:file 链接，但操作系统的 WebView 会忽略它们。将研究实现相同目标的其他方法
嗯。你又少了两块。我在 Webview 上的笔记，该库用于使用 HTML5 和 CSS 渲染屏幕。请务必与 Paul Irish 一起阅读该部分。它可能在我的 Webview Alternatives 笔记中。请继续讨论 Google 网上论坛。
@dpamas，对不起。昨晚我头疼，我想你的问题是我回答的最后一个问题。您使用的是过时的 Cordova/Phonegap 版本。我们现在使用的是 5.x。 3.x 使用的是旧的 webview 库。 5.x 使用 Webkit 库。我永远不会使用 3.x。 Upgrade to 5.x。注意：我仍然不知道您所说的“下载文件”是什么意思。

【解决方案2】：

所以我创建了一个解决方案来保存 blob，然后使用系统查看器打开它。
如果您希望将其保存在其他位置，请参阅：here。

通过选择此位置，您可以将其直接下载到所需位置。
如果您使用系统查看器打开文件，则用户通常可以选择保存文件。

// previously blob is defined as file, 
//and file name is saved in data.FileName

var savedFile;

window.resolveLocalFileSystemURL( cordova.file.cacheDirectory, function( dir ) {

    dir.getFile( data.FileName, { create:true }, function( file_ ) {

        savedFile = file_;
        saveFile();

    });
});

function saveFile(str) {
    if( !savedFile ) return;

    savedFile.createWriter(function(fileWriter) {

        fileWriter.write( file );
        cordova.plugins.disusered.open( savedFile.nativeURL );
        console.log( "file " + savedFile.nativeURL + " opened" );

    }, function( e ){
        throw( 'createWriter Error error' + JSON.stringify( e ) );
    });
}

这使用以下插件：

cordova plugin add cordova-plugin-file --save
cordova plugin add cordova-open --save

【讨论】：