Cordova / Ionic - 从InAppBrowser下载文件

Question

Cordova / Ionic - 从InAppBrowser下载文件

ioscordovainappbrowser

9

场景如下：我在InAppBrowser中打开一个网站，在用户完成工作后，该网站会生成一个.pdf供用户下载，问题是pdf文件不会下载，而是在浏览器中打开。

有办法让它从InAppBrowser中下载吗？我现在正在开发一个iOS应用程序，所以最好提供适用于iOS的解决方案。

先行致谢。

- Ariel

1

如果用户被重定向到一个.pdf文件或不同于用户完成工作的网址，可能可以使用loadstart事件来检测.pdf的网址，然后使用filetransfer插件下载，或者使用带有_system选项的inAppBrowser打开Safari，Safari将显示一个“用...打开”消息，用户可以使用支持pdf文件的任何应用程序打开pdf。 - jcesarmobile

该网站提供一个按钮来下载 .pdf 文件，当用户点击该按钮时，该 pdf 文件会在“InAppBrowser”中打开。我将尝试添加“loadstart”事件的解决方案并回复您。我猜如果它起作用了，我也必须处理查看 pdf 的窗口。感谢您的建议。 - Ariel

2

如果在loadstart事件中检测到PDF的URL，那么你可以使用ref.close()来在下载开始后关闭inAppBrowser窗口。 - jcesarmobile

2个回答

0

使用IAB插件打开窗口并添加事件监听器 ref = window.open(url, "_blank"); ref.addEventListener('loadstop', loadStopCallBack);
在InAppBrowser窗口中使用https://xxx.pdf">documentName调用操作

实现loadStopCallBack函数

function loadStopCallBack(refTemp) {
    if(refTemp.url.includes('downloadDoc')) {
        rtaParam = getURLParams('downloadDoc', refTemp.url);

        if(rtaParam != null)
            downloadFileFromServer(rtaParam);
        return;
    }
}

function getURLParams( name, url ) {
    try {
        if (!url)
            url = location.href;
        name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
        var regexS = "[\\?&]" + name + "=([^&#]*)";
        var regex = new RegExp(regexS);
        var results = regex.exec(url);
        return results == null ? null : results[1];
    } catch (e) {
        showSMS(e);
        return null;
    }
}

创建下载方法后

function downloadFileFromServer(fileServerURL){
try {
    var Downloader = window.plugins.Downloader;
    var fileName = fileServerURL.substring(fileServerURL.lastIndexOf("/") + 1);

    var downloadSuccessCallback = function(result) {
          console.log(result.path); 

    };

    var downloadErrorCallback = function(error) {
        // error: string
        console.log(error);
    };

    //TODO cordova.file.documentsDirectory for iOS

    var options = {
        title: 'Descarga de '+ fileName, // Download Notification Title
        url: fileServerURL, // File Url
        path: fileName, // The File Name with extension
        description: 'La descarga del archivo esta lista', // Download description Notification String
        visible: true, // This download is visible and shows in the notifications while in progress and after completion.
        folder: "Download" // Folder to save the downloaded file, if not exist it will be created
    };

    Downloader.download(options, downloadSuccessCallback, downloadErrorCallback);
} catch (e) {
    console.log(e);
}

}

你可以在这里获取插件 https://github.com/ogarzonm85/cordova-plugin-downloader

它很好用也很容易

- ogarzonm

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ariel · Accepted Answer

遵循@jcesarmobile的建议，这是我想到的：

首先，我需要安装cordova-plugin-file-transfer

打开URL

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

在该`windowref`上创建一个监听器，以检查正在加载的内容是否为pdf文件（这是我的情况），监听`loadstart`事件。

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 () {
      setTimeout(function() {
        downloadReceipt(args); // call the function which will download the file 1s after the window is closed, just in case..
      }, 1000);
    });
  }
});

创建用于处理文件下载并打开文件的函数：

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项目来保存不同文件的路径。

在这些步骤中缺少许多验证，这只是我快速制作的示例，以检查其是否有效。需要进一步验证。

Cordova / Ionic - 从InAppBrowser下载文件

打开URL

在该windowref上创建一个监听器，以检查正在加载的内容是否为pdf文件（这是我的情况），监听loadstart事件。

创建用于处理文件下载并打开文件的函数：

在该`windowref`上创建一个监听器，以检查正在加载的内容是否为pdf文件（这是我的情况），监听`loadstart`事件。