.net webapi后台返回pdf文件流，前端ajax请求下载，空白pdf排错经历

.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

https://stackoverflow.com/questions/12876000/how-to-build-pdf-file-from-binary-string-returned-from-a-web-service-using-javas/31763030#31763030

responseType说明

https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/responseType