在 jQuery 移动项目中下载文件答案

【问题标题】：Download file in jQuery mobile project在 jQuery 移动项目中下载文件
【发布时间】：2015-03-27 23:39:55
【问题描述】：

刚开始自学 javascript 和 jQuery mobile 来创建跨平台应用程序。我希望能够单击我的应用程序中的链接以从与文件的本地（在电话上）版本同步（覆盖）的文档中下载 PDF 文件。

从this，我发现我应该使用data-ajax="false"，所以这是我的第一次尝试：

<a href="http://blablabla/download/pdf" data-ajax="false">Download</a>

不幸的是，当我在构建并传输到我的手机后单击链接时没有任何反应。它在网络浏览器中运行良好，但在 Phonegap 应用程序中却不行。有什么想法可能是错的吗？我怎样才能以更好的方式做到这一点，以实现我打算让它做的事情？如果文件已经下载，我希望链接改为“打开”，并有一个指向该文件本地版本的链接。

【问题讨论】：

href="..... 下载/file.pdf" ?
@PrashantGhimire 不，它会生成 PDF。
浏览器控制台上显示的任何错误？
不，在网络浏览器中工作正常。作为 Phonegap 应用程序运行时无法正常工作。
参考这些链接：stackoverflow.com/questions/3625640/…docs.phonegap.com/en/1.0.0/…

标签： javascript jquery cordova jquery-mobile

【解决方案1】：

Android 在其浏览器中没有原生 PDF 查看器，因此它并不真正知道如何处理该 PDF 链接，这意味着您需要自己下载它。一种解决方案是使用 Cordova 的文件和文件传输插件。这是一个从头开始的完整工作示例，它下载了我存放在服务器上的 PDF 并允许用户在阅读器应用程序中打开它，您可以按如下方式进行测试。在保存源代码的目录中打开命令提示符，然后：

创建一个 Cordova 项目并进入项目目录。在命令提示符下，键入：

cordova create hello com.example.hello HelloWorld

cd hello
在项目目录内的www目录中，将www/index.html文件的全部内容替换为：

<!DOCTYPE html>
<html>
    <head>
        <title>Hello World</title>
    </head>
    <body>
        <script src="cordova.js"></script>
        
        <a href="#" onclick="downloadPdf();">Download PDF</a>
        
        <script>
            document.addEventListener("deviceready", onDeviceReady, false);
            function onDeviceReady() {
                alert("Got deviceready");
            }
        
            function downloadPdf() {
                var fileTransfer = new FileTransfer();
                var inputUri = encodeURI("http://nextwavesoftware.com/downloads/helloworld.pdf");
                var outputPath = cordova.file.externalDataDirectory + "helloworld.pdf";
                // var outputPath = "/storage/emulated/0/Download/helloworld.pdf";
                alert("Starting download to " + outputPath);
                fileTransfer.download(
                      inputUri,
                      outputPath,
                    function (entry) {
                        alert("Download complete: " + entry.fullPath + ", URL=" + entry.toURL());
                        cordova.plugins.fileOpener2.open(
                            entry.toURL(), // You can also use a Cordova-style file uri: cdvfile://localhost/persistent/Download/starwars.pdf
                            'application/pdf',
                            {
                                error: function (e) {
                                    alert('fileOpener2 error status: ' + e.status + ' - Error message: ' + e.message);
                                },
                                success: function () {
                                    alert('fileOpener2 file opened successfully');
                                }
                            }
                        );
                    },
                    function (error) {
                        alert("download error: source=" + error.source + ", target=" + error.target + ", error code=" + error.code);
                    });
            }
        </script>
    </body>
</html>

在项目目录中，在命令提示符下，键入cordova plugin add org.apache.cordova.file-transfer 以添加文件传输插件。
在项目目录中，在命令提示符下，输入cordova plugin add org.apache.cordova.file 以添加文件插件。
在项目目录中，在命令提示符下，键入cordova plugin add https://github.com/pwlin/cordova-plugin-file-opener2 以添加文件打开器插件。
在项目目录的命令提示符下，键入cordova run android 以构建应用并将其部署到模拟器或您的设备。
在模拟器或设备上，等到看到Got deviceready 警报并关闭它；插件现在可以使用了。
在模拟器或设备上，点击Download PDF按钮。

您应该会看到“下载完成”对话框。关闭对话框，您应该会收到另一个对话框，要求您选择用于打开 PDF 文件的应用程序。

【讨论】：

非常感谢您提供的冗长而翔实的回答。它似乎有效，但不幸的是，即使它说“下载完成：/helloworld.pdf”，我也无法在我的发现上找到 helloworld.pdf。我想保存目录可能有问题。任何想法我可以如何将它保存在 ie 中。我的应用程序文件夹还是让它工作？
使用跨平台文件系统的最佳方式是通过我们安装并用于在本示例中创建输出路径的 Cordova File 插件。在此处查看文档：github.com/apache/cordova-plugin-file。此时您已经下载了文件并将其存储在可以访问的文件夹中，现在您可以通过它的 URL（上例中的 entry.nativeURL）或其路径（entry.fullPath）访问它。
跟进我之前的评论（因为看起来我无法编辑它）：在这种情况下，文件的 URL（通过entry.nativeURL() 检索）将是“file:///数据/数据/com.example.hello/files/helloworld.pdf”。但是，由于 Android webview 不支持原生 PDF，您仍然不能只在页面上放置 <a href="file:///data/data/com.example.hello/files/helloworld.pdf">Open PDF</a>，因为 webview 仍然不知道如何处理它；单击它时不会发生任何事情。要打开它，您需要另一个插件，例如 FileOpener2：github.com/pwlin/cordova-plugin-file-opener2
非常感谢您跟进此事。奇怪的是我没有收到任何错误，直到我想打开 PDF，然后它才会找到它。而且我也无法在文件管理器中找到 helloworld.pdf。
我刚刚发现我不应该找到该文件，因为它隐藏在我的文件管理器中。我尝试使用 FileOpener2，并使用cordova.file.dataDirectory + "helloworld.pdf" 作为路径。我收到错误“无法打开 PDF”。即使我直接从网上下载它也能做到。