.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

 
posted on 2020-05-14 11:52  jeffh  阅读(3762)  评论(0编辑  收藏  举报