[英]is there any way to render pdf.js page like real html elements not canvas or svg?
I am trying to make simple mobile UI that could be reading pdf, but I am planning to add many features by using my own made pdf read, not just by using the viewer made by pdf.js team, so I was asking if there is any way of rendering pdf as just an HTML with elements, as they did on their viewer, I am not comfortable with canvas, any help guys, Thanks in advance我正在尝试制作可以读取 pdf 的简单移动 UI,但我计划通过使用我自己制作的 pdf 读取来添加许多功能,而不仅仅是使用 Z437175BA4191210EE004E1D9374 团队制作的查看器,所以是任何将 pdf 渲染为带有元素的 HTML 的任何方式,就像他们在查看器上所做的那样,我对 canvas 感到不舒服,任何帮助,提前致谢
okay guys i finally found out the way pdf.js
has a method called getTextContent()
these method is called on each page as you render a page好吧,伙计们,我终于找到了pdf.js
有一个名为getTextContent()
的方法的方法,这些方法在您呈现页面时在每个页面上调用
simply get every page on you document只需获取文档上的每一页
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);
});
}
});
get every page's text content remember that it is continuous codes from previous ones then inside page.render()
add modify it like this way获取每个页面的文本内容记住它是来自以前的连续代码然后在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();
});
for full tutorial on how to do it go here有关如何做到这一点的完整教程 go在这里
I don't think there's such option.我不认为有这样的选择。
The only way of displaying pdf files in a browser (not every and not mobile browsers) using native support is by passing url to iframe/embed tag <iframe src="url_to_your.pdf">
使用本机支持在浏览器(并非所有移动浏览器)中显示 pdf 文件的唯一方法是将 url 传递给 iframe/embed 标签<iframe src="url_to_your.pdf">
But note that this still doesn't result in HTML output you are looking for.但请注意,这仍然不会导致您正在寻找 HTML output。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.