无需任何三方库,在 Next.js 项目在线预览 PDF 文件
前言:
之前在使用Vue和其它框架的时候,预览 PDF 都是使用的 PDFObject 这个库,步骤是:下载依赖,然后手动封装一个 PDF 预览组件,这个组件接收本地或在线的pdf地址,然后在页面中使用组件的车时候,通过路由参数去获取目标PDF地址。
最近使用 Next.js 重构公司官网的时候,也碰到这个需求,用户协议是一个 PDF 文件,要求在页面中点击链接后能够预览 PDF。
因为之前有留意到某个 Next.js 的开源项目也有这个功能,于是果断抄作业。我本以为还是和往常一样,这个pdf预览的功能肯定依赖了某个三方库,但是我在这个开源项目的 package.json 中并未发现任何关于 pdf 依赖,我又怀疑作者是否在哪里注入了在线的三方库脚本,但是仔细翻看了一遍代码依旧没有找到任何蛛丝马迹。
只看到所有 pdf 文件被放在了 public/about文件夹中,然后在页面中是这么使用的:
<a target="_blank" className="btn" href="/about/fl.pdf" >About </a>
<a target="_blank" className="btn" href="/about/terms.pdf">Terms </a>
难道在Next.js中直接访问 public 文件夹中的 pdf 文件就可以在线预览 PDF 吗 ?
我立刻在项目中试了一下,还真是!!!所以在 Next.js 中使用 PDF 预览就变得简单多了,不再需要任何三方依赖了。

相关文章:
无需任何三方库,在 Next.js 项目在线预览 PDF 文件
前言: 之前在使用Vue和其它框架的时候,预览 PDF 都是使用的 PDFObject 这个库,步骤是:下载依赖,然后手动封装一个 PDF 预览组件,这个组件接收本地或在线的pdf地址,然后在页面中使用组件的车时候…...
排序问题——晴问题库
排序问题——晴问题库 排序问题是线性数据的常考问题,在解晴问题库时总结归纳以下关于排序的解题方法和思路。 感谢晴神 排序问题是数据结构中十分重点的一部分。 可以分为五个大部分: 插入排序选择排序交换排序基数归并 再具体往下分: 插…...
【LabVIEW FPGA入门】FPGA中的数学运算
数值控件选板上的大部分数学函数都支持整数或定点数据类型,但是需要请注意,避免使用乘法、除法、倒数、平方根等函数,此类函数比较占用FPGA资源,且如果使用的是定点数据或单精度浮点数据仅适用于FPGA终端。 1.整数运算 支持的数…...
华为设备VRRP配置
核心代码: 需要对所有虚拟路由器设置(要进入到对应的端口) vrrp vrid 38 virtual-ip 192.168.10.254 vrrp vrid 38 priority 120 vrrp vrid 38 track int g0/0/1 reduced 30①mac由vrid生成 ②指定虚拟ip ③虚拟ip作为内部主机的网关&#x…...
2024年艺术发展与文化产业国际会议(ICADCI 2024)
2024年艺术发展与文化产业国际会议(ICADCI 2024) 2024 International Conference on Art Development and Cultural Industry(ICADCI 2024) 数据库:EI,CPCI,CNKI,Google Scholar等 一、【会议简介】 2024年艺术发展与文化产业国际会议(ICADCI 2024)将于丽江这座美丽…...
华为手表开发:WATCH 3 Pro(10)获取心率_java 华为手表获取心跳
华为手表开发:WATCH 3 Pro(10)获取心率_java 华为手表获取心跳 Excerpt 文章浏览阅读1.2k次。鸿蒙开发,获取手表心跳,按钮点击后触发的方法,我们将跳转页面的代码写在这个位置就可以实现点击按钮进行跳转页面的动作。在HTML文件“index.hml”,添加按钮,这里按钮用到是标…...
使用企业订货软件的担忧与考虑|网上APP订货系统
使用企业订货软件的担忧与考虑|网上APP订货系统 网上订货系统担心出现的问题 1,如果在订货系统中定错(多)货物了该怎么办 其实这也是很多人在网购或者是现实中经常会犯的一个错误,但是网上订货平台为大家提供了很多的解决方案,其中对于订单的…...
Java-集合-Collection类
1 需求 2 接口 Interface Collection<E> public interface Collection<E> extends Iterable<E> 2.3 Method Detail int size()boolean isEmpty()boolean contains(Object o)Iterator<E> iterator()Object[] toArray()<T> T[] toArray(T[] a)…...
Linux:/proc/kmsg 与 /proc/sys/kernel/printk_xxx
目录 前言一、/proc/kmsg1、简介2、如何修改内核日志缓冲区3、dmesgklogctl 函数(来源于 man 手册) 4、扩展阅读 二、 /proc/sys/kernel/printk_xxx三、/dev/kmsg 前言 本篇文章将为大家介绍与 Linux 内核日志相关的一些控制文件,共同学习&am…...
使用 Postman 发送 get 请求的简易教程
在API开发与测试的场景中,Postman 是一种普遍应用的工具,它极大地简化了发送和接收HTTP请求的流程。要发出GET请求,用户只需设定正确的参数并点击发送即可。 如何使用 Postman 发送一个GET请求 创建一个新请求并将类型设为 GET 首先&#…...
【网站项目】基于jsp的拍卖网站设计与实现
🙊作者简介:多年一线开发工作经验,分享技术代码帮助学生学习,独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。🌹赠送计算机毕业设计600个选题excel文件,帮助大学选题。赠送开题报告模板ÿ…...
为什么洗衣机会每天自动上传3.6GB数据?
“为什么我家的LG洗衣机每天都会上传3.6GB的数据?” 一位名为Johnie用户发现他家电设备的异常行为后表示很不理解,随后他把相关信息发布在X平台,很快这篇帖子就收获了超过1700万次的浏览量,并迅速变成一场争议和网络安全battle。…...
word写标书的疑难杂症总结
最近在解决方案工作,与office工具经常打交道,各种问题,在此最下记录: 1.word中文档距离文档顶端有距离调整不了 1.疑难杂症问题1,多个空格都是不能解决 #解决办法:word中--布局-下拉框---“版式”--“垂直…...
2024,会更好嘛?
2023转眼过去,从1月的前端,2月的java,3月的数据库,4月的运维,我尝试了许多技术方向,终究在2023年5月,凭着背的Java面试题,拿到了三四个offer。2023年6月,边玩边整自己的毕…...
Nsis打包Unity Exe文件(通用)
Nsi 脚本 !include "MUI2.nsh"#使用现代UI Unicode true #使用Unicode !define EXENAME "exeName" #定义常量 exe名称 !define SHORTCUT "快捷方式名称" #定义桌面快捷方式的中文名称Name ${EXENAME} #安装程序的title OutFile "${EXENAME…...
【Azure 架构师学习笔记】- Azure Databricks (6) - 配置Unity Catalog
本文属于【Azure 架构师学习笔记】系列。 本文属于【Azure Databricks】系列。 接上文 【Azure 架构师学习笔记】- Azure Databricks (5) - Unity Catalog 简介 UC的关键特性 之所以DataBricks要用UC, 很大程度是对安全的管控。从上文可以了解到它的四大特性&#…...
redis7部署集群:包含主从模式、哨兵模式、Cluster集群模式等三种模式
前言: redis部署集群常见的一般有三种模式:主从模式,Sentinel(哨兵模式),Redis Cluster(高可用Cluster集群),根据不同的需求可自定义选择部署方式。 Redis 主从模式&…...
072:vue+mapbox 点击某图层feature,高亮这部分
第072个 点击查看专栏目录 本示例是介绍如何在vue+mapbox中点击某图层feature,高亮这部分。思路是通过点击,获取点击部分的feature信息,生成一个新的source和layer,如果这个图层不为空,则清除之,相当于点击了别的地方,原有的高亮会删除掉,在别的地方高亮。 直接复制下…...
2024年最新安全且稳定的大数据传输方式
随着大数据时代的兴起,数据传输的速度和效率已经成为企业竞争的关键因素。到了2024年,大数据传输领域迎来了新的趋势和挑战,同时也涌现出了一系列创新的解决方案。本文将深入探讨这些新趋势和解决方案,意在帮助企业更好地迎接大数…...
Docker 数据卷容器
docker在容器中管理数据主要有两种方式: 数据卷(Volumes)挂载主机目录(Bind mounts) 而每个容器的数据都是独立的,数据跟随着容器的生命周期。如mysql容器,如果容器被删除了所有的数据都会丢失…...
FOC算法避坑指南:克拉克变换的‘等幅值’与‘等功率’到底怎么选?基于STM32的实测对比
FOC算法避坑指南:克拉克变换的‘等幅值’与‘等功率’到底怎么选?基于STM32的实测对比 在STM32平台上实现磁场定向控制(FOC)时,克拉克变换系数的选择往往让工程师陷入两难:究竟该用2/3(等幅值&…...
毕业论文神器 2026 降AI率平台推荐:工具对比+最好用AI推荐
2026年真正好用的AI论文降重与改写工具,核心看降重效果、去AI味、格式保留、学术适配四大指标。综合实测,千笔AI、ThouPen、豆包、DeepSeek、Grammarly 是当前最值得推荐的梯队,覆盖从免费到付费、从中文到英文、从文科到理工的全场景需求。 …...
HunyuanVideo-Foley 社区贡献指南:如何提交Prompt案例与优化建议
HunyuanVideo-Foley 社区贡献指南:如何提交Prompt案例与优化建议 1. 为什么你的贡献很重要 开源项目的生命力来自社区的共同参与。HunyuanVideo-Foley作为一款专注于音效生成的AI模型,其效果提升离不开用户的实际使用反馈和创意贡献。你的每一次Prompt…...
如何快速实现Font Awesome图标字体文件格式转换:终极在线工具指南
如何快速实现Font Awesome图标字体文件格式转换:终极在线工具指南 【免费下载链接】Font-Awesome The iconic SVG, font, and CSS toolkit 项目地址: https://gitcode.com/GitHub_Trending/fo/Font-Awesome Font Awesome作为一款标志性的SVG、字体和CSS工具包…...
论文省心了!2026 最新降AI率工具测评与推荐
2026年真正好用的AI论文降重与改写工具,核心看降重效果、去AI味、格式保留、学术适配四大指标。综合实测,千笔AI、ThouPen、豆包、DeepSeek、Grammarly 是当前最值得推荐的梯队,覆盖从免费到付费、从中文到英文、从文科到理工的全场景需求。 …...
如何高效迁移至WeFriends:微信好友关系管理工具全新升级指南
如何高效迁移至WeFriends:微信好友关系管理工具全新升级指南 【免费下载链接】WechatRealFriends 微信好友关系一键检测,基于微信ipad协议,看看有没有朋友偷偷删掉或者拉黑你 项目地址: https://gitcode.com/gh_mirrors/we/WechatRealFrien…...
实战UNet++:基于segmentation_models_pytorch的医学图像分割全流程解析
1. 医学图像分割与UNet的核心价值 医学图像分割是计算机视觉在医疗领域最重要的应用之一。与自然图像不同,CT、MRI等医学影像具有灰度范围窄、组织边界模糊、噪声干扰大等特点。传统方法需要医生手动勾画病灶区域,一张高清CT可能需要数小时,而…...
从反射率到耐候性:5个关键参数教你像专业人士一样测试LED封装胶水
从反射率到耐候性:5个关键参数教你像专业人士一样测试LED封装胶水 在LED制造领域,封装胶水就像光学系统的"隐形工程师",它不仅要牢固固定芯片和荧光粉,更承担着光线管理的关键任务。一款优质的高反射率封装胶水…...
Java全栈开发面试实战:从基础到进阶的深度解析
Java全栈开发面试实战:从基础到进阶的深度解析 面试官与应聘者的对话 面试官(李明):你好,我是李明,负责这次技术面试。很高兴见到你,先简单介绍一下你自己吧。 应聘者(张晨ÿ…...
Qwen2.5-VL-7B-Instruct应用场景:法律合同关键条款图文定位与摘要生成
Qwen2.5-VL-7B-Instruct应用场景:法律合同关键条款图文定位与摘要生成 想象一下,你是一位法务人员或商务经理,面前摆着一份几十页、图文并茂的复杂合同。你需要快速找到关于“违约责任”、“付款条件”或“知识产权归属”的关键条款。传统的…...
