React(三):PDF文件在线预览(简易版)

效果

依赖下载

https://mozilla.github.io/pdf.js/getting_started/

引入依赖

源码

注意:pdf文件的预览地址需要配置代理后才能显示出来

js 复制代码
import './index.scss';

function PreviewPDF() {

    const PDF_VIEWER_URL = new URL('./libs/pdfjs-4.5.136-dist/web/viewer.html', import.meta.url).href;

    return (
        <>
            <iframe className="pdf-viewer-wrap" frameBorder={0} src={`${PDF_VIEWER_URL}?file=${encodeURIComponent('/2015/textbook/somatosensory.pdf')}`}/>
        </>
    );
}

export default PreviewPDF;
css 复制代码
.pdf-viewer-wrap{
  width: 100%;
  height: 100%;
}
相关推荐
万少5 分钟前
01-万少带你精读鸿蒙 codelabs 一多界面适配和三层架构
前端·harmonyos
凌览11 分钟前
36k Star 的 OCR 前端 SDK 轻松上手图像识别
前端·javascript·github
web组态软件20 分钟前
web组态可视化编辑器
大数据·前端·物联网·低代码·数学建模·编辑器
还是鼠鼠22 分钟前
http 服务器概念详细介绍
前端·javascript·vscode·http·node.js·web
2501_9068007624 分钟前
web组态可视化编辑器
前端·物联网·低代码·数学建模·编辑器·web
Bessie23435 分钟前
无障碍阅读(Web Accessibility)NVDA打开朗读查看器后,enter键不生效的原因
前端·vue.js
车轮滚滚__1 小时前
使用Nodejs基于DeepSeek加chromadb实现RAG检索增强生成 本地知识库
前端·javascript·ai·node.js·aigc
Gazer_S1 小时前
【路径查询组件优化记录:数据处理与显示逻辑重构】
前端·javascript·重构
好_快1 小时前
Lodash源码阅读-slice
前端·javascript·源码阅读
好_快1 小时前
Lodash源码阅读-baseSlice
前端·javascript·源码阅读