React（三）：PDF文件在线预览（简易版）_react pdf预览

作者：码创造者 | 2024-08-09 06:18:15

踩

react pdf预览

效果

在这里插入图片描述

依赖下载

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

在这里插入图片描述

引入依赖

在这里插入图片描述

源码

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

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;
1
2
3
4
5
6
7
8
9
10
11
12
13
14

.pdf-viewer-wrap{
  width: 100%;
  height: 100%;
}
1
2
3
4

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/码创造者/article/detail/951829