Javascript 带文本选择的pdf.js_Javascript_Jquery_Pdf.js

Javascript 带文本选择的pdf.js

javascript jquery

Javascript 带文本选择的pdf.js,javascript,jquery,pdf.js,Javascript,Jquery,Pdf.js,如何使PDF中的文本可选我在这里试过。PDF写得很好，但没有文本选择 https://github.com/mozilla/pdf.js/blob/master/web/text_layer_builder.css https://github.com/mozilla/pdf.js/blob/master/web/text_layer_builder.js "严格使用",； getDocument（'file.pdf'）。然后（函数（pdf）{ 变量page_num=1； getPage（p

如何使PDF中的文本可选

我在这里试过。PDF写得很好，但没有文本选择

https://github.com/mozilla/pdf.js/blob/master/web/text_layer_builder.css
https://github.com/mozilla/pdf.js/blob/master/web/text_layer_builder.js
"严格使用",；
getDocument（'file.pdf'）。然后（函数（pdf）{
变量page_num=1；
getPage（page_num）.then（function（page）{
var标度=1.5；
var viewport=page.getViewport（比例）；
var canvas=document.getElementById（'the-canvas'）；
var context=canvas.getContext（'2d'）；
canvas.height=viewport.height；
canvas.width=viewport.width；
var canvasOffset=$（canvas.offset（）；
var$textLayerDiv=$（“#文本层”）.css({
高度：视口。高度+px，
宽度：视口。宽度+px，
top:canvasOffset.top，
左：canvasOffset.left
});
page.render({
背景：背景，
视口：视口
});
page.getTextContent（）.then（函数（textContent）{
var textLayer=新TextLayerBuilder({
textLayerDiv:$textLayerDiv.get（0），
pageIndex:page_num-1，
视口：视口
});
textLayer.setTextContent（textContent）；
textLayer.render（）；
});
});
});

您好，您已经在HTML内容中创建了画布

画布不支持文本选择，因此您需要将画布更改为另一种方式。

您的javascript代码非常完美。您只需要包括文本层生成器所依赖的UI实用程序：

或以HTML格式：

<script src="https://raw.githubusercontent.com/mozilla/pdf.js/master/web/ui_utils.js"></script>

经过数小时的努力，我发现这篇文章对于选择文本和在没有节点的情况下使用pdf.js非常有用。

在pdf.js版本2.8.61上，选中的答案不再有效，因为renderTextLayer（）已集成到pdf.js中，不需要更多外部源代码，也不需要jQuery

以下代码将使PDF文本可选择。它加载以下PDF文档作为示例，请将其替换为您自己的：

它主要使用两个html元素：

<canvas id="the-canvas"></canvas>
<div class="textLayer"></div>

用于显示非可选文档的画布，.textLayer div用于可选文本。textLayer div上的文本是透明的，因此不可见，它只提供选择效果


#画布{
边框：1px纯黑；
方向：ltr；
}
PDF.js上一个/下一个示例
以前的
下一个
页码：/
//如果提供了来自远程服务器的绝对URL，请配置CORS
//该服务器上的头。
var url='/raw.githubusercontent.com/mozilla/pdf.js/ba2deae/web/compressed.tracemonkey-pldi-09.pdf'；
//通过标签加载，创建访问PDF.js导出的快捷方式。
var pdfjsLib=window['pdfjs-dist/build/pdf']；
//应规定工人的财产。
pdfjsLib.GlobalWorkerOptions.workerSrc='/mozilla.github.io/pdf.js/build/pdf.worker.js'；
var pdfDoc=null，
pageNum=1，
pageRendering=false，
pageNumPending=null，
//比例=0.8，
比例=1，
canvas=document.getElementById（'the-canvas'），
ctx=canvas.getContext（'2d'）；
/**
*从文档中获取页面信息，相应地调整画布大小，并呈现页面。
*@param num页码。
*/
函数呈现页面（num）{
pageRendering=true；
//使用promise获取页面
pdfDoc.getPage（num）.然后（函数（第页）{
var viewport=page.getViewport（{scale:scale}）；
canvas.height=viewport.height；
canvas.width=viewport.width；
//将PDF页面呈现到画布上下文中
var renderContext={
画布背景：ctx，
视口：视口
};
var renderTask=page.render（renderContext）；
//等待渲染完成
promise.then（函数（）{
pageRendering=false；
如果（pageNumPending！==null）{
//新页面呈现挂起
渲染页面（pageNumPending）；
pageNumPending=null；
}
}).然后（函数（）{
//返回承诺，解析时将返回页面的文本内容
返回page.getTextContent（）；
}).then（函数（文本内容）{
//将CSS指定给textLayer元素
var textLayer=document.querySelector（“.textLayer”）；
textLayer.style.left=canvas.offsetLeft+'px'；
textLayer.style.top=canvas.offsetTop+'px'；
textLayer.style.height=canvas.offsetHeight+'px'；
textLayer.style.width=canvas.offsetWidth+'px'；
//将数据传递给在pdf画布上呈现文本的方法。
pdfjsLib.renderTextLayer({
textContent:textContent，
容器：textLayer，
视口：视口，
textDivs:[]
});
});
});
//更新页面计数器
document.getElementById（'page_num'）。textContent=num；
}
/**
*如果正在进行另一个页面渲染，请等待渲染完成
*完成了。否则，将立即执行渲染。
*/
函数queueRenderPage（num）{
如果（页面渲染）{
pageNumPending=num；
}否则{
渲染页面（num）；
}
}
/**
*显示上一页。
*/
函数onPrevPage（）{
如果（pageNum=pdfDoc.numPages）{
返回；
}
pageNum++；
queueRenderPage（pageNum）；
}
document.getElementById（'next'）。addEventListener（'click'，onNext'）；
/**
*异步下载PDF。
*/
pdfjsLib.getDocument（url）.promise.then（函数（pdfDoc)）{
pdfDoc=pdfDoc；
document.getElementById（'page_count'）。textContent=pdfDoc.numPages；
//初始/第一页呈现
渲染页面（pageNum）；
});

文本层不是一个

画布

，而是一个

div

，但它是

对您没有帮助？您已经尝试过了。。我做不到。。这是pdf.js的旧版本。这很漂亮。。谢谢D@clarkk它适用于哪个版本的

pdf.js

？在v1.3.91中，我对文本突出显示（区域太小）有奇怪的行为。过去是这样的

<!DOCTYPE html><meta charset="utf-8">
<link rel="stylesheet" href="https://raw.githubusercontent.com/mozilla/pdf.js/master/web/text_layer_builder.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/mozilla/pdf.js/master/web/ui_utils.js"></script>
<script src="https://raw.githubusercontent.com/mozilla/pdf.js/master/web/text_layer_builder.js"></script>
<script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
<body>
  <div>
    <canvas id="the-canvas" style="border:1px solid black;"></canvas>
    <div id="text-layer" class="textLayer"></div>
  </div>
<script>
'use strict';

PDFJS.getDocument('file.pdf').then(function(pdf){
    var page_num = 1;
    pdf.getPage(page_num).then(function(page){
        var scale = 1.5;
        var viewport = page.getViewport(scale);
        var canvas = $('#the-canvas')[0];
        var context = canvas.getContext('2d');
        canvas.height = viewport.height;
        canvas.width = viewport.width;

        var canvasOffset = $(canvas).offset();
        var $textLayerDiv = $('#text-layer').css({
            height : viewport.height+'px',
            width : viewport.width+'px',
            top : canvasOffset.top,
            left : canvasOffset.left
        });

        page.render({
            canvasContext : context,
            viewport : viewport
        });

        page.getTextContent().then(function(textContent){
           console.log( textContent );
            var textLayer = new TextLayerBuilder({
                textLayerDiv : $textLayerDiv.get(0),
                pageIndex : page_num - 1,
                viewport : viewport
            });

            textLayer.setTextContent(textContent);
            textLayer.render();
        });
    });
});
</script>

<canvas id="the-canvas"></canvas>
<div class="textLayer"></div>