javascript - How to alter the text shown by pdf.js? -
i'm not trying modify pdf, i'm trying change displayed text
pdf.js outputs text reads in bunch of divs .textlayer > div
, draws canvas
i read here viewing , editing pdf in browser impossible, but...
since pdf.js have api, idea "hook" pdf.js , change displayed text (that's more enough in case)
the closest find function named gettextcontent(), there no callback registered afaics.
is possible (without messing pdf.js itself)? if so, how?
edit (3)
this code print pdf text console, how proceed there mystery me.
'use strict'; // in production, bundled pdf.js shall 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 point built `pdf.worker.js` file. global.pdfjs.workersrc = modules[3]; // fetch pdf document 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 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) pdf text content page.gettextcontent().then(function (textcontent) { console.log(textcontent); }); // render pdf page canvas context. var rendercontext = { canvascontext: context, viewport : viewport }; page.render(rendercontext); }); }); });
edit (2)
the code example i'm trying mess viewer.js. granted it's not easiest example, it's simplest 1 find implements text in dom
edit (1)
i did try manipulate dom (specifically .textlayer > div
mentioned earlier), pdf.js uses both divs , canvas magic, it's not text, result text div shown on top of canvas (or other way around), see:
the reason first edit effect because pdfjs uses hidden div elements enable text selection. in order prevent pdfjs rendering text on canvas without modifying script can add following code:
canvasrenderingcontext2d.prototype.stroketext = function () { }; canvasrenderingcontext2d.prototype.filltext = function () { };
also if want avoid text manipulation in html elements can render them same method print console. here working jsfiddle changes hello, world!
burp!
:)
the jsfiddle created following resources:
- text rendering - http://bl.ocks.org/hubgit/600ec0c224481e910d2a0f883a7b98e3
- so question hiding text - in pdf.js, how hide canvas , display underlying text @ full opacity?
Comments
Post a Comment