我想下载一个pdf文件的
jquery ajax响应. Ajax响应包含pdf文件数据.我试过这个
solution.我的代码如下,但我总是得到一个空白的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在使用AJAX请求加载二进制数据时有一些问题,因为它还没有实现一些HTML5 XHR v2功能,请参阅这个
enhancement request和
discussion
鉴于此,您有两个解决方案之一:
第一个解决方案,放弃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-native插件
该插件可以在here找到并且可以用来在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(); } });