无需任何三方库,在 Next.js 项目在线预览 PDF 文件

前言:

之前在使用Vue和其它框架的时候,预览 PDF 都是使用的 PDFObject这个库,步骤是:下载依赖,然后手动封装一个 PDF 预览组件,这个组件接收本地或在线的pdf地址,然后在页面中使用组件的车时候,通过路由参数去获取目标PDF地址。

最近使用 Next.js 重构公司官网的时候,也碰到这个需求,用户协议是一个 PDF 文件,要求在页面中点击链接后能够预览 PDF。

因为之前有留意到某个 Next.js 的开源项目也有这个功能,于是果断抄作业。我本以为还是和往常一样,这个pdf预览的功能肯定依赖了某个三方库,但是我在这个开源项目的 package.json 中并未发现任何关于 pdf 依赖,我又怀疑作者是否在哪里注入了在线的三方库脚本,但是仔细翻看了一遍代码依旧没有找到任何蛛丝马迹。

只看到所有 pdf 文件被放在了 public/about文件夹中,然后在页面中是这么使用的:

html 复制代码
<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 预览就变得简单多了,不再需要任何三方依赖了。

相关推荐
我有满天星辰15 分钟前
Vue 指令完全指南:从 Vue 2 到 Vue 3 的演进与实战
前端·javascript·vue.js
光影少年17 分钟前
RN 渲染原理:不依赖WebView,原生控件渲染
前端·react native·react.js·前端框架
小白学过的代码18 分钟前
# flv.js / mpegts.js 播不了国标摄像头(H.265 + G.711A)?纯前端 Jessibuca 无后端方案(附完整代码)
前端·javascript·h.265
console.log('npc')23 分钟前
AI Agent 前端流式渲染核心技术文档(SSE \+ WebSocket \+ 打字机渲染)
前端·人工智能·websocket
法外狂徒132 分钟前
将 Pi Agent 接入 HagiCode 的实践之路
服务器·前端·人工智能
IT_陈寒39 分钟前
React中useEffect的依赖项把我坑惨了
前端·人工智能·后端
广州华水科技1 小时前
单北斗GNSS在变形监测中的优势与应用分析
前端
程序员爱钓鱼2 小时前
Rust 变量与不可变性:为什么默认不能修改变量?
前端·后端·rust
随风一样自由2 小时前
【前端工程化】前端工程化解耦实践:从问题分析到架构重构
前端·重构·架构
vortex53 小时前
Web 渗透测试:未授权与越权漏洞全流程挖掘思路
前端