繁体   English   中英

在jQuery mobile项目中下载文件

[英]Download file in jQuery mobile project

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

由此 ,我发现我应该使用data-ajax="false" ,所以这是我的第一次尝试:

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

不幸的是,在构建并将其传输到手机后单击链接时,没有任何反应。 它在Web浏览器中工作正常,但在Phonegap应用程序中却无法正常工作。 任何想法可能有什么问题吗? 我如何才能更好地做到这一点,以实现我想要实现的目标? 如果文件已经下载,我希望链接改为显示“打开”,并具有指向文件本地版本的链接。

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

  1. 创建一个Cordova项目并移至项目目录。 在命令提示符下,键入:

    cordova create hello com.example.hello HelloWorld

    cd hello

  2. 在项目目录内的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> 

  1. 在项目目录的命令提示符下,键入cordova plugin add org.apache.cordova.file-transfer以添加File Transfer插件。

  2. 在项目目录的命令提示符下,键入cordova plugin add org.apache.cordova.file以添加File插件。

  3. 在项目目录的命令提示符下,键入cordova plugin add https://github.com/pwlin/cordova-plugin-file-opener2以添加File Opener插件。

  4. 在项目目录的命令提示符下,键入cordova run android来构建应用程序并将其部署到模拟器或您的设备。

  5. 在仿真器或设备上,等待直到看到Got deviceready警报,然后将其关闭。 现在可以使用这些插件了。

  6. 在仿真器或设备上,单击“ Download PDF按钮。

您应该看到一个“下载完成”对话框。 关闭该对话框,您将收到另一个询问您选择用于打开PDF文件的应用的信息。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM