javascript - 下载 jQuery 移动项目中的文件

标签 javascript jquery cordova jquery-mobile

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

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

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

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

最佳答案

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

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

    cordova create hello com.example.hello HelloWorld

    cd 你好

  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>

  • 在项目目录中的命令提示符下,键入 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警报并将其关闭;这些插件现已可供使用。

  • 在模拟器或设备上,单击下载 PDF 按钮。

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

    关于javascript - 下载 jQuery 移动项目中的文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29311884/

    相关文章:

    javascript - ionic3 ionic 滑 Action 为堆栈卡效果

    javascript - ResponsiveVoice.js 无法与 Phonegap 编译器一起正常工作

    javascript - 在 Razor 中使用 Jquery

    javascript - Anuglar2-模型数据跳跃

    javascript - 如何使用 CSS 模块在 React 中设置子组件的样式

    javascript - 服务 worker : No FetchEvent for javascript triggered request?

    javascript - 有没有办法让选择的内容下推?

    javascript - 无法通过单击特定按钮删除元素

    java - 如何使用 Phonegap 自动旋转捕获的图像?

    javascript - 缓存失效和同步 Angular/后端