前端实现pdf预览

前言：项目中之前pdf预览是客户端andrio实现的，现在需要前端H5自己实现预览功能，项目是基于vue的H5项目，记录一下pdf预览功能实现的过程和问题

一、利用iframe实现pdf预览

1、实现过程

将pdf路径设置给iframe的src属性

create(){
//路由路径上获取pdf路径参数
 var extension = this.$route.query.pdfSrc.split('.').pop().toLowerCase()
    console.log(extension, 'extensionextension')
    if (extension == 'pdf') {
      this.pdfSrc = `${this.$route.query.pdfSrc}#toolbar=0`
    } else {
      this.pdfSrc = 'http://view.officeapps.live.com/op/embed.aspx?src=' + this.$route.query.pdfSrc
    }

}

2、遇到的问题

电脑上测试正常，但是安卓端会出现空白页和直接跳转下载的现象，解决思路：客户端同事推荐用pdf.js,然后在网上查找发现，vue有一个插件vue-pdf,是基于pdf.js封住的，因此决定采用插件vue-pdf实现

二、vue-pdf插件实现预览

1、实现过程

下包

npm i vue-pdf

引入并使用

 部署到测试线app中测试还是存在空白页问题，于是换成插件pdfH5

三、pdfH5实现预览

下包

npm i pdfh5

代码实现

  
    
    
  



.pdfjs {
  height: 100vh !important;
}
.pdf-container {
  width: 100%;
  height: 100%;
}

最终测试，该方案可以。