话不多说，直接看过程。

一.导入插件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

<iframe :src="url" width="100%" height="100%"></iframe>

// 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)}`