Cordova / Ionic - 从InAppBrowser下载文件 [英] Cordova / Ionic - Download file from InAppBrowser

问题描述

场景是这样的：我在InAppBrowser中打开一个网站，在用户结束工作后，网站生成.pdf供用户下载，问题是pdf不下载，它打开

The scenario goes like this: I open a website in InAppBrowser, after the user ends with the work over there, the site generates a .pdf for the user to download, the problem is that the pdf does not download, it opens it in the browser.

有没有办法让它从InAppBrowser下载？我现在正在开发一个iOS应用程序，所以该解决方案将更适合iOS。

Is there a way to make it download from the InAppBrowser? I'm currently working on an iOS app, so the solution would be better for iOS.

提前感谢。

推荐答案

以下@jcesarmobile建议这是我想出的：

Following @jcesarmobile advices this is what I came up with:

首先我不得不安装< https://github.com/apache/cordova-plugin-file-transfer =nofollow> cordova-plugin-file-transfer

var url = "http://mi-fancy-url.com";
var windowref = window.open(url, '_blank', 'location=no,closebuttoncaption=Cerrar,toolbar=yes,enableViewportScale=yes');

在 windowref 上创建一个侦听器 loadstart 事件，并检查是否正在加载的是一个pdf（这是我的情况）。

Create a listener on that windowref for a loadstart event and check if what's being loaded is a pdf (that's my case).

windowref.addEventListener('loadstart', function(e) {
  var url = e.url;
  var extension = url.substr(url.length - 4);
  if (extension == '.pdf') {
    var targetPath = cordova.file.documentsDirectory + "receipt.pdf";
    var options = {};
    var args = {
      url: url,
      targetPath: targetPath,
      options: options
    };
    windowref.close(); // close window or you get exception
    document.addEventListener('deviceready', function () {
      $timeout(function() {
        downloadReceipt(args); // call the function which will download the file 1s after the window is closed, just in case..
      }, 1000);
    });
  }
});

创建处理文件下载的函数，然后将其打开：

Create the function that will handle the file download and then open it:

function downloadReceipt(args) {
  var fileTransfer = new FileTransfer();
  var uri = encodeURI(args.url);

  fileTransfer.download(
    uri, // file's uri
    args.targetPath, // where will be saved
    function(entry) {
      console.log("download complete: " + entry.toURL());
      window.open(entry.toURL(), '_blank', 'location=no,closebuttoncaption=Cerrar,toolbar=yes,enableViewportScale=yes');
    },
    function(error) {
      console.log("download error source " + error.source);
      console.log("download error target " + error.target);
      console.log("upload error code" + error.code);
    },
    true,
    args.options
  );
}

我现在面临的问题是它下载的路径，我只是无法打开它。但是，至少文件现在下载。我将不得不创建一个localStorage项目来保存不同文件的路径。

The problem i'm facing now is the path where it downloads, I just can't open it. But well, at least file is now downloaded. I will have to create a localStorage item to save the paths for different files.

在这个步骤中缺少许多验证，这只是一个例子，我做了快速检查是否有用。需要进一步验证。

Many validations are missing in this steps, this was just an example I made quickly to check if it works. Further validations are needed.

这篇关于Cordova / Ionic - 从InAppBrowser下载文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！