当前位置: 首页 > news >正文

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;
.pdf-viewer-wrap{width: 100%;height: 100%;
}

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • Qt ts文件详解
  • 没有mac电脑ios上架截屏截图的最新方法
  • 如何在亚马逊云科技AWS上利用LoRA高效微调AI大模型减少预测偏差
  • C到C++——C++基础
  • 字段经常变,用什么数据库, mysql
  • 最新CSS3伪类和伪元素详解
  • CSS 多按钮根据半圆弧度排列
  • Vue - 关于v-wave 波浪动画组件
  • 【Dash】使用 dash_mantine_components 创建图表
  • 动态规划求解最小斯坦纳树(证了一天两夜)
  • 1998年考研真题英语二(204)阅读理解翻译
  • C语言宠物系统
  • CnosDB 元数据集群 – 分布式时序数据库的大脑
  • C++(week15): C++提高:(五)Redis数据库
  • 将PPT中的元素保存为高清图片
  • 【跃迁之路】【463天】刻意练习系列222(2018.05.14)
  • const let
  • CSS实用技巧干货
  • java8-模拟hadoop
  • Laravel 菜鸟晋级之路
  • Leetcode 27 Remove Element
  • Linux后台研发超实用命令总结
  • Linux中的硬链接与软链接
  • MQ框架的比较
  • Python利用正则抓取网页内容保存到本地
  • Spring Cloud(3) - 服务治理: Spring Cloud Eureka
  • vue-router的history模式发布配置
  • -- 查询加强-- 使用如何where子句进行筛选,% _ like的使用
  • 创建一个Struts2项目maven 方式
  • 检测对象或数组
  • 聚类分析——Kmeans
  • 盘点那些不知名却常用的 Git 操作
  • 原创:新手布局福音!微信小程序使用flex的一些基础样式属性(一)
  • # Python csv、xlsx、json、二进制(MP3) 文件读写基本使用
  • # 职场生活之道:善于团结
  • #565. 查找之大编号
  • (10)ATF MMU转换表
  • (2)关于RabbitMq 的 Topic Exchange 主题交换机
  • (2024)docker-compose实战 (8)部署LAMP项目(最终版)
  • (51单片机)第五章-A/D和D/A工作原理-A/D
  • (function(){})()的分步解析
  • (Matalb时序预测)WOA-BP鲸鱼算法优化BP神经网络的多维时序回归预测
  • (附源码)spring boot公选课在线选课系统 毕业设计 142011
  • (淘宝无限适配)手机端rem布局详解(转载非原创)
  • (转)Linux NTP配置详解 (Network Time Protocol)
  • *Algs4-1.5.25随机网格的倍率测试-(未读懂题)
  • *setTimeout实现text输入在用户停顿时才调用事件!*
  • ... 是什么 ?... 有什么用处?
  • .JPG图片,各种压缩率下的文件尺寸
  • .NET6 命令行启动及发布单个Exe文件
  • .Net插件开发开源框架
  • .NET多线程执行函数
  • .NET简谈设计模式之(单件模式)
  • .NET中的Exception处理(C#)
  • .NET中使用Protobuffer 实现序列化和反序列化