当前位置: 首页 > news >正文

技术掉:PDF显示,使用pdf.js

PDF 显示

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

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

第一步:引入 pdf.js

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

在这里插入图片描述

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

在这里插入图片描述

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

<iframe
  class="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 里面的代码就行了

相关文章:

  • Xinlinx zynq7045国产替代 FMQL45T900全国产化 ARM 核心板+扩展板
  • 硬刚ChatGPT!文心一言能否为百度止颓?中国版ChatGPT“狂飙”的机会在哪儿?
  • 【python】喜欢XJJ?这不得来一波大采集?
  • 用Python求解牛顿的草地与母牛问题
  • 面试官:MQ的好处到底有哪些?
  • 想要成为高级网络工程师,只需要具备这几点
  • 我在字节当主管:百次面试结果,总结一个刷掉99%求职者的问题!
  • 基于GPT-4的免费代码生成工具
  • 今年还能学java么?
  • 硬刚ChatGPT!文心一言能否为百度止颓?
  • CSS实现一个展示框
  • 【Java实战】不会还有人用if else进行参数校验吧
  • 系统架构:经典三层架构
  • 28岁小公司程序员,无车无房不敢结婚,要不要转行?
  • 十二、51单片机之DS1302
  • ES+Redis+MySQL,这个高可用架构设计太顶了!
  • Linux基础命令大全(上)
  • 蓝桥杯刷题冲刺 | 倒计时28天
  • 20年程序员生涯,读了200多本技术书,挑了几本精华好书分享给大家
  • 接口文档包含哪些内容?怎么才能写好接口文档?十年测试老司机来告诉你
  • HTB-baby~
  • Docker使用DockerFile部署Go项目
  • 自己设计的网站,如何实现分页功能?(详细代码+注释)
  • O2O、C2C、B2B、B2C是什么意思
  • 带你一文透彻学习【PyTorch深度学习实践】分篇——加载数据集(Dataset类、DataLoader类核心参数讲解)附:实例源代码
  • 基于html+css的图片居中排列
  • Python通用验证码识别OCR库ddddocr的安装使用
  • 「无服务器架构」无服务器架构是应用程序的正确选择?需要考虑利弊。
  • Pycharm中修改git提交代码的账户和用户名【Git追溯注解,git blame】
  • 中介变量、调节变量与协变量