我必须在我的页面上使用PDFJS库显示PDF.问题在于,因为我将比例作为固定数量的画布给出,其中呈现的PDF不响应并且不适合引导网格列宽度.这是HTML代码:
<div class="row">
<div class="col-md-1" style="padding-right: 15px;">
<input type="button" ng-click="openPreviousPage()"/>
</div>
<div class="col-md-8">
<canvas id="the-canvas" style="border: 1px solid black;"></canvas>
</div>
<div class="col-md-1 col-md-offset-2" style="padding-right:15px;">
<input type="button" ng-click="openNextPage()" />
</div>
</div>
和我在控制器中的Typescript:
openPage = (pdf: PDFDocumentProxy, pageNumber: number) => {
pdf.getPage(pageNumber).then(function getPage(page) {
var scale = 1;
var viewport = page.getViewport(scale);
var canvas = <HTMLCanvasElement>document.getElementById('the-canvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext = {
canvasContext: context,
viewport: viewport
};
//...rest of actions
});
}
对任何暗示都会感激不尽.
我正在使用cordova APP中的PDJS View.
一切正常,但pdf有点模糊.我知道它是以某种方式因为视网膜显示,但我怎么能改变这个oder我如何获得正确的比例？
目前我试试这个
pdfFile.getPage(data.page).then(function (page) {
canvas.width = $('#pdfContainer').width();
var viewport = page.getViewport(canvas.width / (page.getViewport(1).width));
canvas.width = viewport.width;
canvas.height = viewport.height;
var height= $('#pdfContainer').height();
if (canvas.height > height) {
canvas.height = height;
var viewport = page.getViewport(canvas.height / (page.getViewport(1).height));
canvas.width = viewport.width;
canvas.height = viewport.height;
}
var renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
});
我想使用PDF.js从pdf文件生成缩略图,但它不像只有一个文件的其他js,并且所有需要在项目中包含js的是:
<script src="any.js"></script>
如何在我的项目中使用PDF.js？我在后端使用PHP.
使用pdf.js，我做了一个简单的函数来从 pdf 中提取原始文本：
async getPdfText(path){
const pdf = await PDFJS.getDocument(path);
const pagePromises = [];
for (let j = 1; j <= pdf.numPages; j++) {
const page = pdf.getPage(j);
pagePromises.push(page.then((page) => {
const textContent = page.getTextContent();
return textContent.then((text) => {
return text.items.map((s) => s.str).join('');
});
}));
}
const texts = await Promise.all(pagePromises);
return texts.join('');
}
// usage
getPdfText("C:\\my.pdf").then((text) => { console.log(text); });
但是我找不到正确提取新行的方法，所有文本仅在一行中提取。
如何正确提取文本？我想以与台式电脑相同的方式提取文本：
打开pdf（双击文件）-> 选择所有文本（CTRL + A）-> 复制所选文本（CTRL + C）-> 粘贴复制的文本（CTRL + V）
任务
在您的网页画布
<canvas id="pdfCanvas">
创建现有的帆布织物帆布
new fabric.Canvas("pdfCanvas");
已经mouse.down,mouse.up,mouse.move方法,使绘制矩形呈现PDF在上面的帆布"pdfCanvas"现在使用的浏览器PDF.js现在显示渲染PDF在pdf上绘制矩形,它隐藏了渲染的画布,但它确实绘制了对象
问题
这里是小提琴,看问题: -运行上面https://jsfiddle.net/hiitskiran/wgz8qore/2/ -你可以看到织物矩形躲在渲染PDF的背后-点击PDF画布区域看织物对象
我的问题是每次使用viewer.js呈现pdf文件时,我的应用程序的内存使用量都会增加.
我这样渲染我的pdf:
container = document.getElementById('viewerContainer');
viewer = document.getElementById('viewer');
pdfViewer = new PDFViewer({
container: container,
viewer: viewer
});
$scope.pdfFindController = new PDFFindController({
pdfViewer: pdfViewer
});
pdfViewer.setFindController($scope.pdfFindController);
container.addEventListener('pagesinit', function () {
pdfViewer.currentScaleValue = 'page-width';
});
PDFJS.getDocument($scope.getPageLink(pdf)).then(function (pdfDocument) {
documentPdf = pdfDocument;
pdfViewer.setDocument(pdfDocument);
});
我在单独的视图中呈现文件.当我回到上一个视图并打开另一个文件时,内存使用量增加了大约20MB.
我试过这个:
documentPdf.destroy();
现在,内存使用量略有下降,但没有以前分配的那么多.
这有解决方案吗？
更新:
Pdf.js版本:1.6.210
pdf.js工人版:1.6.210
这个问题特定于pdf.js,一个基于javascript的pdf渲染器.我正在构建一个自定义版本,我需要提取我在pdf中选择的文本.
还有其他帖子可以从一个页面或整个pdf文档中获取文本,例如此处的文档,但我希望获取用户选择的特定文本,并可能提醒它或在控制台中打印它.
我目前正在尝试创建一个实用程序来解析 PDF 中的注释。我可以很好地加载 PDF 文件，注释对象也很好，但我需要获取与这些注释相关的文本（下划线、突出显示等）。
当我尝试使用getTextContent()失败的方法时，这会变得毛茸茸的。下面是发生这种情况的方法：
/**
* @param pdf The PDF document obtained upon `pdfjs.getDocument(pdf).promise` success.
*/
function getAllPages(pdf) {
return new Promise((resolve, reject) => {
let allPromises = [];
for (let i = 0; i < numPages; i++) {
const pageNumber = i + 1; // note: pages are 1-based
const page = pdf.getPage(pageNumber)
.then((pageContent) => {
// testing with just one page to see what's up
if (pageNumber === 1) {
try {
pageContent.getTextContent()
.then((txt) …我试图在浏览器中显示PDF，我发现了库PDF.js，它是最受欢迎和建议最多的库。文档和都非常清楚，但是我尝试使用最新的官方版本2.0.943的文档未呈现，但已加载（因为我看到正确的页数），但是看不到。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<!--<script src="//mozilla.github.io/pdf.js/build/pdf.js"></script>-->
<script src="https://cdn.jsdelivr.net/npm/pdfjs-dist@2.0.943/build/pdf.js"></script>
<h1>PDF.js Previous/Next example</h1>
<div>
<button id="prev">Previous</button>
<button id="next">Next</button>
<span>Page: <span id="page_num"></span> / <span id="page_count"></span></span>
</div>
<canvas id="the-canvas"></canvas>
<script>
$(document).ready(function () {
var pdfData = atob(
'JVBERi0xLjcKCjEgMCBvYmogICUgZW50cnkgcG9pbnQKPDwKICAvVHlwZSAvQ2F0YWxvZwog' +
'IC9QYWdlcyAyIDAgUgo+PgplbmRvYmoKCjIgMCBvYmoKPDwKICAvVHlwZSAvUGFnZXMKICAv' +
'TWVkaWFCb3ggWyAwIDAgMjAwIDIwMCBdCiAgL0NvdW50IDEKICAvS2lkcyBbIDMgMCBSIF0K' +
'Pj4KZW5kb2JqCgozIDAgb2JqCjw8CiAgL1R5cGUgL1BhZ2UKICAvUGFyZW50IDIgMCBSCiAg' +
'L1Jlc291cmNlcyA8PAogICAgL0ZvbnQgPDwKICAgICAgL0YxIDQgMCBSIAogICAgPj4KICA+' +
'PgogIC9Db250ZW50cyA1IDAgUgo+PgplbmRvYmoKCjQgMCBvYmoKPDwKICAvVHlwZSAvRm9u' +
'dAogIC9TdWJ0eXBlIC9UeXBlMQogIC9CYXNlRm9udCAvVGltZXMtUm9tYW4KPj4KZW5kb2Jq' +
'Cgo1IDAgb2JqICAlIHBhZ2UgY29udGVudAo8PAogIC9MZW5ndGggNDQKPj4Kc3RyZWFtCkJU' +
'CjcwIDUwIFRECi9GMSAxMiBUZgooSGVsbG8sIHdvcmxkISkgVGoKRVQKZW5kc3RyZWFtCmVu' +
'ZG9iagoKeHJlZgowIDYKMDAwMDAwMDAwMCA2NTUzNSBmIAowMDAwMDAwMDEwIDAwMDAwIG4g' +
'CjAwMDAwMDAwNzkgMDAwMDAgbiAKMDAwMDAwMDE3MyAwMDAwMCBuIAowMDAwMDAwMzAxIDAw' +
'MDAwIG4gCjAwMDAwMDAzODAgMDAwMDAgbiAKdHJhaWxlcgo8PAogIC9TaXplIDYKICAvUm9v' +
'dCAxIDAgUgo+PgpzdGFydHhyZWYKNDkyCiUlRU9G');
// Loaded via <script> tag, create shortcut to access …我出于某些pdf目的直接在Angular应用中使用了pdf.js。工作正常。
我从pdfjs-dist导入了pdfjs，而我的package.json包含了pdfjs-dist。
我的pdf工作正常，但是在控制台中，出现以下错误。
pdf.js:9067 GET http://localhost:4300/main.bundle.worker.js 404 (Not Found)
pdf.js:351 Warning: Setting up fake worker.
如何在角度CLI应用程序中正确设置worker？