如何在没有 iframe 的页面中嵌入 PDF.JS 查看器

Question

我很惊讶地发现关于 PDF.JS 的文档和教程相对较少，尤其是在代码重构 PDFJS -> pdfjsLib 之后，考虑到这个库被广泛使用。

我想做的比较简单，我只想在网页中直接嵌入PDF，即没有<iframe>、<object>或<embed>标签。我还想使用文本层，因为我想在 JavaScript 中访问文本并在某些句子上添加工具提示。

我认为使用查看器可能是一种解决方案，但我不想在我的网页中包含 viewer.html、viewer.css 和 viewer.js 中的所有代码，因为我确信它会损坏。如果我可以只显示 PDF 并选择文本就足够了，我不一定需要查看器的复杂用户界面。

这是我的代码，但文本层显示不正确：

document.addEventListener('DOMContentLoaded', () => {
  pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.4.456/pdf.worker.js';
});

function displayReport() {
  const file = document.getElementById('reportInput').files[0];
  const fileReader = new FileReader();
  fileReader.onload = async function() {
    const data = this.result;
    const pdf = await pdfjsLib.getDocument({data: data}).promise;
    const page = await pdf.getPage(1);
    const viewport = page.getViewport({scale: 0.5});

    const canvas = document.getElementById('reportCanvas');
    const context = canvas.getContext('2d');
    canvas.height = viewport.height;
    canvas.width = viewport.width;

    const renderContext = {
      canvasContext: context,
      viewport: viewport
    };
    await page.render(renderContext).promise;
    const textContent = await page.getTextContent();

    const { top, left, width, height } = canvas.getBoundingClientRect();
    const textLayer = document.getElementById('reportTextLayer');
    textLayer.style.top = top;
    textLayer.style.left = left;
    textLayer.style.width = width;
    textLayer.style.height = height;

    await pdfjsLib.renderTextLayer({
      textContent: textContent,
      container: textLayer,
      viewport: viewport,
      textDivs: []
    });

    console.log("Page rendered!");
  };
  fileReader.readAsBinaryString(file);
}

#reportTextLayer {
  position: absolute;
  overflow: hidden;
  opacity: 0.2;
  line-height: 1.0;
}

#reportTextLayer > div {
  color: transparent;
  position: absolute;
  white-space: pre;
  cursor: text;
  transform-origin: 0% 0%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.4.456/pdf.js"></script>

<p>Select a PDF file:</p>
<input id="reportInput" type="file" accept="application/pdf" onchange="displayReport()"/>

<div id="reportWrapper">
    <canvas id="reportCanvas"></canvas>
    <div id="reportTextLayer"></div>
</div>

我该如何解决这个问题？

感谢您的帮助。

Answer 1

这对我有用：

[script type="text/javascript" src="https://mozilla.github.io/pdf.js/build/pdf.js"][/script]
[script type="text/javascript" src="https://mozilla.github.io/pdf.js/build/pdf.worker.js"][/script]
[style type="text/css"]
#signature {
    margin-left:120px;
    margin-top:10px;
}
[/style]


    <canvas id='the-canvas'></canvas>
    <div id='signature'></div>

    [script]

    var url = "Agreement.pdf";
    var loadingTask = pdfjsLib.getDocument(url);
    loadingTask.promise.then(function(pdf) {
    pdf.getPage(1).then(function(page) {
    var scale = 1.5;
    var viewport = page.getViewport({ scale: scale, });

    var canvas = document.getElementById('the-canvas');
    var context = canvas.getContext('2d');
    canvas.height = 640;
    canvas.width = viewport.width;

    var renderContext = {
    canvasContext: context,
    viewport: viewport
    };
    page.render(renderContext);

    });    
    });

   document.getElementById('signature').innerHTML = 'Signed By Yogi on 1/26/2021'

   [/script]