移动端H5页面PDF操作及预览

环境：nodejs

适配：移动端主流浏览器支持企业微信低版本

插件：pdfjs-dist @2.6.347 

方案一  本地构建

拉取项目：

git clone https://github.com/mozilla/pdfjs-dist.git

 全局安装gulp

 npm install -g gulp-cli

 安装项目依赖

npm install 

 预制打包

 gulp generic 

 打包后复制build文件下的generic，里面有build和web两个文件文件

 

 

 把generic复制到本地根目录下

 

把接口返回的PDF数据流转换为blob

 

 let href = window.URL.createObjectURL(fileBlob)
      let page = this.$router.resolve({
             path: '/path', //页面路由
             query: {
                 fileName: fileName,
                 url: href           //传递参数
             }
        })
    window.location.href = page.href

 

 

 通过iframe的方式打开页面（解决低版本浏览器不兼容问题）

 方案二

通过npm包下载， 可根据项目需求自定义页面

 js引用PDF实例，通过canvas展示