javascript 带有文本选择的 pdf.js
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33063213/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
pdf.js with text selection
提问by clarkk
How to make the text in a PDF selectable?
如何使 PDF 中的文本可选？
Have tried here. The PDF is written fine, but no text selection
在这里试过。PDF 写得很好，但没有文本选择
https://github.com/mozilla/pdf.js
https://github.com/mozilla/pdf.js
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
'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 = document.getElementById('the-canvas');
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){
var textLayer = new TextLayerBuilder({
textLayerDiv : $textLayerDiv.get(0),
pageIndex : page_num - 1,
viewport : viewport
});
textLayer.setTextContent(textContent);
textLayer.render();
});
});
});
<body>
<div>
<canvas id="the-canvas" style="border:1px solid black;"></canvas>
<div id="text-layer" class="textLayer"></div>
</div>
</body>
采纳答案by Sheepy
Your javascript code is perfect. You just need to include the UI utilities that Text Layer Builder depends on:
你的 javascript 代码是完美的。您只需要包含 Text Layer Builder 所依赖的 UI 实用程序：
https://github.com/mozilla/pdf.js/blob/master/web/ui_utils.js
https://github.com/mozilla/pdf.js/blob/master/web/ui_utils.js
Or in HTML:
或者在 HTML 中：
<script src="https://raw.githubusercontent.com/mozilla/pdf.js/master/web/ui_utils.js"></script>
If you run your code (without ui_utils) and check the debug console,
you will see ReferenceError: CustomStyle is not defined.
A quick searchin PDFjs's repowill show you it is defined in ui_utils.js.
如果您运行您的代码（没有 ui_utils）并检查调试控制台，您将看到ReferenceError: CustomStyle is not defined. 一个快速搜索在PDFjs的回购会告诉你它是在ui_utils.js定义。
Here is my minimal but complete code for your reference. I am using PDFjs's demo pdf here. Note that in production you should not link to raw.github.
这是我的最小但完整的代码供您参考。我在这里使用 PDFjs 的演示 pdf 。请注意，在生产中，您不应链接到 raw.github。
<!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>
回答by Petter Ivarsson
After hours of struggling with this I found this article to be very helpful about selecting text and using pdf.js without node. Custom PDF Rendering in JavaScript with Mozilla's PDF.Js
经过数小时的努力，我发现这篇文章对选择文本和使用没有节点的 pdf.js 非常有帮助。 使用 Mozilla 的 PDF.Js 在 JavaScript 中自定义 PDF 渲染
回答by Mitul
Hello you have created canvas in your HTML content.
您好，您已经在 HTML 内容中创建了画布。
Canvas will not support text selection so you need to change the canvas to another way.
画布将不支持文本选择，因此您需要将画布更改为另一种方式。
