page({{currentPage}}/{{total}})

`, data() { return { scale: pdf2htmlEX.defaultViewer?.scale, cataList: pdf2htmlEX.defaultViewer.pages.map(item => { return { id: item.num, class: 'pno pno-' + item.page.id, href: '#' + item.page.id } }), cataShow: false, total: pdf2htmlEX.defaultViewer.pages.length, currentPage: 1 } }, computed: { scaleText() { return parseInt(this.scale * 100) + '%' } }, mounted() { const self = this; document.addEventListener('click', function () { self.cataShow = false; }, true); const container = document.getElementById("page-container") container.addEventListener('scroll', debounce(self.keyLight, 500), true); this.$nextTick(function(){ self.keyLight() if(location.hash){ document.querySelector(location.hash).scrollIntoView() setTimeout(()=>{ document.querySelector(location.hash).scrollIntoView() },1000) } }) }, methods: { // 关键词高亮 keyLight() { console.log('keyLight') let self = this let lightTimeId = null function setLightOfPagination(oDiv) { if (!oDiv) return const pno = oDiv.attributes['data-page-no'].value self.currentPage = parseInt(pno.toString(16), 16) self.$nextTick(() => { document.querySelector('.pno.active').scrollIntoView() }) } function setLight(oDiv) { const keys = splitCookieString(decodeURIComponent(currentPageRawQuery), 'kw') // console.log('keys', keys,oDiv) if (!oDiv || !keys) return let hasKey = 0 let sText = oDiv.innerHTML let rHtml = new RegExp("\<.*?\>", "ig"), //匹配html元素 aHtml = sText.match(rHtml), num = -1; //存放html元素的数组 if (sText.includes('highlight-keyword')) return sText = sText.replace(rHtml, '{~}'); //替换html标签 for (const key of keys.split('||__||')) { let sKey = "$&", rStr = new RegExp(key, "gi"); const lowerHtml = sText.toLowerCase() const lowerKey = key.toLowerCase() const condition = (lowerHtml.includes(lowerKey))//含有关键字并且从未设置过高亮 if (condition) { hasKey += 1 sText = sText.replace(rStr, sKey); //替换key } } if (hasKey) { sText = sText.replace(/{~}/g, function () { //恢复html标签 num++; return aHtml[num]; }); oDiv.innerHTML = sText; if (!isScrolled) { isScrolled = true // let hkDom = oDiv.querySelector('.highlight-keyword') // let position = offsetTop(hkDom) // let distance = position - 200 // 滚动距离 // console.log(distance) // document.querySelector('#page-container').scrollTop = distance } } // 获取元素的位置 function offsetTop(element) { var top; while (element.offsetTop === void 0) { element = element.parentNode; } top = element.offsetTop; while (element = element.offsetParent) { top += element.offsetTop; } return top; }; } // 自定义跨标签文本搜索和高亮功能 function crossTagHighlight(container, keywords) { // 获取容器内的所有文本节点 function getTextNodes(node) { let textNodes = []; if (node.nodeType === Node.TEXT_NODE) { textNodes.push(node); } else { for (let child of node.childNodes) { textNodes = textNodes.concat(getTextNodes(child)); } } return textNodes; } // 构建连续的文本内容和节点映射 function buildTextMap(textNodes) { let fullText = ''; let nodeMap = []; let currentPos = 0; textNodes.forEach(node => { const text = node.textContent; nodeMap.push({ node: node, start: currentPos, end: currentPos + text.length, text: text }); fullText += text; currentPos += text.length; }); return { fullText, nodeMap }; } // 在指定位置插入高亮标签 function insertHighlight(nodeMap, start, end, keyword) { // 找到涉及的文本节点 let affectedNodes = nodeMap.filter(item => (start < item.end && end > item.start) ); if (affectedNodes.length === 0) return; // 从后往前处理，避免位置偏移 for (let i = affectedNodes.length - 1; i >= 0; i--) { const nodeInfo = affectedNodes[i]; const node = nodeInfo.node; const nodeStart = Math.max(0, start - nodeInfo.start); const nodeEnd = Math.min(nodeInfo.text.length, end - nodeInfo.start); if (nodeStart < nodeEnd) { const beforeText = nodeInfo.text.substring(0, nodeStart); const highlightText = nodeInfo.text.substring(nodeStart, nodeEnd); const afterText = nodeInfo.text.substring(nodeEnd); // 创建新的节点结构 const fragment = document.createDocumentFragment(); if (beforeText) { fragment.appendChild(document.createTextNode(beforeText)); } if (highlightText) { const highlightSpan = document.createElement('span'); highlightSpan.className = 'highlight-keyword'; highlightSpan.setAttribute('data-keyword', keyword); highlightSpan.textContent = highlightText; fragment.appendChild(highlightSpan); } if (afterText) { fragment.appendChild(document.createTextNode(afterText)); } // 替换原节点 node.parentNode.replaceChild(fragment, node); } } } const textNodes = getTextNodes(container); const { fullText, nodeMap } = buildTextMap(textNodes); // 按长度排序关键词，优先匹配长的 const sortedKeywords = keywords.sort((a, b) => b.length - a.length); // 记录已高亮的区域，避免重复高亮 let highlightedRanges = []; sortedKeywords.forEach(keyword => { if (!keyword.trim()) return; const regex = new RegExp(keyword.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'gi'); let match; while ((match = regex.exec(fullText)) !== null) { const start = match.index; const end = start + match[0].length; // 检查是否与已高亮区域重叠 const isOverlapping = highlightedRanges.some(range => (start < range.end && end > range.start) ); if (!isOverlapping) { highlightedRanges.push({ start, end }); insertHighlight(nodeMap, start, end, keyword); // 重新构建文本映射，因为DOM结构已改变 const newTextNodes = getTextNodes(container); const newTextMap = buildTextMap(newTextNodes); fullText = newTextMap.fullText; nodeMap.length = 0; nodeMap.push(...newTextMap.nodeMap); // 重置正则表达式的lastIndex regex.lastIndex = 0; break; // 重新开始搜索 } } }); } // 设置高亮 - 优化版本，支持跨标签高亮 function setHightlight(oDiv){ const keys = splitCookieString(decodeURIComponent(currentPageRawQuery), 'kw').split('||__||') if (!keys || keys.length === 0 || keys[0] === '') return; // 先清除之前的高亮 const existingHighlights = oDiv.querySelectorAll('.highlight-keyword'); existingHighlights.forEach(el => { const parent = el.parentNode; parent.replaceChild(document.createTextNode(el.textContent), el); parent.normalize(); // 合并相邻的文本节点 }); // 过滤空关键词 const validKeys = keys.filter(key => key.trim() !== ''); if (validKeys.length === 0) return; try { // 首先尝试使用Mark.js的acrossElements功能 var instance = new Mark(oDiv); instance.unmark({ className: 'highlight-keyword' }); // 按长度排序，优先匹配长的关键词 const sortedKeys = validKeys.sort(function(a, b){ return b.length - a.length; }); let markJsSuccess = true; // 使用Mark.js的acrossElements选项来支持跨标签高亮 sortedKeys.forEach(keyword => { if (keyword.trim() !== '') { try { instance.mark(keyword.trim(), { className: 'highlight-keyword', acrossElements: true, // 关键：支持跨HTML元素匹配 separateWordSearch: false, // 不分割单词搜索 ignoreJoiners: true, // 忽略连接符 ignorePunctuation: ['.', ',', '!', '?', ';', ':', '-', '_', '(', ')', '[', ']', '{', '}', '"', "'", '/', '\\'], accuracy: { value: 'partially', // 部分匹配 limiters: [',', '.', '!', '?', ';', ':', '-', '_', '(', ')', '[', ']', '{', '}', '"', "'", '/', '\\', ' '] }, wildcards: 'enabled', // 启用通配符 each: function(element) { // 为每个高亮元素添加额外的处理 element.setAttribute('data-keyword', keyword); } }); } catch (e) { markJsSuccess = false; console.warn('Mark.js acrossElements failed, falling back to custom implementation:', e); } } }); // 如果Mark.js失败或者没有找到高亮结果，使用自定义跨标签高亮 if (!markJsSuccess || oDiv.querySelectorAll('.highlight-keyword').length === 0) { crossTagHighlight(oDiv, validKeys); } } catch (error) { console.warn('Mark.js not available or failed, using custom cross-tag highlight:', error); // 如果Mark.js不可用，直接使用自定义方法 crossTagHighlight(oDiv, validKeys); } } function action() { let flag = false const pageContainer = document.getElementById("page-container").querySelectorAll('[data-page-no]') pageContainer.forEach(item => { if (isElementInViewport(item)) { // 高亮页码 if (!flag) { setLightOfPagination(item) flag = true } // 高亮关键字 if (currentPageRawQuery) { // setLight(item) setHightlight(item) } } }) flag = false } if (lightTimeId) { clearTimeout(lightTimeId); } lightTimeId = setTimeout(() => { action() }, 200) }, // 点击目录 onClickCata() { this.cataShow = false this.$nextTick(() => { this.keyLight() }) }, onScalc(type) { if (type === '+') { this.scale = parseFloat(this.scale + 0.02).toFixed(2) * 1 } else { this.scale = parseFloat(this.scale - 0.02).toFixed(2) * 1 } this.onScalcReset(this.scale) }, onScalcReset(num) { this.scale = num pdf2htmlEX.defaultViewer.scale = this.scale pdf2htmlEX.defaultViewer.__proto__.scale = this.scale pdf2htmlEX.defaultViewer.rescale(this.scale) pdf2htmlEX.defaultViewer.pages.forEach(item => { item.page.cur_scale = this.scale item.page.style.width = item.original_width * this.scale + 'px' item.page.style.height = item.original_height * this.scale + 'px' if (item.content_box) { item.page.firstChild.style.transform = `scale(${this.scale})` } }) }, // 切换目录展示 toggle() { this.cataShow = !this.cataShow } } }) catalogueVue.mount('#root') } } })(window, document)