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

Question

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

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

图片1

图片2

我使用的代码如下

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

});

Answer 1

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

请参阅 pdf.js 文件。先复制一份pdf.js，然后通过注释修改进行测试：

    //const character = glyph.fontChar;

并添加行：

    const character = glyph.unicode;