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

相关推荐
不爱写程序的东方不败5 分钟前
APP接口测试流程实战Posman+Fiddler
前端·测试工具·fiddler
晚霞的不甘1 小时前
Flutter for OpenHarmony构建全功能视差侧滑菜单系统:从动效设计到多页面导航的完整实践
前端·学习·flutter·microsoft·前端框架·交互
黎子越1 小时前
python相关练习
java·前端·python
摘星编程1 小时前
用React Native开发OpenHarmony应用:StickyHeader粘性标题
javascript·react native·react.js
A_nanda1 小时前
c# 用VUE+elmentPlus生成简单管理系统
javascript·vue.js·c#
天天进步20151 小时前
Motia事件驱动的内核:深入适配器(Adapter)层看消息队列的流转
javascript
北极糊的狐2 小时前
若依项目vue前端启动键入npm run dev 报错:不是内部或外部命令,也不是可运行的程序或批处理文件。
前端·javascript·vue.js
XRJ040618xrj2 小时前
Nginx下构建PC站点
服务器·前端·nginx
We་ct2 小时前
LeetCode 289. 生命游戏:题解+优化,从基础到原地最优
前端·算法·leetcode·矩阵·typescript
搬山境KL攻城狮2 小时前
SPA单页面应用静态资源缓存控制方案
前端框架