【PDF.js】PDF文件预览-三、项目中使用

内容区域结构(文件预览区域、滑块区域、问答区域)
滑块区域：滑动改变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>