是否有一个支持文本选择的简约的PDF.js示例
Is there a minimalistic PDF.js sample that supports text selection?
我正在尝试PDF.js。
我的问题是Hello World演示不支持文本选择。它将在没有文本层的画布中绘制所有内容。官方的PDF.js演示确实支持文本选择，但是代码太复杂了。我想知道是否有人有一个极简的文本层演示。
我已经将示例提交到Mozilla的pdf.js存储库，它在
examples目录下可用。
我提交给pdf.js的原始示例不再存在，但我相信这个示例展示了文本选择。他们已经清理和重组了pdf.js，因此文本选择逻辑被封装在文本层中，可以使用工厂创建文本层。
具体来说，PDFJS.DefaultTextLayerFactory负责设置基本的文本选择内容。
下面的例子已经过时了;
这个问题我已经纠结了2-3天了，但我终于弄明白了。下面是一个演示如何在启用文本选择的情况下加载PDF的示例。
解决这个问题的困难在于文本选择逻辑与查看器代码(viewer.js, viewer.html, viewer.css)交织在一起。我必须提取相关的代码和CSS才能使其工作(该JavaScript文件在文件中被引用;你也可以点击这里查看)。最终的结果是一个最小的演示，应该证明是有用的。为了正确地实现选择，viewer.css中的CSS也非常重要，因为它为div设置了最终创建的CSS样式，然后用于使文本选择工作。
繁重的工作由TextLayerBuilder对象完成，它实际处理选择div的创建。您可以在viewer.js中看到对该对象的调用。
无论如何，这是包含CSS的代码。请记住，您仍然需要pdf.js文件。我的小提琴有一个链接到我从Mozilla的GitHub repo为pdf.js构建的版本。我不想直接链接到repo的版本，因为他们一直在开发它，它可能会被破坏。
废话少说:
HTML:<html>
<head>
<title>Minimal pdf.js text-selection demo</title>
</head>
<body>
<div id="pdfContainer" class = "pdf-content">
</div>
</body>
</html>
.pdf-content {
border: 1px solid #000000;
}
/* CSS classes used by TextLayerBuilder to style the text layer divs */
/* This stuff is important! Otherwise when you select the text, the text in the divs will show up! */
::selection { background:rgba(0,0,255,0.3); }
::-moz-selection { background:rgba(0,0,255,0.3); }
.textLayer {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
color: #000;
font-family: sans-serif;
overflow: hidden;
}
.textLayer > div {
color: transparent;
position: absolute;
line-height: 1;
white-space: pre;
cursor: text;
}
.textLayer .highlight {
margin: -1px;
padding: 1px;
background-color: rgba(180, 0, 170, 0.2);
border-radius: 4px;
}
.textLayer .highlight.begin {
border-radius: 4px 0px 0px 4px;
}
.textLayer .highlight.end {
border-radius: 0px 4px 4px 0px;
}
.textLayer .highlight.middle {
border-radius: 0px;
}
.textLayer .highlight.selected {
background-color: rgba(0, 100, 0, 0.2);
}
//Minimal PDF rendering and text-selection example using pdf.js by Vivin Suresh Paliath (http://vivin.net)
//This fiddle uses a built version of pdf.js that contains all modules that it requires.
//
//For demonstration purposes, the PDF data is not going to be obtained from an outside source. I will be
//storing it in a variable. Mozilla's viewer does support PDF uploads but I haven't really gone through
//that code. There are other ways to upload PDF data. For instance, I have a Spring app that accepts a
//PDF for upload and then communicates the binary data back to the page as base64. I then convert this
//into a Uint8Array manually. I will be demonstrating the same technique here. What matters most here is
//how we render the PDF with text-selection enabled. The source of the PDF is not important; just assume
//that we have the data as base64.
//
//The problem with understanding text selection was that the text selection code has heavily intertwined
//with viewer.html and viewer.js. I have extracted the parts I need out of viewer.js into a separate file
//which contains the bare minimum required to implement text selection. The key component is TextLayerBuilder,
//which is the object that handles the creation of text-selection divs. I have added this code as an external
//resource.
//
//This demo uses a PDF that only has one page. You can render other pages if you wish, but the focus here is
//just to show you how you can render a PDF with text selection. Hence the code only loads up one page.
//
//The CSS used here is also very important since it sets up the CSS for the text layer divs overlays that
//you actually end up selecting.
//
//For reference, the actual PDF document that is rendered is available at:
//http://vivin.net/pub/pdfjs/TestDocument.pdf
var pdfBase64 = "..."; //should contain base64 representing the PDF
var scale = 1; //Set this to whatever you want. This is basically the "zoom" factor for the PDF.
/**
* Converts a base64 string into a Uint8Array
*/
function base64ToUint8Array(base64) {
var raw = atob(base64); //This is a native function that decodes a base64-encoded string.
var uint8Array = new Uint8Array(new ArrayBuffer(raw.length));
for(var i = 0; i < raw.length; i++) {
uint8Array[i] = raw.charCodeAt(i);
}
return uint8Array;
}
function loadPdf(pdfData) {
PDFJS.disableWorker = true; //Not using web workers. Not disabling results in an error. This line is
//missing in the example code for rendering a pdf.
var pdf = PDFJS.getDocument(pdfData);
pdf.then(renderPdf);
}
function renderPdf(pdf) {
pdf.getPage(1).then(renderPage);
}
function renderPage(page) {
var viewport = page.getViewport(scale);
var $canvas = jQuery("<canvas></canvas>");
//Set the canvas height and width to the height and width of the viewport
var canvas = $canvas.get(0);
var context = canvas.getContext("2d");
canvas.height = viewport.height;
canvas.width = viewport.width;
//Append the canvas to the pdf container div
jQuery("#pdfContainer").append($canvas);
//The following few lines of code set up scaling on the context if we are on a HiDPI display
var outputScale = getOutputScale();
if (outputScale.scaled) {
var cssScale = 'scale(' + (1 / outputScale.sx) + ', ' +
(1 / outputScale.sy) + ')';
CustomStyle.setProp('transform', canvas, cssScale);
CustomStyle.setProp('transformOrigin', canvas, '0% 0%');
if ($textLayerDiv.get(0)) {
CustomStyle.setProp('transform', $textLayerDiv.get(0), cssScale);
CustomStyle.setProp('transformOrigin', $textLayerDiv.get(0), '0% 0%');
}
}
context._scaleX = outputScale.sx;
context._scaleY = outputScale.sy;
if (outputScale.scaled) {
context.scale(outputScale.sx, outputScale.sy);
}
var canvasOffset = $canvas.offset();
var $textLayerDiv = jQuery("<div />")
.addClass("textLayer")
.css("height", viewport.height + "px")
.css("width", viewport.width + "px")
.offset({
top: canvasOffset.top,
left: canvasOffset.left
});
jQuery("#pdfContainer").append($textLayerDiv);
page.getTextContent().then(function(textContent) {
var textLayer = new TextLayerBuilder($textLayerDiv.get(0), 0); //The second zero is an index identifying
//the page. It is set to page.number - 1.
textLayer.setTextContent(textContent);
var renderContext = {
canvasContext: context,
viewport: viewport,
textLayer: textLayer
};
page.render(renderContext);
});
}
var pdfData = base64ToUint8Array(pdfBase64);
loadPdf(pdfData);
因为这是一个老问题和老答案，让它与最新的PDF.JS版本一起工作，你可以使用这个解决方案
http://www.ryzhak.com/converting-pdf-file-to-html-canvas-with-text-selection-using-pdf-js 下面是他们使用的代码:从PDF.js代码中包含以下CSS和脚本<link rel="stylesheet" href="pdf.js/web/text_layer_builder.css" />
<script src="pdf.js/web/ui_utils.js"></script>
<script src="pdf.js/web/text_layer_builder.js"></script>
使用下面的代码来加载PDF:
PDFJS.getDocument("oasis.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();
});
});
});
如果你想在不同的页面中呈现pdf文档的所有页面，你可以使用
- pdf查看器
- 画布和渲染器解析文本并将其附加到画布上，使其看起来像文本选择。
但是在实际场景中，如果你要处理画布，比如放大/缩小，那么这个画布操作将严重降低你的浏览器性能。请查看下面的网址，
http://learnnewhere.unaux.com/pdfViewer/viewer.html你可以从这里得到完整的代码https://github.com/learnnewhere/simpleChatApp/tree/master/pdfViewer
相关文章：
- Pdf.js:使用base64文件源而不是url来呈现Pdf文件
- PDF.js - 一次打印多个文档
- 使用PDF.js获取PDF的修剪区域
- PDF.js在打印时插入空白页
- 正在获取文本内容pdf.js
- PDF.js插入图像
- 使用pdf.js查看器打开一个外部文件
- 使用PDF.JS和AngularJS从字节数组渲染PDF
- 使用pdf.js突出显示pdf中的一个部分
- 有没有办法用pdf.js为pdf渲染编写javascript事件
- 访问PDF.js查看器函数/事件
- 使用 pdf.js 将 PDF 嵌入网页
- 如何刷新PDF.js查看器的缓存
- 如何使用 PDF .js阅读页脚文本
- PDF.js:从另一台服务器读取文件
- pdf.js IE11 中的错误，src 属性 (0x800a138f）
- 如何使用 pdf.js 进行搜索
- 放大简单的 pdf.js 查看器
- PDF.js如何创建页面呈现事件
- 使用 pdf .js 的 pdf 图像质量很差
