H5通过流的方式预览PDF文件实践总结：

前言：

最近领导让研究H5如何通过后端返回流的方式去预览PDF文件，通过实践，现总结如下：

一.导入插件pdf.js，先去官网下载插件：
http://mozilla.github.io/pdf.js/getting_started/#download，

插件目录如下图：

当下载下来后，为做测试，将目录文件直接部署在线服务器，去直接访问viewer.html看是否能成功，输入地址： ‘在线地址域名:’ + pdfTest/pdf/web/viewer.html 初次访问成功，如下图：

当viewer.html后面没有接入file=pdf文件时，会默然访问pdf文件，默认地址如下图：

测试是否能访问其它图片，现将测试pdf文件放入viewer.html同级目录：如下图：

然后在浏览器中访问该pdf文件，浏览器输入地址：
‘在线地址域名:’ + pdfTest/pdf/web/viewer.html + ‘?file=test.pdf’，访问成功！(当访问pdf文件时，需要加入.pdf后缀才能正常访问，否则报错)

二.将引起跨域报错的地方注释(如果不注释,当viewer.html页面的域和pdf文件域不一致的时候会报错)如下图：

三.通过iframe嵌套方式去预览pdf

// pdfUrl:  返回流文件的pdf地址（返回的地址可直接在浏览器中打开）
// baseUrl.pageRoot: pdf插件在线服务器地址

// file=后面跟的pdf地址也有参数，所以必须选择 encodeURIComponent 进行对url的编码
// viewer.js里有方法parseQueryString(query)取到这个pdf文件地址后，会进行decodeURIComponent解码

this.url = `${baseUrl.pageRoot}pdf/web/viewer.html?file=${encodeURIComponent(pdfUrl)}`