好吧,让我们说我有地方存储的文档数据,让我们随意服食this pdf。
问题#1。我想要做的就是让一个AJAX调用此URL(因为我需要通过一些认证报头,它是跨域)。然后乘坐返回的数据,为它创建一个blob url,追加一个iFrame的DOM,并指导src
到BLOB网址。
目前我的代码如下所示:
$.ajax({
url:'http://www.grida.no/climate/ipcc_tar/wg1/pdf/tar-01.pdf'
}).done(function(data){
var file = new Blob([data], {type:'application/pdf'}),
url = URL.createObjectURL(file),
_iFrame = document.createElement('iframe');
_iFrame.setAttribute('src', url);
_iFrame.setAttribute('style', 'visibility:hidden;');
$('#someDiv').append(_iFrame);
});
不幸的是,我得到一个“未能生成PDF”中的iFrame。
问题2。我想这导致文件下载提示。不知道如何保证这一点考虑到PDF的自然只是在iFrame中显示。
jQuery.ajax目前不支持的斑点,看到这个bug report #7248被封闭,wontfix。
然而,它很容易做到的斑点XHR没有jQuery的:
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://www.grida.no/climate/ipcc_tar/wg1/pdf/tar-01.pdf', true);
xhr.responseType = 'blob';
xhr.onload = function(e) {
if (this.status == 200) {
// Note: .response instead of .responseText
var blob = new Blob([this.response], {type: 'application/pdf'}),
url = URL.createObjectURL(blob),
_iFrame = document.createElement('iframe');
_iFrame.setAttribute('src', url);
_iFrame.setAttribute('style', 'visibility:hidden;');
$('#someDiv').append(_iFrame)
}
};
xhr.send();
从HTML5rocks无耻地复制。
如果jQuery的做支持BLOB类型,它可能是简单的:
$.ajax({
url:'http://www.grida.no/climate/ipcc_tar/wg1/pdf/tar-01.pdf',
dataType:'blob'
})...
我已经使用@Ciantic答案来适应我的答案。我避免使用iframe的OBJ,用户可以直接从网页下载文件。
var link = 'http://www.grida.no/climate/ipcc_tar/wg1/pdf/tar-01.pdf';
$("body").addClass("loading"); // adding the loading spinner class
var xhr = new XMLHttpRequest();
xhr.open('GET',link,true);
xhr.responseType = 'blob';
xhr.onload = function(e){
if (this.status == 200) {
var a = document.createElement('a');
var url = window.URL.createObjectURL(new Blob([this.response], {type: 'application/pdf'}));
a.href = url;
a.download = 'report.pdf';
a.click();
window.URL.revokeObjectURL(url);
$('body').removeClass("loading"); //removing the loading spinner class
}else{
$('body').removeClass("loading") //removing the loading spinner class
console.log(this.status);
alert('Download failed...! Please Try again!!!');
}
};
xhr.send();
var src_url = your url here;
var contentDisposition = 'AlwaysInline';
var src_new = src_url.replace(/(ContentDisposition=).*?(&)/, '$1' + contentDisposition + '$2');
通过这样做,你将能够查看而不是下载它的PDF,
头ContentDisposition应该是“AlwaysInline”,那么只有它会显示你的文件,而不是下载它。