效果
依赖下载
引入依赖
源码
注意:
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%;
}