使用 SVG 渲染 Pdf 后，文本内容副本无法正常工作答案

【问题标题】：Text content copy works wrongly after rendering Pdf using SVG使用 SVG 渲染 Pdf 后，文本内容副本无法正常工作
【发布时间】：2020-04-05 22:34:24
【问题描述】：

我试图生成一个应用程序，它获取 pdf blob 并使用 pdfjs lib 在屏幕上显示它。我工作正常，但是当我尝试复制文本内容时，它会得到不相关的数据。

当我复制文本时，它复制为。您可以查看下图

Image1

Image2

我使用的代码如下

&lt;div id="the-svg"&gt;&lt;/div&gt;

// 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);
    });

});

【问题讨论】：

标签： javascript html pdfjs ng2-pdfjs-viewer

【解决方案1】：

为了外观的准确性，在 svg 的 showText(glyphs) 函数中，pdf.js 会渲染一个带有字形 glyph.fontChar 的字体字符，这在普通计算机上是不可读的。如果您将其替换为 glyph.unicode，您的文本将变得可复制，但呈现的 PDF 外观会略有不同。

请参阅 pdf.js 文件。先复制一份pdf.js，然后通过评论修改修改：

    //const character = glyph.fontChar;

并添加行：

    const character = glyph.unicode;

【讨论】：