之前的demo增加了图片预览，于是今天下午追完番剧就突然想到能不能把pdf在线预览也做了，说干就干，刚开始查了很多教程，我发现很多人都在说什么pdf.js这个库，这当然没什么问题，pdf.js的确可以非常完美的实现pdf在线预览的过程，但是感觉这样直接进去有点不太优雅，于是找找看看有没有什么现成的组件，发现有vue-pdf这个组件，虽然说它没有原生那样强大，比如不支持pdf文字复制，打印会乱码，但是我感觉已经足以满足我的需求了。本篇笔记循序渐进，从基础的demo，到一个可用的程度，文末列出了大家在实际使用的过程中可能会遇到的问题和解决方案。
这个没有啥背景知识可讲，我们直接跳到安装环节，vue-pdf 和其他vue组件的安装并无不同，打开命令行，敲入:
安装完之后，使用vue-pdf非常简单，和其他的组件并没有什么不同，上代码：
重启你的项目，访问这个界面，你大概率会发现pdf已经成功显示在你的界面上了。这没有任何问题，但是，正当你准备拿起一根烟，点上，伴着舒适的《美丽的梭罗河》，欣赏你成功的杰作的时候，你会发现，我擦，为啥只有一页，当玻璃杯碰在一起，满世界都是梦破碎的声音。
所以，这只是初体验，如果你的pdf只有一页，这样写当然没什么问题，但是当我们呢pdf 有很多页的时候，你会发现，这行不通了。所以，接下来，我们来看看怎么让它显示多页。
其实，想要显示多页也没那么复杂，你每次就显示一页，我，直接v-for 循环，直接显示完，简单粗暴。
注意啊，这句不一定非要写到mounted里面，你想写哪就写哪，比如你前端请求后端，后端返回一个pdf 的url，在那里写就行，写在你需要的地方。
很多人看到这，就这，就这？万一，我pdf有一千页，我浏览器还不得裂开，我追求的是那种在微醺的下午，一页一页的翻看的感觉，你能给我吗？
评论区有人提到了这个问题，我今天中午的时候试了一下，完全是可以的，但是需要我们做一下本地配置flie-loader才行，否则webpack无法编译pdf类型的文件，配置方法也很简单，在项目根目录新建一个fig.js文件，我发现很多人直接就去babel.config.js这个文件里面配置，这样是不对的，肯定会报错，
网上用pdf.js 很多都会遇到跨域问题，这个我今天实际应用到自己的项目里面了，由于我服务端设置了跨域，所以没有出现跨域的问题，如果出现跨域需要修改你后端的请求头。
这个我倒是碰到了，谷歌浏览器打印的时候，预览界面真的变成了 真·方块字 ，全是方块。这个问题是因为你pdf中使用了自定义字体导致的，具体解决方案如下：
然后根据github上这个issue，其中红色的是要删掉的，绿色的是要加上去的，照着改就可以解决了。
非常感谢能读到这里的朋友，你们的支持和关注是我坚持高质量分享下去的动力。
相关代码和文档已经上传至本人github。一定要点个star啊啊啊啊啊啊啊
vue-pdf实现pdf文件在线. pdf 页面显示 4. pdf 显示多页 5. pdf 按页预览 6. 更多内容
今天我们使用 Vue3-PDFJS 插件来实现 Vue3 版本的 PDF 文件在线预览功能，欢迎各位批评指正。
这是我参与更文挑战的第4天，活动详情查看： 更文挑战 前言 在写项目的过程中，偶尔会有使用到pdf的文件，当我们想看pdf文件的时候，你的操作是不是先把pdf文件下载下来，通过电脑安装的专用于打开pd
今天产品提出一个优化的需求，就是之前我们做的图片展示就是一个img标签搞定，由于我们做的是海外后台管理系统，那边的人上传的文件时pdf格式，vue本事是不支持这种格式文件展示的，于是就google搜索，发现有iframe、embed、vueshowpdf(测试了不咋好用)、pd…
PDF.js ，一个完整的 PDF 查看器，可以直接使用其提供的 viewer.html 查看 PDF 内容，包含完整样式和相关功能。优点是快速集成，不需要自己实现查看器的功能和样式。缺点是如果要自定义样式和功能，反而会很麻烦。 pdfjs-dist ，PDF.js 的预购建版…
vue预览word，excel，pptx，pdf文件 1、做word，excel，pptx的预览，要先确定文件路径访问是通过域名的url来预
方式一、pdf文件理论上可以在浏览器直接打开预览但是需要打开新页面。在仅仅是预览pdf文件且UI要求不高的情况下可以直接通过a标签href属性实现预览 这个插件可以实现pdf预览功能（包括其他各种媒体文件）但是对word等类型的文件无能为力。 PDF.js可以实现在html下直…
吐槽一番，还是老老实实去实现功能吧，但是GitHub找了一圈vue项目的pdf轮子，基本都是大同小异，基本思想就是使用canvas把pdf内容绘制出来，但是这样最大的一个问题就是pdf的内容完全没办法复制了，第一个需求就不满足了，没办法只能扩大搜索范围，最终瞄准了pdf.js，…
需求及引言 最近在项目中，因为有一处需求，需要预览图片/PDF文件，Vue项目，索性采用了element-ui的dialog组件来展示文件。 图片预览很简单，直接在dialog组件放置一张图片，加入u
公司最近有个小需求，一共就四五个页面，拿到手Vue3+TS+Vite开搞，到最后一个页面是后台下发PDF链接我要渲染在页面上，大部分浏览器是可以直接显示PDF的，但是万恶的微信浏览器不支持；
前言 近期公司提出了一个新需求，希望前端能够根据UI设计绘制运动报告界面，完成数据展示，包括图标展示，并且能够将HTML页面转为PDF并实现下载。基于公司需求，查询了很多资料，最后选定了三种技术方案，
pdfjs-dist + canvas渲染页面提示多次render操作使用了相同canvas画布问题
介绍 在业务中，如果遇到文档管理类的功能，会出现需要在线预览的业务需求，本文主要是通过第三方库来实现文档预览功能，并将其封装成preview组件 docx docx的实现需要使用docx-previe
小知识，大挑战！本文正在参与“ 程序员必备小知识 ”创作活动 本文同时参与 「掘力星计划」 ，赢取创作大礼包，挑战创作激励金 思路： 通过 html2canvas 将 HTML 页面转换成