比如我们需要预览 public 下的一个 test.pdf 文件

<div class="pdf-box">

<PDF url="/public/test.pdf" />

</div>

下面是界面默认预览效果

四、进阶使用

1、页面跳转

传参（初次渲染）

比如我们要跳到第 10 页，我们可以在地址里面添加参数 &page=${10}

pdfUrl.value = fileUrl + encodeURIComponent(props.url) + `&page=${ 10}`;

在 viewer.mjs 找到 setInitialView 函数，注意是下面这个：

重点：在函数末尾最下面添加下面的跳转代码（写在上面会报错，因为还没有获取到实例）

console.log(this.pdfViewer);

// 获取url参数

function getQueryVariable(variable) {

var query = window.location.search.substring(1);

var vars = query.split('&');code>

for (var i = 0; i < vars.length; i++) { -- -->

var pair = vars[i].split('=');

if (pair[0] == variable) {

return pair[1];

}

}

return false;

}

// 跳转到指定页

const page = getQueryVariable('page');

console.log(page);

if (page) {

this.pdfViewer.currentPageNumber = Number(page);

}

外部调用（渲染完成后）

<code> // 自动高亮文本（要解码）decodeURIComponent: 解码

const markText = decodeURIComponent(getQueryVariable('markText'));

console.log('markText===>', markText);

if (markText) { -- -->

// 对查询输入框进行赋值

document.getElementById('findInput').value = markText;

// 点击高亮按钮实现高亮显示关键词

document.getElementById('findHighlightAll').click();

}

目前我还没有找到批量标注的办法，批量标注建议还是使用下面页面+坐标，遮罩的方法

3、添加遮罩高亮（页码+坐标）

主要是为了解决批量标注的问题，因为 pdfjs 原生只支持单文本，不支持批量，要修改大量源码（我能力不行，太难了😥）

所以还是换了种方案，就是后端返回页码+坐标（通常是百分比坐标，因为pdf会缩放），添加遮罩层渲染的方式。

这种方法主要是找到渲染的 dom元素，因为渲染的pdf有一个叫做 <code>data-page-number="1"code> 的属性，因此我们可以通过 js 的 querySelectorAll 选择器找到对应属性的 dom 元素，然后再操作添加遮罩就可以了，代码放在下面。

我们会发现，在 pdf 缩放滚动等的缘故，会重新更新 pdf 的 UI 状态 ，我们添加的 div 就会消失，所以我们要在源码重新更新的时候重新添加高亮，源码内部重新添加的函数在这个位置：<code> #updateUIState

我们只需要将修改后重新添加的代码放在尾部就行

首先我们要修改第三部分的代码

<code>setInitialView(storedHash, { rotation, sidebarView, scrollMode, spreadMode } = {}) 初始化函数中：

window.content_pos = JSON.parse(decodeURIComponent(getQueryVariable('content_pos')));

console.log(window.content_pos[0]);

window.content_pos.forEach((item, index) => { -- -->

const page = item.page_no;

const shade = {

width: (item.right_bottom.x - item.left_top.x) * 100 + '%',

height: (item.right_bottom.y - item.left_top.y) * 100 + '%',

top: item.left_top.y * 100 + '%',

left: item.left_top.x * 100 + '%',

};

console.log(shade);

const pageList = document.querySelectorAll(`[data-page-number='${ page}']`);code>

const pageView = pageList[1];

const div = document.createElement('div');

div.id = 'shade' + index;

div.style.width = shade.width;

div.style.height = shade.height;

div.style.backgroundColor = 'rgb(255, 255, 0, 0.1)';

div.style.position = 'absolute';

div.style.top = shade.top;

div.style.left = shade.left;

div.style.zIndex = '1';

pageView.appendChild(div);

});

#updateUIState(resetNumPages = false) 更新函数中：

setTimeout(() => { -- -->

if (window.content_pos) {

window.content_pos.forEach((item, index) => {

const shadeEl = document.getElementById('shade' + index);

if (shadeEl) {

shadeEl.remove();

}

const page = item.page_no;

const shade = {

width: (item.right_bottom.x - item.left_top.x) * 100 + '%',

height: (item.right_bottom.y - item.left_top.y) * 100 + '%',

top: item.left_top.y * 100 + '%',

left: item.left_top.x * 100 + '%',

};

const pageList = document.querySelectorAll(`[data-page-number='${ page}']`);code>

const pageView = pageList[1];

const div = document.createElement('div');

div.id = 'shade' + index;

div.style.width = shade.width;

div.style.height = shade.height;

div.style.backgroundColor = 'rgb(255, 255, 0, 0.1)';

div.style.position = 'absolute';

div.style.top = shade.top;

div.style.left = shade.left;

div.style.zIndex = '1';

pageView.appendChild(div);

});

}

}, 500);

效果展示，可以实现跨页，多页渲染

6、添加遮罩高亮（外部调用）

如果我们不想要默认的一些工具栏效果，我们只需要在源码的 <code>viewer.html ，找到对应的 DOM 元素，设置 style="display:none;"code> 就可以了。

8、监听滚动页码（2024-08-05更新）

<code>#updateUIState(resetNumPages = false)

<code> window.parent.postMessage(

{ -- -->

page: pageNumber,

},

'*',

);

在父窗口监听就可以了~

function listenPage() {

// 在父窗口中

window.addEventListener(

'message',

function (event: any) {

if (event.data.page) {

// 处理消息

console.log('Received message:', event.data);

}

},

false,

);

}

9、修改侧边栏宽度（2024-08-13更新）

在<code>index.html中新增样式，记得添加 !important

<style>

:root { -- -->

--sidebar-width: 400px !important;

}

</style>

10、修改侧边栏预览的pdf宽度（2024-08-13更新）

搜索 THUMBNAIL_WIDTH

完整 PDF 组件代码

<code><script setup lang="ts">code>

import { -- --> nextTick, onMounted, ref, watch } from 'vue';

export interface RefDocsItem {

filename: string;

url: string;

page_no: number;

content_pos: {

page_no: number;

left_top: {

x: number;

y: number;

};

right_bottom: {

x: number;

y: number;

};

}[];

}

interface Props {

dcsInfo: RefDocsItem;

}

const props = defineProps<Props>();

const pdfUrl = ref(''); // pdf文件地址

let fileUrl = '/pdfjs-4.0.189-dist/web/viewer.html?file='; // pdfjs文件地址

const isRender = ref(false); // 是否渲染

// 源码渲染函数修改的位置在下面两个函数中

// 初次渲染：setInitialView(storedHash, { rotation, sidebarView, scrollMode, spreadMode } = {})

// 更新渲染：#updateUIState(resetNumPages = false)

// 跳转函数位置: scrollPageIntoView

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

console.log('dcsInfo.url===>', props.dcsInfo.url);code>

pdfUrl.value =

fileUrl +

encodeURIComponent(props.dcsInfo.url) +

`&page=${ -- -->props.dcsInfo.page_no}` +

`&content_pos=${ encodeURIComponent(

JSON.stringify(props.dcsInfo.content_pos),

)}`;

console.log('pdfUrl===>', pdfUrl.value);

nextTick(() => {

isRender.value = true;

});

});

// pdf 资源发生改变

watch(

() => props.dcsInfo,

(val, old) => {

// 判断是否需要重新渲染，因为有些只是跳页

if (isRender.value) {

// 同一个文件，跳转到指定位置

if (pdfUrl.value !== '' && val.filename === old.filename) {

// @ts-ignore

const pdfFrame = document.getElementById('myIframe').contentWindow;

// 传递参数

pdfFrame.PDFViewerApplication.pdfViewer.scrollPageIntoView({

pageNumber: props.dcsInfo.page_no,

content_pos: props.dcsInfo.content_pos,

});

} else {

pdfUrl.value =

fileUrl +

encodeURIComponent(props.dcsInfo.url) +

`&page=${ props.dcsInfo.page_no}` +

`&content_pos=${ encodeURIComponent(

JSON.stringify(props.dcsInfo.content_pos),

)}`;

}

}

},

);

</script>

<template>

<div class="container">code>

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

</div>

</template>

<style scoped lang="scss">code>

.container { -- -->

width: 100%;

height: 100%;

}

</style>

部署报错问题