可以用 a标签 或者window.open

1
npm install --save vue-pdf
注意路径。别在桌面调出来个终端安装了，这种直接打回去重学Vue。

vue-pdf 初体验：

安装完之后，使用vue-pdf非常简单，和其他的组件并没有什么不同，上代码：

首先我们需要引入这个组件：

然后在页面使用vue-pdf,只需要添加标签：

8


重启你的项目，访问这个界面，你大概率会发现pdf已经成功显示在你的界面上了。这没有任何问题，但是，正当你准备拿起一根烟，点上，伴着舒适的《美丽的梭罗河》，欣赏你成功的杰作的时候，你会发现，我擦，为啥只有一页，当玻璃杯碰在一起，满世界都是梦破碎的声音。

所以，这只是初体验，如果你的pdf只有一页，这样写当然没什么问题，但是当我们呢pdf 有很多页的时候，你会发现，这行不通了。所以，接下来，我们来看看怎么让它显示多页。

vue-pdf 渐入佳境：
其实，想要显示多页也没那么复杂，你每次就显示一页，我，直接v-for 循环，直接显示完，简单粗暴。

页面代码:



各个属性：

url ：pdf 文件的路径，可以是本地路径，也可以是在线路径。
numPages ： pdf 文件总页数。
getNumPages 计算总页数，顺便给url和numPages赋值。

唯一需要大家注意的是这句：

this.getNumPages(“http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf”)
注意啊，这句不一定非要写到mounted里面，你想写哪就写哪，比如你前端请求后端，后端返回一个pdf 的url，在那里写就行，写在你需要的地方。

vue-pdf 轻车熟路：
很多人看到这，就这，就这？万一，我pdf有一千页，我浏览器还不得裂开，我追求的是那种在微醺的下午，一页一页的翻看的感觉，你能给我吗？

其他骚操作：

1
2
3
4
5
6
7
8
// 打印全部
pdfPrintAll() {
this.KaTeX parse error: Expected 'EOF', got '}' at position 19: …s.pdf.print() }̲, // 打印指定部分 pdf…refs.pdf.print(100, [1, 2])
},
具体样式什么的我就不贴出来了，这些都不是重点，完全可以改成自己喜欢的。

成品展示：

其他问题以及解决方案：
跨域问题：
网上用pdf.js 很多都会遇到跨域问题，这个我今天实际应用到自己的项目里面了，由于我服务端设置了跨域，所以没有出现跨域的问题，如果出现跨域需要修改你后端的请求头。

打印界面字符乱码：
这个我倒是碰到了，谷歌浏览器打印的时候，预览界面真的变成了 真·方块字 ，全是方块。这个问题是因为你pdf中使用了自定义字体导致的，具体解决方案如下：

首先，找到这个文件：node_modules/vue-pdf/src/pdfjsWrapper.js

然后根据github上这个issue，其中红色的是要删掉的，绿色的是要加上去的，照着改就可以解决了。

地址： https://github.com/FranckFreiburger/vue-pdf/pull/130/commits/253f6186ff0676abf9277786087dda8d95dd8ea7

根据我的实际测试，是可以解决打印乱码的问题的。

到此这篇关于vue 使用 vue-pdf 实现pdf在线预览的示例代码的文章就介绍到这了,更多相关vue pdf在线预览内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！