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%;
}
相关推荐
裁二尺秋风36 分钟前
Nginx — Nginx处理Web请求机制解析
前端·nginx
excel40 分钟前
webpack 核心编译器 第五节
前端
曲辒净2 小时前
vue搭建一个树形菜单项目
前端·javascript·vue.js
inxunoffice2 小时前
批量压缩与优化 PDF 文档,减少 PDF 文件的大小
pdf
码农老起6 小时前
与Aspose.pdf类似的jar库分享
java·pdf·jar
喝拿铁写前端7 小时前
前端与 AI 结合的 10 个可能路径图谱
前端·人工智能
codingandsleeping7 小时前
浏览器的缓存机制
前端·后端
灵感__idea9 小时前
JavaScript高级程序设计(第5版):扎实的基本功是唯一捷径
前端·javascript·程序员
摇滚侠9 小时前
Vue3 其它API toRow和markRow
前端·javascript