使用PDF.js实现前端和手机端网页预览PDF文件（可定制，支持本地文件、Base64编码和远程URL跨域方式）

1.插件下载地址：https://mozilla.github.io/pdf.js/

下载后解压pdfjs-1.10.88-dist.zip文件后得到：

2.把pdfjs-1.10.88-dist放到项目静态资源中，在自己的页面中通过iframe链接到pdfjs-1.10.88-dist/web/viewer.html文件中。

3.访问自己的页面，默认就是本地文件的方式打开PDF文件，可自行指定viewer.js文件中

DEFAULT_URL的值为需要预览的文件路径，可以把下图的代码行注释掉，到viewer.html中嵌入<script>标签在里面重新定义该变量为需要预览的本地文件。

4.Base64方式预览

（1）界面定制：默认的viewer.html页面功能太强大了，在手机端项目不需要，这里会提供快速的裁剪代码。

先给出效果图：

（2）你需要copy的代码（完全不用修改，但是一定要把步骤3中的代码行注释掉！！）

在viewer.html文件中：

<script src="../build/pdf.js"></script>和<script src="viewer.js"></script>之间插入下面的代码

<script src="../build/pdf.js"></script><script type="text/javascript">function getBase64Data() {// 优先从Session中获取let key = "_base64DataStr";let result = sessionStorage.getItem(key);if (result)return result;return localStorage.getItem(key);// console.log(window.parent.name.length);// return window.parent.name;}// console.log(document.location.search);var BASE64_MARKER = ';base64,'; //声明文件流编码格式var preFileId = "";var pdfAsDataUri = getBase64Data(); //pdf文件的base64码，通过session/local传递base64if (!pdfAsDataUri) {console.error("SessionStorage中没有_base64DataStr对象");}// console.log(pdfAsDataUri);var pdfAsArray = convertDataURIToBinary(pdfAsDataUri);DEFAULT_URL = pdfAsArray;//编码转换function convertDataURIToBinary(dataURI) {//[RFC2045]中有规定: Base64-行不能超过76字符，超过则添加回车换行符。因此需要把base64字段中的换行符，回车符给去掉。var base64Index = (dataURI + '').indexOf(BASE64_MARKER) + BASE64_MARKER.length;var newUrl = dataURI;newUrl = dataURI.substring(base64Index).replace(/[\n\r]/g, '');var raw = newUrl;try {raw = window.atob(newUrl); //这个方法在ie内核下无法正常解析。} catch (e) {console.error(e);}var rawLength = raw.length;//转换成pdf.js能直接解析的Uint8Array类型var array = new Uint8Array(new ArrayBuffer(rawLength));for (i = 0; i < rawLength; i++) {array[i] = raw.charCodeAt(i) & 0xff;}return array;}</script><script src="viewer.js"></script>

（3）裁剪代码（直接copy即可）

不要试图去删掉viewer.html中多余功能的html元素，因为在js文件中会根据这些元素绑定功能！！

在viewer.html中最下面的</body>前添加如下代码：

<!--隐藏多余的交互元素-->
<script type="text/javascript">let ids = ["sidebarToggle", "toolbarButtonSpacer", "toolbarViewerRight"];ids.forEach(value => {let dom = document.getElementById(value);if (dom) {dom.style.display = "none";}})let scales = document.getElementsByClassName("splitToolbarButton");if (scales && scales.length >= 4) {scales[3].style.marginLeft = "-80px";}
</script>

（4）你需要准备的就是在预览前，往你的sessionStorage或者localStorage中存入PDF文件的base64编码，键为代码中的_base64DataStr，如：data:application/pdf;base64,JVBERi0xLjcKJcKzx9gNCjEgMCBvYmoNPDwv......

5.远程URL跨域方式

5.1 先说本地pdf文件访问的另一种比较方便的访问形式：url传参

假设你的插件存放在assets目录中，则也可通过url的方式浏览本地PDF文件（前面所有改动撤销，功能隐藏的裁剪代码随意）
支持相对路劲，如果路径有中文或特殊字符需要转码，推荐使用encodeURIComponent()方法。
iframe的src="assets/pdfjs-1.10.88-dist/web/viewer.html?file=compressed.tracemonkey-pldi-09.pdf"
不使用iframe方式也可以直接通过浏览器地址栏访问，前面带上域名，支持相对路径！！

5.2 如果服务端支持访问pdf文件返回文件流的，上面的file参数可指向文件流接口，如：

http://hocalhost:8100/assets/pdfjs-1.10.88-dist/web/viewer.html?file=encodeURIComponent(文件流接口访问URL)

tip1：文件流是普通的输出流，并非文件的base64编码！！

tip2：如果viewer.html跟访问文件接口url不在同一个服务器上会出现跨域问题，按下图所示修改viewer.js来解决跨域问题（注释掉红色框部分的代码即可）：