无需任何三方库,在 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 预览就变得简单多了,不再需要任何三方依赖了。

相关推荐
ppandss117 分钟前
JavaWeb从0到1-DAY4-AJAX
前端·ajax·okhttp
千寻girling24 分钟前
滑动窗口刷了快一个月(26天)了 , 还没有刷完. | 含(操作系统学什么的Java 后端)
java·开发语言·javascript·c++·人工智能·后端·python
一袋米扛几楼9834 分钟前
【报错问题】彻底解决 TypeScript 报错 TS2769: No overload matches this call (JWT 篇)
linux·javascript·typescript
涵涵(互关)34 分钟前
语法大全-only-writer-two
前端·vue.js·typescript
huangql52036 分钟前
浏览器 Location API、History API、路由记录与支付跳转完全指南
前端
木斯佳38 分钟前
前端八股文面经大全:腾讯前端实习一面(2026-04-27)·面经深度解析
前端·八股·面经
sayamber43 分钟前
Kubernetes 生产环境避坑指南:10 个真实故障案例与解决方案
前端
清寒_1 小时前
分层理解AI架构,降低对AI复杂度的恐惧
前端·人工智能·ai编程
AI刀刀1 小时前
手机AI怎么导出pdf
人工智能·ai·智能手机·pdf·deepseek·ds随心转
牧码岛1 小时前
Web前端之JavaScrip中的Array、Object、Map和Set详解
前端·javascript·web·web前端