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%;
}
相关推荐
一名技术极客几秒前
Vue2 doc、excel、pdf、ppt、txt、图片以及视频等在线预览
pdf·powerpoint·excel·文件在线预览
熊的猫29 分钟前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js
瑶琴AI前端1 小时前
uniapp组件实现省市区三级联动选择
java·前端·uni-app
会发光的猪。1 小时前
如何在vscode中安装git详细新手教程
前端·ide·git·vscode
我要洋人死2 小时前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人2 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人2 小时前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR2 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香2 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596933 小时前
前端预览word、excel、ppt
前端·word·excel