当前位置: 首页 > 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;如果容器被删除了所有的数据都会丢失…...

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0&#xff1a;开发环境同步测试 cookie 至 localhost&#xff0c;便于本地请求服务携带 cookie 参考地址&#xff1a;https://juejin.cn/post/7139354571712757767 里面有源码下载下来&#xff0c;加在到扩展即可使用FeHelp…...

Linux链表操作全解析

Linux C语言链表深度解析与实战技巧 一、链表基础概念与内核链表优势1.1 为什么使用链表&#xff1f;1.2 Linux 内核链表与用户态链表的区别 二、内核链表结构与宏解析常用宏/函数 三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...

解锁数据库简洁之道:FastAPI与SQLModel实战指南

在构建现代Web应用程序时&#xff0c;与数据库的交互无疑是核心环节。虽然传统的数据库操作方式&#xff08;如直接编写SQL语句与psycopg2交互&#xff09;赋予了我们精细的控制权&#xff0c;但在面对日益复杂的业务逻辑和快速迭代的需求时&#xff0c;这种方式的开发效率和可…...

【Java_EE】Spring MVC

目录 Spring Web MVC ​编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 ​编辑参数重命名 RequestParam ​编辑​编辑传递集合 RequestParam 传递JSON数据 ​编辑RequestBody ​…...

用docker来安装部署freeswitch记录

今天刚才测试一个callcenter的项目&#xff0c;所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...

在WSL2的Ubuntu镜像中安装Docker

Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包&#xff1a; for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...

安卓基础(aar)

重新设置java21的环境&#xff0c;临时设置 $env:JAVA_HOME "D:\Android Studio\jbr" 查看当前环境变量 JAVA_HOME 的值 echo $env:JAVA_HOME 构建ARR文件 ./gradlew :private-lib:assembleRelease 目录是这样的&#xff1a; MyApp/ ├── app/ …...

让回归模型不再被异常值“带跑偏“,MSE和Cauchy损失函数在噪声数据环境下的实战对比

在机器学习的回归分析中&#xff0c;损失函数的选择对模型性能具有决定性影响。均方误差&#xff08;MSE&#xff09;作为经典的损失函数&#xff0c;在处理干净数据时表现优异&#xff0c;但在面对包含异常值的噪声数据时&#xff0c;其对大误差的二次惩罚机制往往导致模型参数…...

三分算法与DeepSeek辅助证明是单峰函数

前置 单峰函数有唯一的最大值&#xff0c;最大值左侧的数值严格单调递增&#xff0c;最大值右侧的数值严格单调递减。 单谷函数有唯一的最小值&#xff0c;最小值左侧的数值严格单调递减&#xff0c;最小值右侧的数值严格单调递增。 三分的本质 三分和二分一样都是通过不断缩…...

SpringAI实战:ChatModel智能对话全解

一、引言&#xff1a;Spring AI 与 Chat Model 的核心价值 &#x1f680; 在 Java 生态中集成大模型能力&#xff0c;Spring AI 提供了高效的解决方案 &#x1f916;。其中 Chat Model 作为核心交互组件&#xff0c;通过标准化接口简化了与大语言模型&#xff08;LLM&#xff0…...