在jQuery移动项目中下载文件

Just started to teach myself javascript and jQuery mobile to create cross platform apps. I want to be able to click on links in my app to download a PDF file from a document that is synchronized (overwrites) with the local (on the phone) version of the file.

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

From this, I found out I should use data-ajax="false", so here is my first attempt:

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

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

Unfortunately, nothing happens when I click the link after I have built and transferred it to my phone. It works fine in web browser, but not in Phonegap app. Any ideas what could be wrong? And how can I do this in a better way, to achieve exactly what I intend to make it do? If the file is already downloaded, I want the link to say "Open" instead, and have a link to the local version of the file.

不幸的是，在我构建并将其传输到手机后单击链接时没有任何反应。它在Web浏览器中工作正常，但在Phonegap应用程序中没有。什么想法可能是错的？我怎样才能以更好的方式做到这一点，才能达到我打算做到的目的呢？如果文件已经下载，我希望链接改为“打开”，并且链接指向文件的本地版本。

1 个解决方案

#1

Android doesn't have a native PDF viewer in its browser, so it doesn't really know what to do with that PDF link, which means you'll need to download it yourself. One solution would be to use Cordova's File and File Transfer plugins. Here's a complete working example from scratch that downloads a PDF that I've parked on a server and allows the user to open it in a reader app, you can test this as follows. Open a command prompt in the directory where you keep your source code and:

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

Create a Cordova project and move into the project directory. At the command prompt, type:

创建Cordova项目并移动到项目目录中。在命令提示符下，键入：

cordova create hello com.example.hello HelloWorld

cordova创建hello com.example.hello HelloWorld

cd hello

你好
In the www directory inside the project directory, replace the entire contents of the www/index.html file with:

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

In the project directory, at the command prompt, type cordova plugin add org.apache.cordova.file-transfer to add the File Transfer plugin.

在项目目录中，在命令提示符下，键入cordova plugin add org.apache.cordova.file-transfer以添加文件传输插件。
In the project directory, at the command prompt, type cordova plugin add org.apache.cordova.file to add the File plugin.

在项目目录中，在命令提示符下，键入cordova plugin add org.apache.cordova.file以添加File插件。
In the project directory, at the command prompt, type cordova plugin add https://github.com/pwlin/cordova-plugin-file-opener2 to add the File Opener plugin.

在项目目录中，在命令提示符下键入cordova plugin add https://github.com/pwlin/cordova-plugin-file-opener2以添加File Opener插件。
In the project directory, at the command prompt, type cordova run android to build and deploy the app to the emulator or your device.

在项目目录中，在命令提示符下，键入cordova run android以构建应用程序并将其部署到模拟器或设备。
In the emulator or on the device, wait until you see the Got deviceready alert and dismiss it; the plugins are now available for use.

在模拟器或设备上，等到看到Got deviceready警报并将其关闭;插件现在可以使用了。
In the emulator or on the device, click the Download PDF button.

在模拟器或设备上，单击“下载PDF”按钮。

You should see a "Download complete" dialog. Dismiss the dialog, and you should get another asking you to select the app to use to open the PDF file.

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

#1

Create a Cordova project and move into the project directory. At the command prompt, type:

创建Cordova项目并移动到项目目录中。在命令提示符下，键入：

cordova create hello com.example.hello HelloWorld

cordova创建hello com.example.hello HelloWorld

cd hello

你好
In the www directory inside the project directory, replace the entire contents of the www/index.html file with:

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

In the project directory, at the command prompt, type cordova plugin add org.apache.cordova.file-transfer to add the File Transfer plugin.

在项目目录中，在命令提示符下，键入cordova plugin add org.apache.cordova.file-transfer以添加文件传输插件。
In the project directory, at the command prompt, type cordova plugin add org.apache.cordova.file to add the File plugin.

在项目目录中，在命令提示符下，键入cordova plugin add org.apache.cordova.file以添加File插件。
In the project directory, at the command prompt, type cordova plugin add https://github.com/pwlin/cordova-plugin-file-opener2 to add the File Opener plugin.

在项目目录中，在命令提示符下键入cordova plugin add https://github.com/pwlin/cordova-plugin-file-opener2以添加File Opener插件。
In the project directory, at the command prompt, type cordova run android to build and deploy the app to the emulator or your device.

在项目目录中，在命令提示符下，键入cordova run android以构建应用程序并将其部署到模拟器或设备。
In the emulator or on the device, wait until you see the Got deviceready alert and dismiss it; the plugins are now available for use.

在模拟器或设备上，等到看到Got deviceready警报并将其关闭;插件现在可以使用了。
In the emulator or on the device, click the Download PDF button.

在模拟器或设备上，单击“下载PDF”按钮。

You should see a "Download complete" dialog. Dismiss the dialog, and you should get another asking you to select the app to use to open the PDF file.

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

秒客网

在jQuery移动项目中下载文件

1 个解决方案

#1

#1

相关文章