vue 使用 vue-pdf 实现pdf在线预览的示例代码

　　动态网页asp编程教程视频免费下载之前的demo增加了图片预览，于是今天下午追完番剧就突然想到能不能把pdf在线预览也做了，说干就干，刚开始查了很多教程，我发现很多人都在说什么pdf.js这个库，这当然没什么问题，pdf.js的确可以非常完美的实现pdf在线预览的过程，但是感觉这样直接进去有点不太优雅，于是找找看看有没有什么现成的组件，发现有vue-pdf这个组件，虽然说它没有原生那样强大，比如不支持pdf文字复制，打印会乱码，但是我感觉已经足以满足我的需求了。本篇笔记循序渐进，从基础的demo，到一个可用的程度，文末列出了大家在实际使用的过程中可能会遇到的问题和解决方案。

　　这个没有啥背景知识可讲，我们直接跳到安装环节，vue-pdf 和其他vue组件的安装并无不同，打开命令行，敲入:

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

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

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

　　注意啊，这句不一定非要写到mounted里面，你想写哪就写哪，比如你前端请求后端，后端返回一个pdf 的url，在那里写就行，写在你需要的地方。

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

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

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

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