.net webapi后台返回pdf文件流,前端ajax请求下载,空白pdf排错经历
先上代码:
后台webapi代码:
[HttpGet]
[Route("{manifestId}")]
public IHttpActionResult FindManifestPdfById([FromUri]string manifestId)
{
byte[] result = _manifestService.GetData(manifestId);
HttpResponseMessage response = new HttpResponseMessage(HttpStatusCode.OK);
response.Content = new StreamContent(new MemoryStream(result));
response.Content.Headers.Add("Access-Control-Expose-Headers", "Content-Disposition");
response.Content.Headers.ContentType = new MediaTypeHeaderValue("application/pdf");
response.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment")
{
FileName = manifestId + ".pdf",
};
return this.ResponseMessage(response);
}
前端代码:这边用的是angularjs,实现代码大同小异
function downloadFile(manifestUrl) {
$http({
url: manifestUrl,
method: 'GET',
responseType: "blob",
params: {},
headers: {
'Content-Type': 'application/pdf',
}
}).success(function (response, status, headers, config) {
Export(response, 'abc.pdf');
}).error(function (response) {
});
}
//文件流下载
function Export(blob, fileName) {
if ('download' in document.createElement('a')) { // 非IE下载
var elink = document.createElement('a');
elink.setAttribute("download", fileName);
elink.style.display = 'none';
elink.href = URL.createObjectURL(blob);
document.body.appendChild(elink);
elink.click();
URL.revokeObjectURL(elink.href);// 释放URL 对象
document.body.removeChild(elink);
} else { // IE10+下载
navigator.msSaveBlob(blob, fileName);
}
}
这边最最最重要的一行代码是请求时添加responseType: "blob",参数。
之前没有添加:
通过返回的response组装blob
var blob = new Blob([data], {type: 'application/pdf'});
出来的标签死活是空白pdf,个人感觉是没有传responseType参数,服务器传回来的类型变成了字符串,再通过数组转成Blob时,编码就会异常,返回了空白pdf。
pdf流字符串显示形式
主要参考的文章有:
https://stackoverflow.com/questions/34436133/pdf-is-blank-when-downloading-using-javascript
responseType说明
https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/responseType