 
 获得徽章 0
    赞了这篇沸点
  
 
    赞了这篇文章
  
 
    赞了这篇文章
  
 
    赞了这篇文章
  
 
    赞了这篇沸点
  
 
    赞了这篇沸点
  
   #每日快讯#  接收后端返回的pdf文件流 前端使用Vue-pdf实现预览(分页)
步驟1:儅後端返回的是這種類型的數據時。图一所示。
那么需要将此数据进行拼接。拼接成可以下载的文件地址。
步骤2:将文件流转成blob地址,使用fetch抓取文件流,返回了一个对象,然后再使用blob的方法,每一个地方的返回的数据样式都有,图二所示。
**通过blob方法返回的Blob对象的type一定是“application/pdf”,否则肯定是文件流是错的。
步骤三。项目安装npm install vue-pdf --save,使用vue-pdf来展示。
需要component注册。图三所示。
这样一来就可以在页面很好展示pdf文件了。图四所示。  
步驟1:儅後端返回的是這種類型的數據時。图一所示。
那么需要将此数据进行拼接。拼接成可以下载的文件地址。
步骤2:将文件流转成blob地址,使用fetch抓取文件流,返回了一个对象,然后再使用blob的方法,每一个地方的返回的数据样式都有,图二所示。
**通过blob方法返回的Blob对象的type一定是“application/pdf”,否则肯定是文件流是错的。
步骤三。项目安装npm install vue-pdf --save,使用vue-pdf来展示。
需要component注册。图三所示。
这样一来就可以在页面很好展示pdf文件了。图四所示。
      展开
    
  
          7
        
 
          6
        
![[捂脸]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_28.8981538.png)
![[机智]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_51.e6d838e.png)
![[流泪]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_6.dde0d83.png)