CODEWITHSUNDEEP
javascripthtmlpdf.jsng2-pdfjs-viewer
Erdi Atalay
Erdi Atalay

Reputation: 163

Text content copy works wrongly after rendering Pdf using SVG

I have tried to generate an app which gets pdf blob and shows it on the screen using pdfjs lib. I works correctly but when i try to copy the text content, it gets unrelated data.

When i copy the text, it copies it as . You can check it as below image

Image1

Image2

The Code i used is below

<div id="the-svg"></div>

// Asynchronous download PDF
PDFJS.getDocument(url)
  .then(function(pdf) {
    return pdf.getPage(1);
  }).then(function(page) {

  // Set scale (zoom) level
  var scale = 1.5;

  // Get viewport (dimensions)
  var viewport = page.getViewport(scale);

  // Get div#the-svg
  var container = document.getElementById('the-svg');

  // Set dimensions
  container.style.width = viewport.width + 'px';
  container.style.height = viewport.height + 'px';

  // SVG rendering by PDF.js
  page.getOperatorList()
    .then(function (opList) {
      var svgGfx = new PDFJS.SVGGraphics(page.commonObjs, page.objs);
      return svgGfx.getSVG(opList, viewport);
    })
    .then(function (svg) {
      container.appendChild(svg);
    });

});

Upvotes: 1

Views: 586

Answers (1)

jacouh
jacouh

Reputation: 8769

For accuracy of appearance, in showText(glyphs) function for svg, pdf.js renders a font character with glyphs glyph.fontChar, that is not readable on common computer. If you replace it by glyph.unicode, your text becomes copiable, but the PDF rendered will be a little different in appearance.

Please see pdf.js file. First make a copy of pdf.js, then modify it by commenting to test:

    //const character = glyph.fontChar;

And add line:

    const character = glyph.unicode;

Upvotes: 1

Related Questions