pdf.js解决微信预览PDF

前言

公司最近有个小需求,一共就四五个页面,拿到手Vue3+TS+Vite开搞,到最后一个页面是后台下发PDF链接我要渲染在页面上,大部分浏览器是可以直接显示PDF的,但是万恶的微信浏览器不支持;怎么办呢?开始面向百度、面向谷歌编程。

找插件

网上发现了一个大佬写的很好用的Vue预览PDF插件:vue-pdf

用的人不少,一看只支Vue2,我佛了,大佬也没出Vue3版本的……

只能找其他的了,最后使用了pdf.js;淦竟然不支持npm下载引用,啥也没暴露,继续面向百度编程,发现下载之后它的核心就是一个HTML文件:

image.png

用法简单粗暴,把PDF链接拼接给这个HTML就行了

/viewer.html?file=' + http://XXX.pdf
复制代码

这时候直接iframe搞起来

<iframe class="manual__iframe" :src="'/share_manual/web/viewer.html?file=' + encodeURI(resourceUrl)" frameborder="0"></iframe>
复制代码

最终效果还算不错,在微信里面打开也不会被要求下载了

image.png

至此任务完成,大佬们有更好的工具欢迎留言在下面,谢谢!!

image.png

猜你喜欢

转载自juejin.im/post/7034054376423424036