Vue前端接收后台二进制文件的方式

最新推荐文章于 2024-07-12 10:38:29 发布

hejiqiang666

最新推荐文章于 2024-07-12 10:38:29 发布

阅读量1.2k

点赞数

分类专栏： Vue 文章标签： js vue

本文链接：https://blog.csdn.net/hejiqiang666/article/details/110039291

版权

Vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

这篇博客介绍了两种HTTP请求方式在处理PDF下载时的应用。对于简单的GET请求，展示了一个使用URL直接加载PDF的例子；而对于POST请求或参数较多的情况，通过axios库发送POST请求，并在响应后处理blob数据以实现PDF文件的下载。

摘要由CSDN通过智能技术生成

1.如果是是get请求，且参数只有很少,例如：

location.href = `${process.env.VUE_APP_API_BASE_URL}xxx/xxxx/printOrderPdf?id=${this.baseInfo.id}`

2.如果是post请求，或者参数很多则：

this.$http({
 method: 'post',
 url: 'xxx/xxx/printOrderPdf',
 data:this.pdfParams,//查询所需参数
 responseType: 'blob'
}).then((resp) => {
 if (resp.status === 200) {
  let blob = new Blob([resp.data])
  let elm = document.createElement('a');
  //创建下载的链接
  let href = window.URL.createObjectURL(blob); 
  elm.href = href;
  elm.download = 'XXXX.PDF'; 
  document.body.appendChild(elm);
  elm.click(); 
  //下载完成移除元素
  document.body.removeChild(elm);
 //释放掉blob对象
  window.URL.revokeObjectURL(href); 
 } else {
  this.visibleAlert = true
  this.visibleAlertText = "导出PDF失败"
 }
}).catch((error) => {
 console.log(error)
})