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

摘要:
之前未添加:通过返回的响应组装blobvarblob=newBlob;出现的标签是一个空白的pdf。就个人而言,没有传递responseType参数。从服务器返回的类型变为字符串。当它通过数组转换为blob时,编码将异常,并返回一个空白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流字符串显示形式

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

主要参考的文章有:

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

 
 

免责声明:文章转载自《.net webapi后台返回pdf文件流,前端ajax请求下载,空白pdf排错经历》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Weblogic常用监控指标mac电脑安装nvm和node下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

js~ajax获取后端HTTP状态的几种情况

jquery发起ajax请求到后端接口,后端向前端返回数据,当然也存在后端接口直接重定向(302)到其它接口,然后再向前端返回数据,当然这种情况需要考虑跨域问题。 前端代码 //测试一下http status $.ajax({ type: "get", url: "/redirect",...

scrapy爬虫系列之四--爬取列表和详情

功能点:如何爬取列表页,并根据列表页获取详情页信息? 爬取网站:东莞阳光政务网 完整代码:https://files.cnblogs.com/files/bookwed/yangguang.zip 主要代码: yg.py importscrapy from yangguang.items importYangguangItem classYgSpide...

wangEditor粘贴word图片且图片文件自动上传功能

图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码目前限chrome浏览器使用首先以um-editor的二进制流保存为例:打开umeditor.js,找到UM.plugins['autoupload'],然后找到autoUploadHandler方法,注释掉其中的代码。加入下面的代码: //判断剪贴板的内容是否包含...

使用com.aspose.words将word模板转为PDF乱码解决方案(window下正常)

  最近在做电子签名过程中,需要将合成的电子签名的word文件(正常)转换为pdf文件时,在开发平台window下转换没有问题,中文也不会出现乱码。但是将项目部署到正式服务器(Linux)上,转换出来的pdf中文就出现乱码。在网上找了很久,才找到原因,现在将解决办法分享给大家 1、问题原因分析   在windos下没有问题但是在Linux下有问题,就说明不...

CORS跨域实现思路及相关解决方案

本篇包括以下内容: CORS 定义 CORS 对比 JSONP CORS,BROWSER支持情况 主要用途 Ajax请求跨域资源的异常 CORS 实现思路 安全说明 CORS 几种解决方案 自定义CORSFilter Nginx 配置支持Ajax跨域 支持多域名配置的CORS Filter keyword:cors,跨域,ajax,403,fi...

Java中常用的操作PDF的类库

iText iText是一个能够快速产生PDF文件的java类库。iText的java类对于那些要产生包含文本,表格,图形的只读文档是很有用的。它的类库尤其与java Servlet有很好的给合。使用iText与PDF能够使你正确的控制Servlet的输出。 该项目主页:http://www.lowagie.com/iText/ JFreeReport...