效果

依赖下载

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;

.pdf-viewer-wrap{width: 100%;height: 100%;
}