使用jquery ajax下载pdf文件
Download pdf file using jquery ajax
我想下载一个用于jquery ajax响应的pdf文件。Ajax响应包含pdf文件数据。我尝试过这个解决方案。我的代码如下,但我总是得到一个空白的pdf。
$(document).on('click', '.download-ss-btn', function () {
$.ajax({
type: "POST",
url: 'http://127.0.0.1:8080/utils/json/pdfGen',
data: {
data: JSON.stringify(jsonData)
}
}).done(function (data) {
var blob = new Blob([data]);
var link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = "Sample.pdf";
link.click();
});
});
鉴于此,您有两种解决方案之一:
第一个解决方案,放弃JQuery并使用XMLHTTPRequest
使用本地HTMLHTTPRequest,以下是执行您需要的的代码
var req = new XMLHttpRequest();
req.open("GET", "/file.pdf", true);
req.responseType = "blob";
req.onload = function (event) {
var blob = req.response;
console.log(blob.size);
var link=document.createElement('a');
link.href=window.URL.createObjectURL(blob);
link.download="Dossier_" + new Date() + ".pdf";
link.click();
};
req.send();
第二个解决方案,使用jquery ajax原生插件
该插件可以在这里找到,可以用于JQuery中缺少的XHR V2功能,下面是如何使用它的示例代码
$.ajax({
dataType: 'native',
url: "/file.pdf",
xhrFields: {
responseType: 'blob'
},
success: function(blob){
console.log(blob.size);
var link=document.createElement('a');
link.href=window.URL.createObjectURL(blob);
link.download="Dossier_" + new Date() + ".pdf";
link.click();
}
});
我是新手,大部分代码来自谷歌搜索。我用下面的代码下载了pdf(试错播放)。感谢您提供上面的代码提示(xhrFields)。
$.ajax({
cache: false,
type: 'POST',
url: 'yourURL',
contentType: false,
processData: false,
data: yourdata,
//xhrFields is what did the trick to read the blob to pdf
xhrFields: {
responseType: 'blob'
},
success: function (response, status, xhr) {
var filename = "";
var disposition = xhr.getResponseHeader('Content-Disposition');
if (disposition) {
var filenameRegex = /filename[^;='n]*=((['"]).*?'2|[^;'n]*)/;
var matches = filenameRegex.exec(disposition);
if (matches !== null && matches[1]) filename = matches[1].replace(/['"]/g, '');
}
var linkelem = document.createElement('a');
try {
var blob = new Blob([response], { type: 'application/octet-stream' });
if (typeof window.navigator.msSaveBlob !== 'undefined') {
// IE workaround for "HTML7007: One or more blob URLs were revoked by closing the blob for which they were created. These URLs will no longer resolve as the data backing the URL has been freed."
window.navigator.msSaveBlob(blob, filename);
} else {
var URL = window.URL || window.webkitURL;
var downloadUrl = URL.createObjectURL(blob);
if (filename) {
// use HTML5 a[download] attribute to specify filename
var a = document.createElement("a");
// safari doesn't support this yet
if (typeof a.download === 'undefined') {
window.location = downloadUrl;
} else {
a.href = downloadUrl;
a.download = filename;
document.body.appendChild(a);
a.target = "_blank";
a.click();
}
} else {
window.location = downloadUrl;
}
}
} catch (ex) {
console.log(ex);
}
}
});
使用html5可以很容易地做到这一点:
var link = document.createElement('a');
link.href = "/WWW/test.pdf";
link.download = "file_" + new Date() + ".pdf";
link.click();
link.remove();
对于那些寻求更现代方法的人,可以使用fetch API
。以下示例显示如何下载PDF
文件。使用以下代码可以轻松完成。
fetch(url, {
body: JSON.stringify(data),
method: 'POST',
headers: {
'Content-Type': 'application/json; charset=utf-8'
},
})
.then(response => response.blob())
.then(response => {
const blob = new Blob([response], {type: 'application/pdf'});
const downloadUrl = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = downloadUrl;
a.download = "file.pdf";
document.body.appendChild(a);
a.click();
})
我相信这种方法比其他XMLHttpRequest
解决方案更容易理解。此外,它具有与jQuery
方法类似的语法,无需添加任何额外的库。
当然,我建议你检查一下你正在开发的浏览器,因为这种新方法在IE上不起作用。你可以在下面的[link][1]中找到完整的浏览器兼容性列表。
重要:在本例中,我将向侦听给定url
的服务器发送JSON请求。这个url
必须设置,在我的例子中,我假设你知道这一部分。此外,还要考虑请求工作所需的标头。由于我发送的是JSON,所以我必须添加Content-Type
头并将其设置为application/json; charset=utf-8
,以便让服务器知道它将接收的请求类型。
试试这个:
$(document).on('click', '.download-ss-btn', function () {
$.ajax({
type: "POST",
url: 'http://127.0.0.1:8080/utils/json/pdfGen',
data: {
data: JSON.stringify(jsonData)
},
headers: {
'Content-Type': 'application/json; charset=utf-8'
}
}).done(function (data) {
let binaryString = window.atob(data);
let binaryLen = binaryString.length;
let bytes = new Uint8Array(binaryLen);
for (let i = 0; i < binaryLen; i++) {
let ascii = binaryString.charCodeAt(i);
bytes[i] = ascii;
}
var blob = new Blob([data], {type: "application/pdf"});
var link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = "Sample.pdf";
link.click();
});
});
相关文章:
- 下载HTML5/Javascript MOBILE应用程序中的PDF文件
- 下载所选语言的pdf文件
- JavaScript代码,用于在浏览器中显示字节数组中的PDF文件(非base64编码)
- Phonegap从PDF文件中获取内容
- 如何从地图导出图像并将其插入到新的PDF文件中
- 通过javascript获取pdf文件的表单数据
- Pdf.js:使用base64文件源而不是url来呈现Pdf文件
- 如何使用jquery在工具提示上显示pdf文件
- 在localhost/intranet上嵌入DOC、PPT、XLS、PDF文件
- 使用 php 将 pdf 文件转换为 html 文件
- 创建一个工具来打开android平板电脑上的本地pdf文件
- 将数据库中的数据转换为可下载的PDF文件
- 压缩使用 iText 创建的 PDF 文件
- 在jspdf中使用addHTML保存pdf文件失败
- 如何从输入字段在浏览器中显示PDF文件
- Cordova jsPDF-PDF生成,我在手机上找不到PDF文件
- 是否将PDF文件保存在其他应用程序可以访问的PhoneGap应用程序中?(iOS)
- web应用程序是否可以打开客户端上存在的pdf文件
- 如何使用HtmlUnit下载PDF文件
- Javascript无法识别两个不同的PDF文件