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

Posted 2023-03-04

【中文标题】使用 SVG 渲染 Pdf 后，文本内容副本无法正常工作

【英文标题】：Text content copy works wrongly after rendering Pdf using SVG

【发布时间】：2020-04-05 22:34:24

【问题描述】：

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

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

Image1

Image2

我使用的代码如下

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

);

【参考方案1】：

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

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

    //const character = glyph.fontChar;

并添加行：

    const character = glyph.unicode;