admin管理员组文章数量:1649929
文章目录
- 前言
- 一、下载依赖
- 二、实现
- 1. 引入依赖
- 2. 实现预览
- 3. 跳转实现
- 总结
前言
当前项目中需要实现一个pdf在线预览 并根据外部按钮进行跳转到对应位置的需求
从网上各种百度 查询 没有看到有相似功能实现 通过查询各种api 进行了一个实现
ps: 我的预览跳转是 根据pdf中的批注进行跳转 仅供参考
一、下载依赖
npm install vue-pdf
npm install pdfjs-dist
二、实现
1. 引入依赖
import pdf from "vue-pdf";
import * as pdfjsLib from "pdfjs-dist/es5/build/pdf";
vue-pdf 用于 pdf 文档的在线预览 对pdf.js进行了对应封装 在vue中使用比较简洁
pdf.js 主要用于根据各种api 获取pdf中的对应数据
ps: 官方文档我实在是什么都没找到
2. 实现预览
components: {
pdf,
},
// 对于vue-pdf 进行注册
<div class="tools">
<el-button @click="prePage" :disabled="pageNum == 1">
上一页
</el-button>
<div class="page">{{ pageNum }}/{{ pageTotalNum }}</div>
<el-button
@click="nextPage"
:disabled="pageNum == pageTotalNum"
>
下一页
</el-button>
</div>
<pdf
ref="pdf"
:src="url"
:page="pageNum"
:rotate="pageRotate"
@page-loaded="pageLoaded($event)"
@num-pages="pageTotalNum = $event"
@error="pdfError($event)"
@link-clicked="page = $event"
>
</pdf>
// 预览pdf
getPdf() {
let url = this.pdfUrl; // 此处为后端返回
let loadingTask = pdf.createLoadingTask({ url: url });
loadingTask.promise
.then((pdf) => {
this.url = loadingTask;
// this.numPages = pdf.numPages;
this.pageTotalNum = pdf.numPages;
})
.catch((err) => {
console.error("pdf加载失败");
});
},
// 上一页函数,
prePage() {
let page = this.pageNum;
page = page > 1 ? page - 1 : this.pageTotalNum;
this.pageNum = page;
},
// 下一页函数
nextPage() {
let page = this.pageNum;
page = page < this.pageTotalNum ? page + 1 : 1;
this.pageNum = page;
},
// 页面加载回调函数,其中e为当前页数
pageLoaded(e) {
this.curPageNum = e;
},
// 其他的一些回调函数。
pdfError(error) {
console.error(error);
},
预览通过vue-pdf实现 我的实现方式为分页实现
3. 跳转实现
跳转按钮携带数据 – pdf中批注(后端根据pdf中解析出的批注信息返回)
<el-button
type="text"
size="small"
@click="toAcher(row)"
>
跳转
</el-button>
toAcher(row) {
let url = this.pdfUrl;
let loadingTaskCopy = pdfjsLib.getDocument(url);
loadingTaskCopy.promise.then((pdfDocument) => {
let numPages = pdfDocument.numPages;
// 获取第一页
for (let pageNumber = 1; pageNumber <= numPages; pageNumber++) {
pdfDocument.getPage(pageNumber).then((page) => {
page.getAnnotations().then((annotations) => {
annotations.forEach((annotation) => {
// 输出或处理批注信息
// content 为返回的对应的批注内容
if (
row.content == annotation.contents &&
!annotation.parentId
) {
let viewport = page.getViewport({ scale: 1 });
this.pageNum = pageNumber;
let canvasY = viewport.height - annotation.rect[1];
const container = document.getElementById("myPdf");
let viewHOrigin = 381.2;
let viewH = (window.innerHeight * 0.4).toFixed(2);
let scaleRate = viewH / viewHOrigin;
container.scrollTop = (canvasY + 36) * scaleRate;
container.scrollLeft = annotation.rect[2];
}
});
});
});
}
});
通过以上可以基本实现一个通过批注进行跳转的功能
ps: 我这里有一些根据自己的页面进行的操作
- let viewHOrigin = 381.2; 这里是获取我自己的页面高度 用作当分辨率不同时的切换
- let viewH = (window.innerHeight * 0.4).toFixed(2); 此处 window.innerHeight * 0.4 的操作是因为我设置了放置pdf预览的容器为40vh
- container.scrollTop = (canvasY + 36) * scaleRate; 此处设置距离顶部为 获取到批注位置 +36是因为预览pdf时使用的是分页预览 容器上方有按钮占位
总结
以上就是我实现点击外部按钮对于预览到的pdf进行跳转到对应位置的实现 希望能帮助到和我有同样问题的各位朋友!
版权声明:本文标题:pdf预览通过外部点击进行跳转--vuepdf.js 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dianzi/1729504114a1203423.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论