Как изменить текст, показанный pdf.js?
Я не пытаюсь изменить PDF, я просто пытается изменить отображаемый текст
pdf.js выводит текст, который он читает в кучке divs .textLayer > div
, также рисует холст
I читайте здесь, что просмотр и редактирование pdf в браузере практически невозможно, но...
Так как у pdf.js есть API, моя идея - "подключить" к pdf.js и изменить отображаемый текст ( что более чем в моем случае)
Скорее всего, я нашел эту функцию с именем getTextContent(), но нет зарегистрированного AFAICS с обратным вызовом.
Возможно ли это (без возиться с самим pdf.js)? Если да, то как?
EDIT (3)
Этот код напечатает PDF-текст в консоли, но, как исходить из этого, есть тайна для меня.
'use strict';
// In production, the bundled pdf.js shall be used instead of SystemJS.
Promise.all([System.import('pdfjs/display/api'),
System.import('pdfjs/display/global'),
System.import('pdfjs/display/network'),
System.resolve('pdfjs/worker_loader')])
.then(function (modules)
{
var api = modules[0], global = modules[1];
// In production, change this to point to the built `pdf.worker.js` file.
global.PDFJS.workerSrc = modules[3];
// Fetch the PDF document from the URL using promises
let loadingTask = api.getDocument('cv.pdf');
loadingTask.onProgress = function (progressData) {
document.getElementById('progress').innerText = (progressData.loaded / progressData.total);
};
loadingTask.then(function (pdf)
{
// Fetch the page.
pdf.getPage(1).then(function (page)
{
var scale = 1.5;
var viewport = page.getViewport(scale);
// Prepare canvas using PDF page dimensions.
var canvas = document.getElementById('pdf-canvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
// (Debug) Get PDF text content
page.getTextContent().then(function (textContent)
{
console.log(textContent);
});
// Render PDF page into canvas context.
var renderContext =
{
canvasContext: context,
viewport : viewport
};
page.render(renderContext);
});
});
});
Ответы
Ответ 1
Причина первого эффекта редактирования заключается в том, что pdfjs использует скрытые элементы div для включения выбора текста. Чтобы файл pdfjs не отображался на холсте без изменения script, вы можете добавить следующий код:
CanvasRenderingContext2D.prototype.strokeText = function () { };
CanvasRenderingContext2D.prototype.fillText = function () { };
Также, если вы хотите избежать манипуляции с текстом в элементах html, вы можете сделать их самостоятельно с помощью того же метода, который вы печатаете на консоли. Вот рабочий jsfiddle, который меняет Hello, world!
на Burp!
:)
jsfiddle был создан из следующих ресурсов:
Ответ 2
Вы можете сделать дополнительный код в pdf.js
.
getTextContent: function PDFPageProxy_getTextContent(params) {
return this.transport.messageHandler.sendWithPromise('GetTextContent', {
pageIndex: this.pageNumber - 1,
normalizeWhitespace: params && params.normalizeWhitespace === true ? true : false,
combineTextItems: params && params.disableCombineTextItems === true ? false : true
});
}
В приведенном выше коде вы можете проверить, вызван ли getTextContent, добавив console.log
и добавить больше контента, которое вы хотите.