【PDF.js】PDF文件预览

一、PDF.js二、PDF.js 下载1、下载PDF.js2、在项目中引入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文件预览区域的大小

<code><div

v-if="filePreviewStore.getFilePreviewFlag"code>

ref="resizeBox"code>

class="resize"code>

@mousedown="onResizeMouseDown"code>

/>

<el-main ref="mainContent" class="main-content">code>

<!-- 文件预览区域 -->

<div

v-if="filePreviewStore.getFilePreviewFlag"code>

class="preview-box"code>

:style="{width: `${previewBoxWidth}px`}"code>

>

<!-- <PdfPreview v-if="['ppt', 'pptx', 'pdf'].includes(filePreviewStore.getFileType)" /> -->code>

<PDF v-if="['ppt', 'pptx', 'pdf'].includes(filePreviewStore.getFileType)" />code>

<ExcelPreview v-if="['xls', 'xlsx'].includes(filePreviewStore.getFileType)" />code>

<WordPreview v-if="['doc', 'docx'].includes(filePreviewStore.getFileType)" />code>

<TxtPreview v-if="filePreviewStore.getFileType === 'txt'" />code>

</div>

<div

v-if="filePreviewStore.getFilePreviewFlag"code>

ref="resizeBox"code>

class="resize"code>

@mousedown="onResizeMouseDown"code>

/>

<!-- 问答区域 -->

<div class="main_side3 flex1 column-flex">code>

<div class="show_content flex1" ref="chatShowRef"> <ChatShow /> </div>code>

<div class="chat">code>

<askInput />

</div>

</div>

</el-main>

下面是PDF组件完整代码

<template>

<div class="container">code>

<iframe id="myIframe" :src="pdfUrl" width="100%" height="100%"></iframe>code>

</div>

</template>

<script setup lang="ts">code>

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')code>

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">code>

.container {

width: 100%;

height: 100%;

border: 1px solid #ccc;

box-sizing: border-box;

#myIframe {

border: none;

}

}

</style>

四、说明