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

OpCore-Simplify:智能配置驱动的OpenCore EFI自动化构建工具

OpCore-Simplify&#xff1a;智能配置驱动的OpenCore EFI自动化构建工具 【免费下载链接】OpCore-Simplify A tool designed to simplify the creation of OpenCore EFI 项目地址: https://gitcode.com/GitHub_Trending/op/OpCore-Simplify &#x1f914; 配置黑苹果的痛…...

5维精准配准:医学影像分析的SyN算法实践指南

5维精准配准&#xff1a;医学影像分析的SyN算法实践指南 【免费下载链接】ANTs Advanced Normalization Tools (ANTs) 项目地址: https://gitcode.com/gh_mirrors/ant/ANTs 医学影像分析中&#xff0c;不同设备、不同时间采集的图像往往存在空间差异&#xff0c;如何实…...

把Camunda流程引擎当SaaS用?多租户与外部任务实战指南(基于RuoYi改造)

基于Camunda构建企业级流程中心的架构设计与实战 在数字化转型浪潮中&#xff0c;业务流程自动化已成为企业提升运营效率的核心手段。当一家企业同时运行CRM、OA、ERP等多个业务系统时&#xff0c;每个系统都需要工作流支持&#xff0c;但为每个系统单独部署和维护Camunda引擎显…...

什么是分段锁

面试 线程只锁自己要用的那一段代码&#xff0c;不同段可以同时操作。这样可以减少锁竞争、提高并发。...

CTFHub—Web题目解题合集1(超详细)

目录一. HTTP协议&#xff08;web前置技能&#xff09;1. 请求方式题解小知识2. 302跳转3. Cookie题目解法二. 信息泄露2.1 备份文件下载1. 网站源码2. bak文件题目题解小知识3. vim缓存题目小知识题解4. DS_Store题目小知识题解2.2 Git泄露1. Log题目小知识(GitHack与dirsearc…...

Cherry Studio终极模型集成指南:支持DeepSeek-R1等主流LLM的桌面AI神器

Cherry Studio终极模型集成指南&#xff1a;支持DeepSeek-R1等主流LLM的桌面AI神器 【免费下载链接】cherry-studio &#x1f352; Cherry Studio is a desktop client that supports for multiple LLM providers. Support deepseek-r1 项目地址: https://gitcode.com/GitHub…...

开源工具赋能PS4玩家:GoldHEN Cheats Manager的全方位游戏体验优化方案

开源工具赋能PS4玩家&#xff1a;GoldHEN Cheats Manager的全方位游戏体验优化方案 【免费下载链接】GoldHEN_Cheat_Manager GoldHEN Cheats Manager 项目地址: https://gitcode.com/gh_mirrors/go/GoldHEN_Cheat_Manager GoldHEN Cheats Manager是一款专为PlayStation …...

Ryujinx开源项目:跨平台Switch游戏模拟解决方案

Ryujinx开源项目&#xff1a;跨平台Switch游戏模拟解决方案 【免费下载链接】Ryujinx 用 C# 编写的实验性 Nintendo Switch 模拟器 项目地址: https://gitcode.com/GitHub_Trending/ry/Ryujinx 在数字化娱乐日益普及的今天&#xff0c;如何让Nintendo Switch游戏突破硬件…...

GTE模型与Visual Studio智能编程插件的集成

GTE模型与Visual Studio智能编程插件的集成 1. 引言 作为一名每天要写大量代码的程序员&#xff0c;我经常遇到这样的情况&#xff1a;突然想不起来某个API的具体用法&#xff0c;或者需要查找某个功能的实现示例。传统的做法是打开浏览器&#xff0c;在各种文档和论坛中搜索…...

终极免费Jable视频下载指南:3步搞定Chrome插件完整教程

终极免费Jable视频下载指南&#xff1a;3步搞定Chrome插件完整教程 【免费下载链接】jable-download 方便下载jable的小工具 项目地址: https://gitcode.com/gh_mirrors/ja/jable-download jable-download是一款专为普通用户设计的免费Jable视频下载工具&#xff0c;通过…...