【PDF.js】PDF文件预览

【PDF.js】PDF文件预览

  • 一、PDF.js
  • 二、PDF.js 下载
    • 1、下载PDF.js
    • 2、在项目中引入
    • 3、屏蔽跨域错误
  • 三、项目中使用
  • 四、说明
  • 五、实现效果

使用PDFJS实现pdf文件的预览,支持预览指定页、关键词搜索、缩略图、页面尺寸调整等等。

一、PDF.js

官方地址
文档地址

二、PDF.js 下载

1、下载PDF.js

下载地址

在这里插入图片描述

2、在项目中引入

将下载的压缩包解压并放入到项目中的public文件夹下,我这里下载的是pdfjs-4.0.379-dist版本,如下
在这里插入图片描述

3、屏蔽跨域错误

在 pdfjs-4.0.379-dist/web/viewer.mjs 内搜索 throw new Error(“file origin does not match viewer’s”) 并注释,如果不注释,可能会出现跨域错误,无法正常预览文件。
在这里插入图片描述

三、项目中使用

内容区域结构(文件预览区域、滑块区域、问答区域)
滑块区域:滑动改变pdf文件预览区域的大小

<div
    v-if="filePreviewStore.getFilePreviewFlag"
    ref="resizeBox"
    class="resize"
    @mousedown="onResizeMouseDown"
  />
<el-main ref="mainContent" class="main-content">
  <!-- 文件预览区域 -->
  <div
    v-if="filePreviewStore.getFilePreviewFlag"
    class="preview-box"
    :style="{width: `${previewBoxWidth}px`}"
  >
    <!-- <PdfPreview v-if="['ppt', 'pptx', 'pdf'].includes(filePreviewStore.getFileType)" /> -->
    <PDF v-if="['ppt', 'pptx', 'pdf'].includes(filePreviewStore.getFileType)" />
    <ExcelPreview v-if="['xls', 'xlsx'].includes(filePreviewStore.getFileType)" />
    <WordPreview v-if="['doc', 'docx'].includes(filePreviewStore.getFileType)" />
    <TxtPreview v-if="filePreviewStore.getFileType === 'txt'" />
  </div>
  <div
    v-if="filePreviewStore.getFilePreviewFlag"
    ref="resizeBox"
    class="resize"
    @mousedown="onResizeMouseDown"
  />
  <!-- 问答区域 -->
  <div class="main_side3 flex1 column-flex">
    <div class="show_content flex1" ref="chatShowRef"> <ChatShow /> </div>
    <div class="chat">
      <askInput />
    </div>
  </div>
</el-main>

下面是PDF组件完整代码

<template>
  <div class="container">
    <iframe id="myIframe" :src="pdfUrl" width="100%" height="100%"></iframe>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
import { useFilePreviewStore } from "@/stores";
import { fileRouteUrl } from "@/utils/fileRouteUrl"

const filePreviewStore = useFilePreviewStore()
const pdfUrl = ref('') // pdf文件地址
const fileUrl = '/static/dist/pdfjs-4.0.379-dist/web/viewer.html?file=' // pdfjs文件地址

onMounted(() => {
  // encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。
  // 核心就是将 iframe 的 src 属性设置为 pdfjs 的地址,然后将 pdf 文件的地址作为参数传递给 pdfjs
  // 例如:http://localhost:8080/pdfjs-4.0.189-dist/web/viewer.html?file=http%3A%2F%2Flocalhost%3A8080%2Fpdf%2Ftest.pdf
  const url = filePreviewStore.getFileUrl.replace(fileRouteUrl, '/file')
  pdfUrl.value = fileUrl + encodeURIComponent(url) + `&page=${filePreviewStore.getPageNum}`
})

// 当文档页码修改时,重新预览当前页的文档内容
watch(() => filePreviewStore.getPageNum,
  (val) => {
    if (val) {
      // 页码修改时,需要重新保存记录文档页码,否则会出现点击与第一次相同的页码时,不会切换
      filePreviewStore.setFilePage(val)
      const pdfFrame = document.getElementById('myIframe').contentWindow
      // 传递参数,跳转到指定页
      pdfFrame.PDFViewerApplication.pdfViewer.scrollPageIntoView({
        pageNumber: val
      })
    }
  }
)

// 当预览的文件地址修改时,预览新的文档
watch(() => filePreviewStore.getFileUrl,
  (val) => {
    if (val) {
      // 服务器文档地址
      const pdfFileUrl = val.replace(fileRouteUrl, '/file');
      // 加载PDF文件
      pdfUrl.value = fileUrl + encodeURIComponent(pdfFileUrl) + `&page=${filePreviewStore.getPageNum}`
    }
  }
)

</script>

<style scoped lang="less">
.container {
  width: 100%;
  height: 100%;
  border: 1px solid #ccc;
  box-sizing: border-box;
  #myIframe {
    border: none;
  }
}
</style>

四、说明

1)在文件地址后面添加参数page(预览指定页)
在这里插入图片描述
2)在 pdfjs-4.0.379-dist/web/viewer.mjs中的setInitialView方法中添加如下代码
在这里插入图片描述
3)改变文件预览区域的宽度

// 修改左侧文件预览区域的宽度
const previewBoxWidth = ref(0)
const mainContent = ref()
const resizeBox = ref()
const mainContentWidth = ref(0)
const onResizeMouseDown = (e: MouseEvent) => {
  const startX = e.clientX
  resizeBox.value.left = resizeBox.value.offsetLeft
  // 解决预览pdf文档时,鼠标移入iframe后,无法捕获移动和抬起操作
  const myIframe = document.querySelector('iframe')
  myIframe && (myIframe.style['pointer-events'] = 'none')
  const onDocumentMouseMove = (e: MouseEvent) => {
    const endX = e.clientX
    const previewWidth = resizeBox.value.left + (endX - startX) - side1Width.value - 20
    // 文件预览区域宽度最小为内容区域的30%,最大为内容区域的70%
    if (previewWidth >= mainContentWidth.value * 0.7) {
      previewBoxWidth.value = mainContentWidth.value * 0.7
    } else if (previewWidth <= mainContentWidth.value * 0.3) {
      previewBoxWidth.value = mainContentWidth.value * 0.3
    } else {
      previewBoxWidth.value = previewWidth
    }
  }

  const onDocumentMouseUp = () => {
    myIframe && (myIframe.style['pointer-events'] = 'auto')
    document.removeEventListener('mousemove', onDocumentMouseMove)
    document.removeEventListener('mouseup', onDocumentMouseUp)
    resizeBox.value.releaseCapture && resizeBox.value.releaseCapture()
  }

  document.addEventListener('mousemove', onDocumentMouseMove)
  document.addEventListener('mouseup', onDocumentMouseUp)
  resizeBox.value.setCapture && resizeBox.value.setCapture()
}

// 
const { width } = useWindowSize() // 响应式获取窗口尺寸
// 当浏览器窗口尺寸改变时,重新修改设置文件预览区域的宽度
watch(() => width.value,
  (val) => {
    val && (previewBoxWidth.value = mainContentWidth.value * 0.7)
  }
)

// 获取内容区域的宽度
useResizeObserver(mainContent , (entries) => {
  const entry = entries[0]
  const { width } = entry.contentRect
  mainContentWidth.value = width
})

这里需要注意,因为在PDF组件中使用了iframe,当鼠标移入iframe区域时,无法捕获到鼠标的移动和抬起动作,会出现鼠标移出iframe区域后有可以改变该区域宽度,解决办法如下:
在这里插入图片描述

五、实现效果

![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/2b286a949f564cd8958e352b8afe50b9.png
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/7fc5171aca4e4542b6817910ecab54e9.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/532997.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

SpringCloudAlibaba-整合sleuth和zipkin(六)

目录地址&#xff1a; SpringCloudAlibaba整合-CSDN博客 一、整合sleuth 1.引入依赖 在需要追踪的微服务中引入依赖&#xff0c;user、order、product <dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter…

spring boot 集成 flyway依赖 做数据库迁移,让部署没烦恼

flyway 是一个敏捷工具&#xff0c;用于数据库的移植。采用 Java 开发&#xff0c;支持所有兼容 JDBC 的数据库。 主要用于在你的应用版本不断升级的同时&#xff0c;升级你的数据库结构和里面的数据。 还是直接上代码 第一步&#xff1a; <!-- Flyway 数据库迁移 依赖 他…

LeetCode第22题:生成括号【22/1000 python 递归|动态规划】

作者介绍&#xff1a;10年大厂数据\经营分析经验&#xff0c;现任大厂数据部门负责人。 会一些的技术&#xff1a;数据分析、算法、SQL、大数据相关、python 欢迎加入社区&#xff1a;码上找工作http://t.csdnimg.cn/Q59WX作者专栏每日更新&#xff1a; LeetCode解锁1000题: 打…

【I/O】基于事件驱动的 I/O 模型---Reactor

Reactor 模型 BIO 到 I/O 多路复用 为每个连接都创建一个线程 假设我们现在有一个服务器&#xff0c;想要对接多个客户端&#xff0c;那么最简单的方法就是服务端为每个连接都创建一个线程&#xff0c;处理完业务逻辑后&#xff0c;随着连接关闭线程也要销毁&#xff0c;但是…

Meta的新AI深度伪造策略:增加标签,减少下架

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

【MYSQL锁】透彻地理解MYSQL锁

&#x1f525;作者主页&#xff1a;小林同学的学习笔录 &#x1f525;mysql专栏&#xff1a;小林同学的专栏 目录 1.锁 1.1 概述 1.2 全局锁 1.2.1 语法 1.2.1.1 加全局锁 1.2.1.2 数据备份 1.2.1.3 释放锁 1.2.1.4 特点 1.2.1.5 演示 1.3 表级锁 1.3.1 介绍 …

spring-cloud微服务openfeign

Spring Cloud openfeign对Feign进行了增强&#xff0c;使其支持Spring MVC注解&#xff0c;另外还整合了Ribbon和Nacos&#xff0c;从而使得Feign的使用更加方便 优势&#xff0c;openfeign可以做到使用HTTP请求远程服务时就像洞用本地方法一样的体验&#xff0c;开发者完全感…

计算机视觉 | 基于 ORB 特征检测器和描述符的全景图像拼接算法

Hi&#xff0c;大家好&#xff0c;我是半亩花海。本项目实现了基于 ORB 特征检测器和描述符的全景图像拼接算法&#xff0c;能够将两张部分重叠的图像拼接成一张无缝连接的全景图像。 文章目录 一、随机抽样一致算法二、功能实现三、代码解析四、效果展示五、完整代码 一、随机…

如何合理利用Vue 3中的ref和reactive

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…

uni-app实现分页--(1)准备工作,首页下拉触底加载更多

实现流程如下: 分析&#xff1a;需要在滚动容器中添加滚动触底&#xff0c;在猜你喜欢中获取数据。难点&#xff1a;如何在父页面调用子组件内的方法。父组件中用ref&#xff0c;并定义组件实例类型&#xff0c;子组件中暴露方法 具体代码如下&#xff1a; 1.在父组件中添加…

去中心化社交媒体:分析 Facebook 在区块链平台上的角色

在当今数字时代&#xff0c;社交媒体已经成为人们日常生活中不可或缺的一部分。然而&#xff0c;随着人们对数据隐私和信息控制的关注不断增加&#xff0c;传统的中心化社交媒体平台也面临着越来越多的质疑和挑战。为了应对这些挑战&#xff0c;越来越多的人开始探索去中心化社…

关于Renesas R7 的选项字节开关看门狗

Renesas看门狗的模式是在选项字节中进行配置的&#xff0c;OPBT0的寄存器说明如下&#xff0c; 关于看门狗模式 &#xff1a; 和看门狗喂狗方式&#xff1a; 我们选择关闭看门狗&#xff08;也就是配置31位为软件触发看门狗开始&#xff0c;然后不启动就相当于关闭&#xff09…

【动手学深度学习】15_汉诺塔问题

注&#xff1a; 本系列仅为个人学习笔记&#xff0c;学习内容为《算法小讲堂》&#xff08;视频传送门&#xff09;&#xff0c;通俗易懂适合编程入门小白&#xff0c;需要具备python语言基础&#xff0c;本人小白&#xff0c;如内容有误感谢您的批评指正 汉诺塔&#xff08;To…

2024谷歌Google广告推广投放怎么做?如何收费?

当今全球市场&#xff0c;谷歌作为全球最大的搜索引擎&#xff0c;其广告服务——Google Ads&#xff0c;已成为企业触达全球消费者、提升品牌知名度、驱动业务增长的首选渠道之一。尤其是在2024年&#xff0c;随着数字营销环境的持续演进&#xff0c;精准、高效地运用Google A…

MySQL-创建和管理表:基础知识、创建和管理数据库、创建表、修改表、重命名表、删除表、清空表、拓展

创建和管理表 1. 基础知识1.1 一条数据存储的过程1.2 标识符命名规则1.3 MySQL中的数据类型 2. 创建和管理数据库2.1 创建数据库2.2 使用数据库2.3 修改数据库2.4 删除数据库 3. 创建表3.1 创建方式13.2 创建方式23.3 查看数据表结构 4. 修改表4.1 追加一个列4.2 修改一个列4.3…

Prometheus+Grafana监控K8S集群(基于K8S环境部署)

目录 一.环境信息二.部署提前工作三.部署Prometheus监控系统四.部署Node_exporter组件五.部署Kube_state_metrics组件六.部署Grafana可视化平台七.Grafana接入Prometheus数据八.Grafana添加监控模板九.拓展 一.环境信息 1.服务器及k8s版本信息 IP地址主机名称角色版本192.168…

SAM功能改进VRP-SAM论文解读VRP-SAM: SAM with Visual Reference Prompt

现已总结SAM多方面相关的论文解读&#xff0c;具体请参考该专栏的置顶目录篇 一、总结 1. 简介 发表时间&#xff1a;2024年3月30日 论文&#xff1a; 2402.17726.pdf (arxiv.org)https://arxiv.org/pdf/2402.17726.pdf代码&#xff1a; syp2ysy/VRP-SAM (github.com)htt…

JVM面试整理--对象的创建和堆

文章目录 对象的创建过程是怎样的?对象在内存中的结构是怎样的&#xff08;专业的叫法&#xff1a;对象的内存布局&#xff09;对象在内存分配时使用的哪种方式&#xff08;有的地方也称为&#xff1a;分配算法&#xff09;知道什么是“指针碰撞”吗&#xff1f;知道什么是“空…

电商技术揭秘十八:电商平台的云计算与大数据应用小结

电商技术揭秘相关系列文章 电商技术揭秘一&#xff1a;电商架构设计与核心技术 电商技术揭秘二&#xff1a;电商平台推荐系统的实现与优化 电商技术揭秘三&#xff1a;电商平台的支付与结算系统 电商技术揭秘四&#xff1a;电商平台的物流管理系统 电商技术揭秘五&#xf…

【产品】ANET智能通信管理机 物联网网关 电力监控/能耗监测/能源管理系统

产品概述 本系列智能通信管理机是一款采用嵌入式硬件计算机平台&#xff0c;具有多个下行通信接口及一个或者多个上行网络接口&#xff0c;用于将一个目标区域内所有的智能监控/保护装置的通信数据整理汇总后&#xff0c;实时上传主站系统&#xff0c;完成遥信、遥测等能源数据…