技术掉：PDF显示，使用pdf.js

PDF 显示

场景： 其实直接显示 pdf 可以用 iframe 标签，但产品觉得浏览器自带的 pdf 预览太丑了，而且无法去除那些操作栏。

解决方案：使用 pdf.js 进行显示

第一步：引入 pdf.js

去官网下载稳定版的 pdf.js 文件

然后将下载好的文件放进项目的静态文件夹，我用的是 vite 项目，所以是 public

第二步：在页面中引入 viewer.html

<iframeclass="iframe1":src="'/public/pdf/web/viewer.html?file=xxxxxxx'"frameborder="0"width="100%"height="100%"
></iframe>

filte 是你的 pdf 的路径，本地路径和 url 路径都是可以的

设置好之后就可以预览了

效果如下：

遇到的问题

pdf 跨域

首先此插件跨域的话会报错，需要注释掉部分代码

/pdf/web/viewer.js

注释掉之后就可以解决了

更改 pdf 样式

直接去修改 viewer.html 里面的代码就行了

技术掉：PDF显示，使用pdf.js相关推荐

android pdf编辑,Foxit PDF SDK
PDF显示 Foxit PDF SDK提供了高性能的PDF库,使PDF页面.页面对象.注释和表单的显示更加清晰.明快.精准且易于阅读.支持应用程序对PDF文档和表单进行浏览.缩小.放大和打印,同时也支 ...
java在线查看pdf文件,java 实现所有文件的在线查看（其他类型转pdf后用pdf.js显示）...
js显示pdf插件demo下载: http://download.csdn.net/detail/heqinghua217/9685857 java 吧所有文档类文件转成pdf格式文件下载 http: ...
java 实现所有文件的在线查看（其他类型转pdf后用pdf.js显示）
js显示pdf插件demo下载: http://download.csdn.net/detail/heqinghua217/9685857 java 吧所有文档类文件转成pdf格式文件下载 http: ...
利用pdf.js开发嵌入pdf显示，以及利用jquery-ui左右分栏显示
原来考虑用pdf.js的viewer.html页面,但怎么用都不方便.因此直接用pdf.js在左侧连续显示pdf所有内容,右侧显示其它相关内容,并且左右宽度可以任意拖动,最终实现效果如图: 代码: & ...
使用pdf.js完美解决跨域显示远程pdf问题
由于公司需要在业务系统展示文服的pdf,最后折腾发现pdf存在严重跨域问题.网上也是各种跨域解决方案,但是没有哪个真正合适或者说能实现的,我参考官方demo和结合网上的一些资源,自己写了一个demo, ...
IE11线上显示pdf文件以及pdf.js用法
最近公司要求能够在ie上线上预览pdf插件 vue有vue-pdf插件可以用但是js虽然有pdfjs等但是新版本只支持谷歌浏览器(语法有箭头函数),所以在github找到了老版本的pdfjs,发现 ...
android 在线解析pdf文件格式,Android PDF预览阅读：用Mozilla PDF.js浏览本地在线PDF文件 | KaelLi的博客...
在之前的Android端预览PDF方案一文中,曾经提到了使用Mozilla的PDF.js来加载PDF的办法,今天就详细的说一下具体的实现. 简介 PDF.js是一个使用HTML5构建的PDF查看器.由 ...
php 集成 pdf.js,JavaScript_js插件方式打开pdf文件(浏览器pdf插件分享)，两种方案：一种直接链接，把p - phpStudy...
js插件方式打开pdf文件(浏览器pdf插件分享) 两种方案:一种直接链接,把pdf文件当作img文件,类似这种形式,这样链接: 另一种:使用js插件哈. 其中实现阅读pdf文件的js插件很多,比如: ...
计算机控制及网络技术pdf,计算机控制系统pdf
为毕业生写计算机控制系统pdf提供计算机控制系统pdf范文参考,涵盖硕士.大学本科毕业论文范文和职称论文范文,包括论文选题.开题报告.文献综述.任务书.参考文献等,是优秀免费计算机控制系统pdf网站. ...