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

无需任何三方库,在 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 文件

前言&#xff1a; 之前在使用Vue和其它框架的时候&#xff0c;预览 PDF 都是使用的 PDFObject 这个库&#xff0c;步骤是&#xff1a;下载依赖&#xff0c;然后手动封装一个 PDF 预览组件&#xff0c;这个组件接收本地或在线的pdf地址&#xff0c;然后在页面中使用组件的车时候…...

排序问题——晴问题库

排序问题——晴问题库 排序问题是线性数据的常考问题&#xff0c;在解晴问题库时总结归纳以下关于排序的解题方法和思路。 感谢晴神 排序问题是数据结构中十分重点的一部分。 可以分为五个大部分&#xff1a; 插入排序选择排序交换排序基数归并 再具体往下分&#xff1a; 插…...

【LabVIEW FPGA入门】FPGA中的数学运算

数值控件选板上的大部分数学函数都支持整数或定点数据类型&#xff0c;但是需要请注意&#xff0c;避免使用乘法、除法、倒数、平方根等函数&#xff0c;此类函数比较占用FPGA资源&#xff0c;且如果使用的是定点数据或单精度浮点数据仅适用于FPGA终端。 1.整数运算 支持的数…...

华为设备VRRP配置

核心代码&#xff1a; 需要对所有虚拟路由器设置&#xff08;要进入到对应的端口&#xff09; 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) 数据库&#xff1a;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&#xff0c;如果在订货系统中定错(多)货物了该怎么办 其实这也是很多人在网购或者是现实中经常会犯的一个错误&#xff0c;但是网上订货平台为大家提供了很多的解决方案&#xff0c;其中对于订单的…...

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 函数&#xff08;来源于 man 手册&#xff09; 4、扩展阅读 二、 /proc/sys/kernel/printk_xxx三、/dev/kmsg 前言 本篇文章将为大家介绍与 Linux 内核日志相关的一些控制文件&#xff0c;共同学习&am…...

使用 Postman 发送 get 请求的简易教程

在API开发与测试的场景中&#xff0c;Postman 是一种普遍应用的工具&#xff0c;它极大地简化了发送和接收HTTP请求的流程。要发出GET请求&#xff0c;用户只需设定正确的参数并点击发送即可。 如何使用 Postman 发送一个GET请求 创建一个新请求并将类型设为 GET 首先&#…...

【网站项目】基于jsp的拍卖网站设计与实现

&#x1f64a;作者简介&#xff1a;多年一线开发工作经验&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。&#x1f339;赠送计算机毕业设计600个选题excel文件&#xff0c;帮助大学选题。赠送开题报告模板&#xff…...

为什么洗衣机会每天自动上传3.6GB数据?

“为什么我家的LG洗衣机每天都会上传3.6GB的数据&#xff1f;” 一位名为Johnie用户发现他家电设备的异常行为后表示很不理解&#xff0c;随后他把相关信息发布在X平台&#xff0c;很快这篇帖子就收获了超过1700万次的浏览量&#xff0c;并迅速变成一场争议和网络安全battle。…...

word写标书的疑难杂症总结

最近在解决方案工作&#xff0c;与office工具经常打交道&#xff0c;各种问题&#xff0c;在此最下记录&#xff1a; 1.word中文档距离文档顶端有距离调整不了 1.疑难杂症问题1&#xff0c;多个空格都是不能解决 #解决办法&#xff1a;word中--布局-下拉框---“版式”--“垂直…...

2024,会更好嘛?

2023转眼过去&#xff0c;从1月的前端&#xff0c;2月的java&#xff0c;3月的数据库&#xff0c;4月的运维&#xff0c;我尝试了许多技术方向&#xff0c;终究在2023年5月&#xff0c;凭着背的Java面试题&#xff0c;拿到了三四个offer。2023年6月&#xff0c;边玩边整自己的毕…...

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&#xff0c; 很大程度是对安全的管控。从上文可以了解到它的四大特性&#…...

redis7部署集群:包含主从模式、哨兵模式、Cluster集群模式等三种模式

前言&#xff1a; redis部署集群常见的一般有三种模式&#xff1a;主从模式&#xff0c;Sentinel&#xff08;哨兵模式&#xff09;&#xff0c;Redis Cluster&#xff08;高可用Cluster集群&#xff09;&#xff0c;根据不同的需求可自定义选择部署方式。 Redis 主从模式&…...

072:vue+mapbox 点击某图层feature,高亮这部分

第072个 点击查看专栏目录 本示例是介绍如何在vue+mapbox中点击某图层feature,高亮这部分。思路是通过点击,获取点击部分的feature信息,生成一个新的source和layer,如果这个图层不为空,则清除之,相当于点击了别的地方,原有的高亮会删除掉,在别的地方高亮。 直接复制下…...

2024年最新安全且稳定的大数据传输方式

随着大数据时代的兴起&#xff0c;数据传输的速度和效率已经成为企业竞争的关键因素。到了2024年&#xff0c;大数据传输领域迎来了新的趋势和挑战&#xff0c;同时也涌现出了一系列创新的解决方案。本文将深入探讨这些新趋势和解决方案&#xff0c;意在帮助企业更好地迎接大数…...

Docker 数据卷容器

docker在容器中管理数据主要有两种方式&#xff1a; 数据卷&#xff08;Volumes&#xff09;挂载主机目录&#xff08;Bind mounts&#xff09; 而每个容器的数据都是独立的&#xff0c;数据跟随着容器的生命周期。如mysql容器&#xff0c;如果容器被删除了所有的数据都会丢失…...

Python爬虫实战:研究MechanicalSoup库相关技术

一、MechanicalSoup 库概述 1.1 库简介 MechanicalSoup 是一个 Python 库,专为自动化交互网站而设计。它结合了 requests 的 HTTP 请求能力和 BeautifulSoup 的 HTML 解析能力,提供了直观的 API,让我们可以像人类用户一样浏览网页、填写表单和提交请求。 1.2 主要功能特点…...

云启出海,智联未来|阿里云网络「企业出海」系列客户沙龙上海站圆满落地

借阿里云中企出海大会的东风&#xff0c;以**「云启出海&#xff0c;智联未来&#xff5c;打造安全可靠的出海云网络引擎」为主题的阿里云企业出海客户沙龙云网络&安全专场于5.28日下午在上海顺利举办&#xff0c;现场吸引了来自携程、小红书、米哈游、哔哩哔哩、波克城市、…...

QT: `long long` 类型转换为 `QString` 2025.6.5

在 Qt 中&#xff0c;将 long long 类型转换为 QString 可以通过以下两种常用方法实现&#xff1a; 方法 1&#xff1a;使用 QString::number() 直接调用 QString 的静态方法 number()&#xff0c;将数值转换为字符串&#xff1a; long long value 1234567890123456789LL; …...

项目部署到Linux上时遇到的错误(Redis,MySQL,无法正确连接,地址占用问题)

Redis无法正确连接 在运行jar包时出现了这样的错误 查询得知问题核心在于Redis连接失败&#xff0c;具体原因是客户端发送了密码认证请求&#xff0c;但Redis服务器未设置密码 1.为Redis设置密码&#xff08;匹配客户端配置&#xff09; 步骤&#xff1a; 1&#xff09;.修…...

SAP学习笔记 - 开发26 - 前端Fiori开发 OData V2 和 V4 的差异 (Deepseek整理)

上一章用到了V2 的概念&#xff0c;其实 Fiori当中还有 V4&#xff0c;咱们这一章来总结一下 V2 和 V4。 SAP学习笔记 - 开发25 - 前端Fiori开发 Remote OData Service(使用远端Odata服务)&#xff0c;代理中间件&#xff08;ui5-middleware-simpleproxy&#xff09;-CSDN博客…...

SiFli 52把Imagie图片,Font字体资源放在指定位置,编译成指定img.bin和font.bin的问题

分区配置 (ptab.json) img 属性介绍&#xff1a; img 属性指定分区存放的 image 名称&#xff0c;指定的 image 名称必须是当前工程生成的 binary 。 如果 binary 有多个文件&#xff0c;则以 proj_name:binary_name 格式指定文件名&#xff0c; proj_name 为工程 名&…...

基于Java+MySQL实现(GUI)客户管理系统

客户资料管理系统的设计与实现 第一章 需求分析 1.1 需求总体介绍 本项目为了方便维护客户信息为了方便维护客户信息&#xff0c;对客户进行统一管理&#xff0c;可以把所有客户信息录入系统&#xff0c;进行维护和统计功能。可通过文件的方式保存相关录入数据&#xff0c;对…...

【Nginx】使用 Nginx+Lua 实现基于 IP 的访问频率限制

使用 NginxLua 实现基于 IP 的访问频率限制 在高并发场景下&#xff0c;限制某个 IP 的访问频率是非常重要的&#xff0c;可以有效防止恶意攻击或错误配置导致的服务宕机。以下是一个详细的实现方案&#xff0c;使用 Nginx 和 Lua 脚本结合 Redis 来实现基于 IP 的访问频率限制…...

免费数学几何作图web平台

光锐软件免费数学工具&#xff0c;maths,数学制图&#xff0c;数学作图&#xff0c;几何作图&#xff0c;几何&#xff0c;AR开发,AR教育,增强现实,软件公司,XR,MR,VR,虚拟仿真,虚拟现实,混合现实,教育科技产品,职业模拟培训,高保真VR场景,结构互动课件,元宇宙http://xaglare.c…...

jmeter聚合报告中参数详解

sample、average、min、max、90%line、95%line,99%line、Error错误率、吞吐量Thoughput、KB/sec每秒传输的数据量 sample&#xff08;样本数&#xff09; 表示测试中发送的请求数量&#xff0c;即测试执行了多少次请求。 单位&#xff0c;以个或者次数表示。 示例&#xff1a;…...