Question

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

我们希望在应用程序中下载带有blob：file链接的文件，而不是使用文件传输等插件。

从Base64数据转换文件，并创建Blob对象。通过window.URL.createObjectURL（）生成objectURL，并将其添加到元素的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/*"/>

如何解决这个问题？

Answer 1

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

您需要同时使用whitelist插件，并在<meta (...) />页面的标题中添加.html条目。
您需要实施cordova-plugin-whitelist。
此白名单工作表应该有所帮助。 HOW TO apply the Cordova/Phonegap the whitelist system

注意这样做会使您的APP不安全。由您来保护您的APP。
将其添加到您的config.xml

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

注意您的应用程序现在已不确定。由您来保护您的APP。 将以下内容添加到您的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:网址。当你说“下载文件”时，我仍然不清楚你的意思，因为blob:不是传输协议。它仅用于定义type of file。

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

Answer 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

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

2 个答案: