- iOS/Objective-C 元类和类别
- objective-c - -1001 错误,当 NSURLSession 通过 httpproxy 和/etc/hosts
- java - 使用网络类获取 url 地址
- ios - 推送通知中不播放声音
我正在尝试添加下载托管在服务器中的文件的功能。要访问该文件,我必须发送 Authorization
header ,因此我必须发送 XHR 请求以从服务器获取文件。由于文件内容在一个变量中,我必须创建一个数据 url 以使其作为 href
可用。 anchor 标记的属性并以编程方式单击它以下载文件。它在几乎所有浏览器中都运行良好(IE11 除外,我为此编写了单独的代码),但在 iOS Safari(在某些版本的 iOS 中)中,它会出错。这是我正在使用的代码 -
var isBrowserIE = window.navigator && window.navigator.msSaveOrOpenBlob;
var dataHref = 'https://example.com/doc.pdf';
var xhr = new XMLHttpRequest();
xhr.open('GET', dataHref, true);
xhr.setRequestHeader('Content-Type', 'application/pdf');
xhr.setRequestHeader('Authorization', 'Bearer ' + token);
xhr.responseType = isBrowserIE ? 'blob' : 'arraybuffer';
xhr.onload = function (e) {
if (this.status == 200) {
//For IE11
if (isBrowserIE) {
// Create a new Blob object using the response data of the onload object
var blob = new Blob([this.response], { type: 'application/pdf' });
var bool = window.navigator.msSaveOrOpenBlob(blob, docName);
if (!bool) {
alert("Download failed, Please try again later");
}
} else {
var uInt8Array = new Uint8Array(this.response);
var i = uInt8Array.length;
var binaryString = new Array(i);
while (i--) {
binaryString[i] = String.fromCharCode(uInt8Array[i]);
}
var data = binaryString.join('');
var base64 = window.btoa(data);
var dataUrl = 'data:application/octet-stream;charset=utf-16le;base64,' + base64;
var element = document.createElement('a');
element.setAttribute('href', dataUrl);
element.setAttribute('download', 'doc.pdf');
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
}
} else {
alert("Download failed, Please try again later");
closeWindow();
}
};
xhr.send();
这是我可能遇到的相关错误 -
Safari cannot open the page.<br><br>The error was: “Data URL decoding failed”.
我是否遗漏了什么导致此错误的原因?该错误仅发生在 iPad 4 和 iPad 5 中,但适用于 iPad mini 和 iPhone XR。不确定为什么它可以在某些版本的 iOS 设备上运行,而在其他版本上不能运行。
最佳答案
所以,我终于想通了。这是我的最终代码,在注释中有解释(对不起,ES5 代码,我需要支持 IE11,而当前项目还没有使用 babel)-
/* exported DownloadHandler */
/* global Uint8Array*/
var DownloadHandler = (function() {
function isMobileDevice() {
return navigator.userAgent.match(/Android|iPhone|iPad|iPod|BlackBerry|Opera Mini|IEMobile/i);
}
function isChromeBrowser() {
return navigator.userAgent.match(/Crios|Chrome/i);
}
function isIEBrowser() {
return window.navigator && window.navigator.msSaveOrOpenBlob;
}
function isSafariBrowser() {
return navigator.userAgent.match(/Safari/i);
}
function getResponseType() {
// Both Desktop Chrome and IE supports blob properly
// Chrome also supports Data URI way, but it fails miserably when the file size is more than 2 MB (Not sure about the exact limit though).
if (isIEBrowser() || isChromeBrowser()) {
return 'blob';
} else if (isMobileDevice()) {
return 'arraybuffer';
}
return 'blob';
}
function getBlobUriFromResponse(response) {
var blob = new Blob([response], { type: 'application/pdf' });
var downloadUrl = URL.createObjectURL(blob);
return downloadUrl;
}
function getDataUriFromResponse(response) {
var uInt8Array = new Uint8Array(response);
var i = uInt8Array.length;
var binaryString = new Array(i);
while (i--) {
binaryString[i] = String.fromCharCode(uInt8Array[i]);
}
var data = binaryString.join('');
var base64 = window.btoa(data);
var dataUrl = 'data:application/octet-stream;charset=utf-16le;base64,' + base64;
return dataUrl;
}
function downloadFileUsingXHR(fileName, fileUrl, fileMimeType, requestType, headersList) {
var xhr = new XMLHttpRequest();
xhr.open(requestType, fileUrl, true);
xhr.setRequestHeader('Content-Type', fileMimeType);
for (var i = 0; i < headersList.length; i++) {
var header = headersList[i];
xhr.setRequestHeader(header.key, header.value);
}
xhr.responseType = getResponseType();
xhr.onload = function() {
if (this.status == 200) {
//For IE11
//IE uses blob with vendor specific code
if (isIEBrowser()) {
// Create a new Blob object using the response data of the onload object
var blob = new Blob([this.response], { type: fileMimeType });
var bool = window.navigator.msSaveOrOpenBlob(blob, fileName);
if (!bool) {
alert('Download failed, Please try again later');
}
} else {
var dataUrl;
if (this.responseType === 'blob') {
dataUrl = getBlobUriFromResponse(this.response);
} else {
dataUrl = getDataUriFromResponse(this.response);
}
var element = document.createElement('a');
// Safari doesn't work well with blank targets
if (!isSafariBrowser()) {
element.setAttribute('target', '_blank');
}
element.setAttribute('href', dataUrl);
element.setAttribute('download', fileName);
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
}
} else {
alert('Download failed, Please try again later');
}
};
xhr.send();
}
return {
downloadFileUsingXHR: downloadFileUsingXHR
};
})();
下面是如何使用上面的代码:
DownloadHandler.downloadFileUsingXHR('example.pdf', 'https://example.com/doc.pdf', 'application/pdf','GET',[{key:'Authorization',value:'Bearer ' + token}]);
稍后我可能会将其转换为一个库并在此处发布一个链接。我也会有机会完善代码
关于javascript - 在 iOS Safari 中使用 XHR 下载文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54825077/
这可能是一个非常明显的问题,但请解释一下 xhr 和 xhr.upload 之间的区别是什么? 我的用例是我正在将文件上传到服务器,但假设服务器出现故障。在这种情况下,我应该处理 xhr.onerro
这是我的场景: 我有一个 URL,可以生成管理工作区的大量导出 - 它通常约为 3mb,需要约 15 秒才能生成。 当前的实现是对按钮上带有 download 属性的 URL 的正常同步请求,以强制下
我正在执行 XMLHttpRequest,如果失败,我想回退到执行其他操作(读取本地文件),但我想在 XHR 函数 (getDBfileXHR) 本身之外执行此操作。 我也在使用 Jquery。 考虑
XMLHttpRequest 实例上有五个事件。 var xhr = new XMLHttpRequest(); xhr.onloadstart = res => { console.log(
xhr.open('put',url,false) xhr.upload.addEventListener('load',function(e){alert(xhr.responseText)},fa
我正在尝试 promisify the native XHR , 现在问题来了,当我使用下面的代码时: function request(method, url) { return new P
我想知道.. 我怎样才能得到 XHR finished loading 字符串? 基本上,我在 Google instant 的页面上,我想以字符串的形式返回搜索结果的“真实”URL。 最佳答案 如果
是否可以在 XMLHttpRequest 的 onreadystatechange 处理程序中找到作为参数发送到 XMLHttpRequest 的 send(data) 函数的数据?我认为此时它必须存
当我在 xhr.then() 中返回“结果”并且我使用 dojo 1.10.4 时遇到一些问题,请帮助我! 以下代码在dojo中使用xhr('dojo/request/xhr')连接到API: rem
这个问题在这里已经有了答案: How to structure nested Promises (3 个答案) 关闭 6 年前。 我需要做一个 promise 序列。我想使用基于标准的方法(ES6?
当执行“GET”请求时,xhr.response 和 xhr.responseText 都返回相同的值。有什么不同?有吗? 最佳答案 response 被解释为 ArrayBuffer、Blob、Do
我只需要支持主要的现代浏览器(IE10+、FF、Chrome、Safari) 我可以做这个替换吗,因为我想简化我的代码库: 来自: xhr.onreadystatechange = function
DataTables 版本:1.10.20 我目前正在使用 pipeline plugin并聆听 xhr event 。 xhr 事件按预期触发,但是回调中的 xhr 参数未定义。设置对象中还有一个
在非常高的级别上,我们单击一个命令建筑物控制点的按钮;打开或关闭灯。单击应该向服务器发送 POST 请求。问题是有时单击按钮但 POST 请求不会发出。该按钮没有指示它是否已被单击的功能(小幅增强)。
我正在尝试使用 youtube v3 API 上传视频,查看 this示例。 所以,我写了这样的东西: var xhr = new XMLHttpRequest(); xhr.open('PUT',
我正在使用 XHR GET 获取 Blade html 并尝试缓存它,这样它就不需要每次都去服务器下载它。这是我的代码。 但这不起作用并且总是转到服务器。 $.ajax({ method: "
我正在尝试为文件上传创建一个进度条,但由于某种原因,XHR 进度响应仅在最后触发一次。但是,如果我打开 firebug 窗口,它可以 100% 正常工作(在文件上传过程中触发)。我正在本地主机上测试它
我正在尝试获取 xhr 请求。 (该脚本应每 2 秒循环运行一次)这是我的脚本: function getJson() { var xhr = new XMLHttpReque
我有一个简单的 XHR 来加载“testdirectory/testpage.html” var xhr; (XMLHttpRequest) ? xhr= new XMLHttpRequest() :
我正在使用XHR npm 上的 lib 用于在 JS 应用程序的客户端发出 ajax 请求。我的代码如下所示: xhr({uri: "http://foo"},function (err, resp,
我是一名优秀的程序员,十分优秀!