pdfjs 实现给定pdf数据切片高亮并且跳转
- pdfjs 类的改写
- 基本展示需求的实现
- 高亮功能的实现
- 查询功能分析
- 切片数据处理
pdfjs 类的改写
需求： pdf文件被解析成多个分段，每个分段需要能够展示，并且通过点击分段实现源pdf内容的高亮以及跳转需求。
pdfjs 中文文档https://gitcode.gitcode.host/docs-cn/pdf.js-docs-cn/getting_started/index.htmlhttps://github.com/mozilla/pdf.js
文档不够详细。pdf难就难在文档上
基本展示需求的实现
pdf.js 是一个由 Mozilla 开发的 JavaScript 库，可以在 Web 浏览器中显示 PDF 文档。pdf.js 将 PDF 文档转换为 HTML5 Canvas 元素，并使用 JavaScript 控制文档的呈现和交互。pdf.js 使得不需要在计算机上安装 Adobe Reader 或其他 PDF 阅读器就可以在 Web 上阅读 PDF 文档成为可能。pdf.js是一个免费的开源软件，使用和修改都非常方便。
pdf.js / src 是pdf.js 的 api层
pdf.js / web 是显示层，在api层的基础上进行UI展示，包括：pdf分页懒加载、切换页码、缩放、查找文字、选择本地文件、侧边栏导航、打印等功能。
预构建版本
├── build/
│ ├── pdf.js - display layer
│ ├── pdf.js.map - display layer's source map
│ ├── pdf.worker.js - core layer
│ └── pdf.worker.js.map - core layer's source map
├── web/
│ ├── cmaps/ - character maps (required by core)
│ ├── compressed.tracemonkey-pldi-09.pdf - PDF file for testing purposes
│ ├── debugger.js - helpful debugging features
│ ├── images/ - images for the viewer and annotation icons
│ ├── locale/ - translation files
│ ├── viewer.css - viewer style sheet
│ ├── viewer.html - viewer layout
│ ├── viewer.js - viewer layer
│ └── viewer.js.map - viewer layer's source map
└── LICENSE
源码版本
├── docs/ - website source code
├── examples/ - simple usage examples
├── extensions/ - browser extension source code
├── external/ - third party code
├── l10n/ - translation files
├── src/
│ ├── core/ - core layer
│ ├── display/ - display layer
│ ├── shared/ - shared code between the core and display layers
│ ├── interfaces.js - interface definitions for the core/display layers
│ ├── pdf.*.js - wrapper files for bundling
│ └── worker_loader.js - used for developer builds to load worker files
├── test/ - unit, font and reference tests
├── web/ - viewer layer
├── LICENSE
├── README.md
├── gulpfile.js - build scripts/logic
├── package-lock.json - pinned dependency versions
└── package.json - package definition and dependencies
展示功能很多人都做过了。我就不写了，粘一篇文章
pdf.js使用全教程
高亮功能的实现
由于后端的切片内容和前端从pdfjs中拿到的切片内容应该是相同的。即 ai \n mind\n 是 一款\n之类的切片。所以我们可以用后端切片去匹配我们前端的切片。（通过数据长度以即每个片的index来判断）,pdfjs也是通过这样的方式来实现的高亮。
- 切片数据格式： [切片1，切片2]（注意）
- 移除其他功能（直接在pdfview.html 文件中添加hidden类名实现隐藏）
- 切片渲染可参考pdf的查找功能，通过切片数据与pdf.js 解析出的文本数据 计算出数据，该数据结构与查找高亮的数据结构保持一致，通过pdfjs原生的渲染功能来进行渲染；
- 切片定位可参考pdf的查找功能。
查询功能分析
findController.pageMatches：第n页匹配到，相对于本页文本数据的开始index
findController.pageMatchesLenght：第n页匹配到的匹配字符串的长度
this._convertMatches 方法处理后的数据
粘贴 updateMatches方法
_updateMatches(reset = false) { // 清空原高亮筛选逻辑，调用_renderMatches渲染新高亮样式
if (!this.enabled && !reset) {
return;
}
const {
findController,
matches,
pageIdx
} = this;
const {
textContentItemsStr,
textDivs
} = this;
let clearedUntilDivIdx = -1;
for (const match of matches) {
const begin = Math.max(clearedUntilDivIdx, match.begin.divIdx);
for (let n = begin, end = match.end.divIdx; n <= end; n++) {
const div = textDivs[n];
div.textContent = textContentItemsStr[n];
div.className = "";
}
clearedUntilDivIdx = match.end.divIdx + 1;
}
if (!findController?.highlightMatches || reset) {
return;
}
console.log('findController.pageMatches 第n页匹配到，相对于本页文本数据的开始index',findController.pageMatches)
console.log('findController.pageMatchesLength 第n页匹配到的匹配字符串的长度', findController.pageMatchesLength)
const pageMatches = findController.pageMatches[pageIdx] || null;
console.log('pageMatches', pageMatches);
const pageMatchesLength = findController.pageMatchesLength[pageIdx] || null;
this.matches = this._convertMatches(pageMatches, pageMatchesLength);
console.log('this.matches', this.matches)
this._renderMatches(this.matches);
}
}
text_highlighter 类中处理逻辑
enable：页面渲染时调用，初始化绑定事件，调用页面渲染更新
_convertMatches：将数据1转换成数据2
_updateMatches：清空原高亮样式，调用_renderMatches渲染新高亮样式
_renderMatches：渲染高亮，并调用findController.scrollMatchIntoView
滚动到指定位置
切片数据处理
数据结构说明
切片数据： 必须有分页信息不然无法匹配每页的textHeight实例
[
// 第一页切片
{
pageIndex: 0，
cutInfo: [
'内容1','内容2'.....
]
}
// 第二页切片
{
pageIndex: 1，
cutInfo: [
'内容1','内容2'.....
]
}
]
注意事项：
1、normalizeUnicode处理文本数据，如 fi 这是一个字符，前后端解析可能会不一致，将前后端解析出来的数据使用pdf.js api暴露出来的normalizeUnicode进行处理，处理后为i f，两个字符，
2、空白字符过滤：前后端数据可能会存在空格、换行等空白字符差异（存在什么样的差异，比如前端会将多个空格合并成1个空格），计算时需要过滤。（我处理的正则/\s|\u0000|./g）
3、后端的切片数据 与 前端pdf拿到的数据有出入，渲染时无法完全对应
切片数据处理
1、将切片数据处理成分页的数据2，命名为pagesMatches，并添加自定义标识，
2、在text_highlighter中注册事件updatePagesMatches，用于接收存储pagesMatches，并调用_updateMatches重新渲染。
3、改造text_highlighter中_updateMatches，1清空原高亮出代码，2将第n页pagesMatches与查询的数据2合并，生成新的有自定义标识的数据2，使高亮渲染切片后查询功能正常。
4、调用_renderMatches进行渲染，将扩展的字段添加到html元素中，并添加样式。高亮渲染完成了。
5、高亮定位：
pagesMatches数据添加扩展字段isSelected
使所在页码滚动到可视区域PDFViewerApplication.pdfViewer.currentPageNumber=n
在_renderMatches渲染时根据 isSelected 与搜索选中selected 判断获取应该滚动到的html元素
调用findController.scrollMatchIntoView进行滚动
// 粘贴 textheight类
class TextHighlighter {
constructor({
findController,
eventBus,
pageIndex
}) {
this.findController = findController;
this.matches = [];
this.eventBus = eventBus;
this.pageIdx = pageIndex;
this._onUpdateTextLayerMatches = null;
this.textDivs = null;
this.textContentItemsStr = null;
this.enabled = false;
// 没有则创建 _onUpdatePagesMatches
if (!this._onUpdatePagesMatches) {
this._onUpdatePagesMatches = (evt) => {
if (evt.pagesMatches !== defaultPagesMatches) {
defaultPagesMatches = evt.pagesMatches;
defaultPagesMatchesIsFocus = true;
sessionStorage.removeItem("pdfFindBar");
}
this._updateMatches(false);
};
this.eventBus._on("updatePagesMatches", this._onUpdatePagesMatches);
}
}
setTextMapping(divs, texts) {
this.textDivs = divs;
this.textContentItemsStr = texts;
}
enable() { // 页面渲染时调用，初始化绑定事件，调用页面渲染更新
console.log('enable')
if (!this.textDivs || !this.textContentItemsStr) {
throw new Error("Text divs and strings have not been set.");
}
if (this.enabled) {
throw new Error("TextHighlighter is already enabled.");
}
console.log('页面渲染------------');
this.enabled = true;
if (!this._onUpdateTextLayerMatches) {
this._onUpdateTextLayerMatches = evt => {
if (evt.pageIndex === this.pageIdx || evt.pageIndex === -1) {
this._updateMatches();
}
};
this.eventBus._on("updatetextlayermatches", this._onUpdateTextLayerMatches);
}
if (!this._onUpdatePagesMatches) {
this._onUpdatePagesMatches = (evt) => {
if (evt.pagesMatches !== defaultPagesMatches) {
defaultPagesMatches = evt.pagesMatches;
defaultPagesMatchesIsFocus = true;
sessionStorage.removeItem("pdfFindBar");
}
this._updateMatches(false);
};
this.eventBus._on("updatePagesMatches", this._onUpdatePagesMatches);
}
this._updateMatches();
}
disable() {
if (!this.enabled) {
return;
}
console.log('disable')
this.enabled = false;
if (this._onUpdateTextLayerMatches) {
this.eventBus._off("updatetextlayermatches", this._onUpdateTextLayerMatches);
this._onUpdateTextLayerMatches = null;
}
// disable时候移除监听方法
if (this._onUpdatePagesMatches) {
this.eventBus._off("updatePagesMatches", this._onUpdatePagesMatches);
this._onUpdatePagesMatches = null;
}
this._updateMatches(true);
}
_convertMatches(matches, matchesLength) { // _convertMatches：将数据转换成begin end 格式
if (!matches) {
return [];
}
const {
textContentItemsStr
} = this;
let i = 0
let iIndex = 0;
const end = textContentItemsStr.length - 1;
const result = [];
try {
for (let m = 0, mm = matches.length; m < mm; m++) {
let matchIdx = matches[m];
while (i !== end && matchIdx >= iIndex + textContentItemsStr[i].length) {
iIndex += textContentItemsStr[i].length;
i++;
}
if (i === textContentItemsStr.length) {
console.error("Could not find a matching mapping");
}
const match = {
begin: {
divIdx: i,
offset: matchIdx - iIndex
}
};
matchIdx += matchesLength[m];
while (i !== end && matchIdx > iIndex + textContentItemsStr[i].length) {
iIndex += textContentItemsStr[i].length;
i++;
}
match.end = {
divIdx: i,
offset: matchIdx - iIndex
};
result.push(match);
}
} catch {
debugger
console.log(2222222222);
}
debugger
return result;
}
_renderMatches(matches) {
// Early exit if there is nothing to render.
if (matches.length === 0) {
return;
}
const isPagesMatch = sessionStorage.getItem("pdfFindBar") !== "pdfFindBar";
const { textContentItemsStr, textDivs, findController, pageIdx } = this;
if (!textDivs?.length) {
return;
}
const isSelectedPage = findController?.selected
? pageIdx === findController.selected.pageIdx
: true;
const selectedMatchIdx = findController?.selected?.matchIdx ?? 0;
// const highlightAll = !options ? findController.state.highlightAll : true;
const highlightAll = true;
let prevEnd = null;
const infinity = {
divIdx: -1,
offset: undefined,
};
function beginText(begin, className, styles) {
const divIdx = begin.divIdx;
if (!textDivs[divIdx]) {
return;
}
textDivs[divIdx].textContent = "";
return appendTextToDiv(divIdx, 0, begin.offset, className, styles);
}
function appendTextToDiv(divIdx, fromOffset, toOffset, className, styles) {
let div = textDivs[divIdx];
if (!div) {
return;
}
if (div.nodeType === Node.TEXT_NODE) {
const span = document.createElement("span");
div.before(span);
span.append(div);
textDivs[divIdx] = span;
div = span;
}
const content = textContentItemsStr[divIdx].substring(
fromOffset,
toOffset
);
const node = document.createTextNode(content);
if (className) {
const span = document.createElement("span");
if (styles && span) {
for (let p in styles) {
span.style[p] = styles[p];
}
}
span.className = `${className} appended`;
span.append(node);
div.append(span);
return className.includes("selected") ? span.offsetLeft : 0;
}
div.append(node);
return 0;
}
let i0 = selectedMatchIdx,
i1 = i0 + 1;
if (highlightAll) {
i0 = 0;
i1 = matches.length;
} else if (!isSelectedPage) {
// Not highlighting all and this isn't the selected page, so do nothing.
return;
}
let lastDivIdx = -1;
let lastOffset = -1;
let selectedElement;
let findIndex = -1;
for (let i = i0; i < i1; i++) {
const match = matches[i];
const begin = match.begin;
if (begin.divIdx === lastDivIdx && begin.offset === lastOffset) {
// It's possible to be in this situation if we searched for a 'f' and we
// have a ligature 'ff' in the text. The 'ff' has to be highlighted two
// times.
continue;
}
lastDivIdx = begin.divIdx;
lastOffset = begin.offset;
const end = match.end;
if (match.sectionIndex === undefined) {
findIndex += 1;
}
const isSelected = isPagesMatch
? match.isSelected
: isSelectedPage && findIndex === selectedMatchIdx;
const highlightSuffix = " " + match.className;
let selectedLeft = 0;
// Match inside new div.
if (!prevEnd || begin.divIdx !== prevEnd.divIdx) {
// If there was a previous div, then add the text at the end.
if (prevEnd !== null) {
appendTextToDiv(prevEnd.divIdx, prevEnd.offset, infinity.offset);
}
// Clear the divs and set the content until the starting point.
beginText(begin);
} else