在使用uniapp开发项目时，有个需求是用户上传完pdf文件，可以预览上传的pdf。
和后端对接接口时候，发现在上传完文件后，调用下载接口，里面返回了pdf文件流，如下图所示：

首先想到的是在uni-app的插件市场，看看能否找到满足需求的插件，一番查找，并没有找到合适的。
通过查找资料，最后决定使用pdf.js
使用步骤：

1. 官网下载 pdf.js
2. 项目根目录下新建hybrid文件夹，将下载的pdf.js压缩包解压后，复制到hybrid下的html文件夹中

3. 在pages文件夹中新建一个filePreview页面，页面代码如下：

   <template>
     <view>
       <web-view :src="allUrl"></web-view>
     </view>
   </template>
   
   <script>
     export default {
       data() {
   	  return {
   	    viewerUrl: '/hybrid/html/web/viewer.html', 
   		allUrl: ''
   	  }
   	},
   	onLoad(options) {
   	  this.allUrl = this.viewerUrl + '?file=' + options.url
   	}
     }
   </script>
   

4. 从接口中拿到pdf文件流，并进行encodeURIComponent编码

   uni.request({
     url: `/sys/affix/download`,
     data: data,
     method: 'POST',
     responseType: 'arraybuffer',
     header: {
       Authorization: sessionStorage.getItem('token')
     },
     success: res => {
       let pdfData = res.data
       let blob = new Blob([pdfData], {
         type: 'application/pdf;charset=UTF-8'
       })
       pdfData = window.URL.createObjectURL(blob)
       this.url = encodeURIComponent(pdfData) // 稍后将该地址传入上面我们新建的filePreview页面中
     },
     fail: err => {
       console.log(err)
     }
   })
   

5. 点击文件，跳转到filePreview页面，就可以进行预览了

   uni.navigateTo({
     url: '../filePreview/index?url=' + this.url
   })
   

   

注意：

• 接口responseType设置为arraybuffer；
• 若页面空白，无报错信息，可以换个pdf.js版本（这个问题当时折腾了两天，没有报错信息，查找资料，有的说地址后面加个&.pdf,也不行，换个版本就好啦）