这个问题涉及到pdf.js,一个基于Javascript的pdf渲染器。我正在构建一个定制版本,在其中需要提取我在pdf中选择的文本。
有其他帖子可以从一页或整个pdf文档中获取文本,例如 这里,但我想抓取用户选择的特定文本,然后可能通过提示或在控制台中打印出来。
有其他帖子可以从一页或整个pdf文档中获取文本,例如 这里,但我想抓取用户选择的特定文本,然后可能通过提示或在控制台中打印出来。
getSelection()
与 pdf.js 结合使用的方法:function getHightlightCoords() {
var pageIndex = PDFViewerApplication.pdfViewer.currentPageNumber - 1;
var page = PDFViewerApplication.pdfViewer.getPageView(pageIndex);
var pageRect = page.canvas.getClientRects()[0];
var selectionRects = window.getSelection().getRangeAt(0).getClientRects();
var viewport = page.viewport;
var selected = selectionRects.map(function (r) {
return viewport.convertToPdfPoint(r.left - pageRect.x, r.top - pageRect.y).concat(
viewport.convertToPdfPoint(r.right - pageRect.x, r.bottom - pageRect.y));
});
return {page: pageIndex, coords: selected};
}
function showHighlight(selected) {
var pageIndex = selected.page;
var page = PDFViewerApplication.pdfViewer.getPageView(pageIndex);
var pageElement = page.canvas.parentElement;
var viewport = page.viewport;
selected.coords.forEach(function (rect) {
var bounds = viewport.convertToViewportRectangle(rect);
var el = document.createElement('div');
el.setAttribute('style', 'position: absolute; background-color: pink;' +
'left:' + Math.min(bounds[0], bounds[2]) + 'px; top:' + Math.min(bounds[1], bounds[3]) + 'px;' +
'width:' + Math.abs(bounds[0] - bounds[2]) + 'px; height:' + Math.abs(bounds[1] - bounds[3]) + 'px;');
pageElement.appendChild(el);
});
}
pdf.js在web目录下有一个文件查看器viewer.html。
在viewer.html中,您需要执行以下两个步骤:
<script>
// addEventListener version
document.addEventListener('selectionchange', () => {
console.log(document.getSelection());
});
// onselectionchange version
document.onselectionchange = () => {
var text = getSelectedText();
if(text)
{
alert(text);
}
};
function getSelectedText() {
if (window.getSelection) {
return window.getSelection().toString();
}
else if (document.selection) {
return document.selection.createRange().text;
}
return '';
}
</script>
function getHightlightCoords() {
var pageIndex = PDFViewerApplication.pdfViewer.currentPageNumber - 1;
var page = PDFViewerApplication.pdfViewer.getPageView(pageIndex);
var pageRect = page.canvas.getClientRects()[0];
var selectionRects = window.getSelection().getRangeAt(0).getClientRects();
var viewport = page.viewport;
var r = selectionRects[0];
var selected = viewport.convertToPdfPoint(r.left - pageRect.x, r.top - pageRect.y).concat(
viewport.convertToPdfPoint(r.right - pageRect.x, r.bottom - pageRect.y));
return {page: pageIndex, coords: selected};
}
// addEventListener version
document.addEventListener('selectionchange', () => {
console.log(getHightlightCoords());
});
这对我有效!