Cordova / Ionic - 从 InAppBrowser 下载文件
Cordova / Ionic - Download file from InAppBrowser
场景是这样的:我在InAppBrowser打开一个网站,用户在那边工作结束后,网站生成一个.pdf供用户下载,问题是pdf下载不下来,它在浏览器中打开它。
有没有办法让它从 InAppBrowser 下载?我目前正在开发 iOS 应用程序,因此该解决方案更适合 iOS.
提前致谢。
根据@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');
为 loadstart
事件在 windowref
上创建一个侦听器,并检查正在加载的内容是否为 pdf(我的情况就是如此)。
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 项来保存不同文件的路径。
此步骤中缺少许多验证,这只是我快速制作的一个示例以检查它是否有效。需要进一步验证。
使用 IAB 插件打开你 window 并添加一个事件侦听器
ref = window.open(url, "_blank");
ref.addEventListener('loadstop', loadStopCallBack);
在 InAppBrowser window 中使用 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
它有效并且太简单了
场景是这样的:我在InAppBrowser打开一个网站,用户在那边工作结束后,网站生成一个.pdf供用户下载,问题是pdf下载不下来,它在浏览器中打开它。
有没有办法让它从 InAppBrowser 下载?我目前正在开发 iOS 应用程序,因此该解决方案更适合 iOS.
提前致谢。
根据@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');
为 loadstart
事件在 windowref
上创建一个侦听器,并检查正在加载的内容是否为 pdf(我的情况就是如此)。
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 项来保存不同文件的路径。
此步骤中缺少许多验证,这只是我快速制作的一个示例以检查它是否有效。需要进一步验证。
使用 IAB 插件打开你 window 并添加一个事件侦听器 ref = window.open(url, "_blank"); ref.addEventListener('loadstop', loadStopCallBack);
在 InAppBrowser window 中使用 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
它有效并且太简单了