前言：在项目开发中，我们有时候经常会遇到在线解析游览PDF的功能，如果，想实现在线游览pdf，可以使用pdf.js实现该功能。而pdf.js核心部分是pdf.js和pdf.worker.js，一个负责API解析，一个负责核心解析。

一、实现pdf预览主要有两种方式：

       1.使用pdf.js已经写好的viewer.html页面，需要将pdf.js代码放到服务器上，因为放到本地包有点大（这种方式，展示的pdf较为清晰，而且，方便用户进行放大或者缩小的操作，体验较好，推荐这种方式）；

       2.将pdf文件渲染成canvas（这种方式，展示的pdf稍微有点模糊）。

 

下面，详细说下在项目中，两种方式的具体使用方法和过程中遇到的问题。

二、具体运用

       1.第一种方式：使用viewer.html，已读取文件流的方式在线展示pdf文件；

       （1）下载pdf.js:

       官网下载地址：https://mozilla.github.io/pdf.js/getting_started/#download

       下载后将pdf.js放到服务器上，如：http://127.0.0.1:500/lib/pdf.js

       （2）使用iframe标签去显示：

<!--pdf展示-->
<div ng-if="deTailsinfo.showPdfFlagRun" style="position:fixed;width:100%;height:100%;top:0;left:0;background:rgba(1,1,1,0.5);z-index:9999;text-align:center;"><div style="width:98%;height:90%;border-radius:10px;box-shadow:0 0 10px #3268d2;background:#ffffff;margin-top:1%;"><div class="iframe-body-sty" style="height:100%;"><iframe src="{{filePath}}" style="height:100%;width:100%;" name="{{filePath}}"></iframe></div></div><img class="div-cancel" style="margin-top:10px;" src="img/close.png" ng-click="closePdfDetails()">
</div>

        （3）css样式：

.div-cancel{width:44px;height: 44px;border-radius: 22px;background-color:#9e9e9e;box-shadow:0 0 10px #777777;
}

      （4）js内容：

$rootScope.deTailsinfo.showPdfFlagRun = true;
//$scope.fliePath = 'lib/pdf.js/web/viewer.html?file='+'http://127.0.0.1:500/data/162_CPTK.pdf'; //本地开发环境
$scope.fliePath = 'lib/pdf.js/web/viewer.html?file='+PdfDetails+$rootScope.deTailsinfo.statements[idx].fileName; //测试环境
console.log($scope.fliePath);

var PdfDetails = "http://xxxxxxx.com/zytTest/zyt_res/share/file/static/clause/";

  如果，在本地采用127的地址可以打开pdf文件，本地测试没有问题的话，发到服务器上的文件，改成测试环境的域名地址就可以线上访问了。

 （5）注意 ：

        ①在本地测试的时候，注意需要把对应的pdf文件放置在与js路径对应的文件夹下面，本文中对应的地址为“data/162_CPTK.pdf”，如下图所示：

        ② 如果，需要检查文件是否在本地存在，是否可以访问，可以在游览器输入如下地址“http://127.0.0.1:500/data/162_CPTK.pdf”，如果可以打开，就代表文件存在，此方法同时可以用于测试环境线上检查文件是否存在。

 

   2.第二种方式：将PDF文件渲染成canvas

   （1）安装并引入pdf.js

   npm i pdfjs-dist

   import PDFJS from 'pdfjs-dist' 

  （2） html部分:

<template>
<div class="page">
<div class="termBox" id="pdf-containerTF" v-for="(item,index) in termArr" :key="index">
<div class="termBox_title"><span>{{item.title}}</span></div>
<div class="termBox_body clearBt"><div class="termBox_body_toggle" @click="showDetail(index)"><span class="float_lt">查看详情</span><img class="float_rt" :class="item.status?'rotated':''" src="@/assets/images/jiantou_icon1.png" /></div><div class="termBox_body_main" v-show="item.status"><div><div :id="'pdfPop_'+index" class="pdfPop"></div></div></div>
</div>
</div>
</div>
</template>

  （3） 在methods里面加载pdf文件：

<script>
/*eslint-disable*/
created(){
},
methods:{showDetail(idx){this.termArr[idx].status = !this.termArr[idx].status;let path  = this.termArr[idx].pdfPath;if(!this.pdfContain[idx]){this.openPdfDialog(path,idx);}},openPdgDialog(path,idx){let that = this;var busi = {urlPath: path}that.TOOL.apiAxios('POST','ZYT_TB_027',busi,function(status,res){if(status=='1'){that.pdfContain[idx] = res.item.file;that.TOOL.showPdfFileTF(res.item.file,idx);}})},
},
components：{},
data(){return {termArr:[{title:"盛世颐享人生年金",pdfPath:"/share/file/static/TPYX2018.pdf",status:false},{title:"盛世颐享人生年金",pdfPath:"/share/file/static/TPYX2018WN.pdf",status:false},],pdfContain:[],}
};
</script>

   （4）css文件：

<style scoped>
.page{background:#f3f3f3;padding-top:10px;}
.termBox{background:#fff;}
.termBox_title{background:#fff4e4;padding:10px 0;}
.termBox_title span{color:#a7824b;border-left:5px solid #a7824b;padding-left:10px;font-size:16px;}
.termBox_body{}
.termBox_body_toggle{height:20px;padding:10px;}
.termBox_body_toggle img{position:relative;top:4px;}
.termBox_body_main{padding:10px;}
.termBox_body_main>div{height:300px;border:1px solid #c9a363;border-radius:6px;overflow-y:auto;}
@media screen and (min-width: 1300px) and (max-width: 1590px){.termBox_body_main>div{height:500px;}
}
@media screen and (min-width: 1600px) {.termBox_body_main>div{height:560px;}
}
.pdfPop{height:100%;}
.rotated{transform: rotate(180deg);}
</style>

 三、遇到的坑

        这次项目中采用了，第一种方法来展示pdf文件，改善之前采用采用第二种方法不是很清晰的问题。

       项目为H5页面的链接，可以同时镶嵌在APP里面使用。但是，出现了在测试环境，链接可以打开PDF，安卓和ios里面可以打开；但是，在预上线环境，链接可以打开PDF，iosAPP里面可以打开，安卓APP里面打不开（部分机型有问题，报错的为华为p30 pro），报错信息如下：(PDF.js v2.1.233(build:291e62b4)信息：Failed to fetch)

     后来，在网上查询， 有例子说是跨域问题，后来，让安卓的同事抓报错信息，发现确实如此，报错信息如下：

09-24 15:40:40.940 7323-7323/? I/chromium: [INFO:CONSOLE(0)] "Access to fetch at 'http://uattest......com/zytPre/zyt_res/share/file/static/clause/8145_1.pdf' from origin 'http://pretest........com:8001' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.", source: http://pretest.......com:8001/zytPre/lib/pdf.js/web/viewer.html?file=http://uattest.......com/zytPre/zyt_res/share/file/static/clause/8145_1.pdf (0)
09-24 15:40:40.943 7323-7323/? I/chromium: [INFO:CONSOLE(1)] "Uncaught (in promise) DataCloneError: Failed to execute 'postMessage' on 'Worker': TypeError: Failed to fetch could not be cloned.", source: http://pretest......com:8001/zytPre/lib/pdf.js/build/pdf.js (1)
09-24 15:40:40.945 7323-7323/? I/chromium: [INFO:CONSOLE(1036)] "Uncaught (in promise) Error: 载入 PDF 时发生错误。", source: http://pretest.......com:8001/zytPre/lib/pdf.js/web/viewer.js (1036)

   将PDF文件的地址，放在游览器上加载，也确实找不到文件：

   然后，将测试环境域名改成和预上线环境一样的域名，这样，文件就可以访问，没有问题了。

   参考博客：pdf.js的使用实例  https://www.jianshu.com/p/9cd4840f9323