我想设计一个简单的移动UI,可以阅读pdf,但是我打算通过使用自己制作的pdf阅读器来添加许多功能,而不仅仅是使用pdf.js团队制作的查看器。 因此,我想问是否有任何将pdf呈现为只是带有元素的HTML的方法,就像他们在他们的查看器中所做的那样,我不熟悉canvas,请大家帮忙,谢谢。
我想设计一个简单的移动UI,可以阅读pdf,但是我打算通过使用自己制作的pdf阅读器来添加许多功能,而不仅仅是使用pdf.js团队制作的查看器。 因此,我想问是否有任何将pdf呈现为只是带有元素的HTML的方法,就像他们在他们的查看器中所做的那样,我不熟悉canvas,请大家帮忙,谢谢。
好的,伙计们,我终于找到了方法。pdf.js
有一个叫getTextContent()
的方法,当你渲染页面时,该方法会在每个页面上被调用。
简单地获取文档中的每一页
PDFJS.getDocument(url)
.then(function(pdf) {
// Get div#container and cache it for later use
var container = document.getElementById("container");
// Loop from 1 to total_number_of_pages in PDF document
for (var i = 1; i <= pdf.numPages; i++) {
// Get desired page
pdf.getPage(i).then(function(page) {
var scale = 1.5;
var viewport = page.getViewport(scale);
var div = document.createElement("div");
// Set id attribute with page-#{pdf_page_number} format
div.setAttribute("id", "page-" + (page.pageIndex + 1));
// This will keep positions of child elements as per our needs
div.setAttribute("style", "position: relative");
// Append div within div#container
container.appendChild(div);
// Create a new Canvas element
var canvas = document.createElement("canvas");
// Append Canvas within div#page-#{pdf_page_number}
div.appendChild(canvas);
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext = {
canvasContext: context,
viewport: viewport
};
// Render PDF page
page.render(renderContext);
});
}
});
获取每个页面的文本内容
记得这是延续上一个代码的连续性
然后在 page.render()
内进行修改,按照以下方式进行
// Render PDF page
page.render(renderContext)
.then(function() {
// Get text-fragments
return page.getTextContent();
})
.then(function(textContent) {
// Create div which will hold text-fragments
var textLayerDiv = document.createElement("div");
// Set it's class to textLayer which have required CSS styles
textLayerDiv.setAttribute("class", "textLayer");
// Append newly created div in `div#page-#{pdf_page_number}`
div.appendChild(textLayerDiv);
// Create new instance of TextLayerBuilder class
var textLayer = new TextLayerBuilder({
textLayerDiv: textLayerDiv,
pageIndex: page.pageIndex,
viewport: viewport
});
// Set text-fragments
textLayer.setTextContent(textContent);
// Render text-fragments
textLayer.render();
});
如需完整的教程,请前往此处
,讲解如何实现自定义PDF渲染。我认为没有这样的选项。
在浏览器中显示pdf文件的唯一方法(不是每个浏览器和移动浏览器都适用)是通过将url传递给iframe / embed标签<iframe src="url_to_your.pdf">
但请注意,这仍然不能产生您要查找的HTML输出。