在显示之前向 pdf.js 画布添加文本

Question

是否可以在将文本显示在页面上之前将其添加到画布？

因为现在它喜欢：

<canvas class="pdf-page-canvas" height="841" width="595"></canvas>
<canvas class="pdf-page-canvas" height="841" width="595"></canvas>
<canvas class="pdf-page-canvas" height="841" width="595"></canvas>
<canvas class="pdf-page-canvas" height="841" width="595"></canvas>
<canvas class="pdf-page-canvas" height="841" width="595"></canvas>
<canvas class="pdf-page-canvas" height="841" width="595"></canvas>
<canvas class="pdf-page-canvas" height="841" width="595"></canvas>

我尝试在标签内添加带有文本的div和span，但它没有显示。还尝试将文本添加到画布

pdfjsLib.getDocument(url).promise.then(function(pdf) {
thePdf = pdf;
viewer = document.getElementById('pdf-viewer');
        
for(page = 1; page <= pdf.numPages; page++) {
 canvas = document.createElement("canvas");    
 canvas.className = 'pdf-page-canvas';         
  viewer.appendChild(canvas);         
  renderPage(page, canvas);
 }
});
    
function renderPage(pageNumber, canvas) {
 thePdf.getPage(pageNumber).then(function(page) {
 viewport = page.getViewport({ scale: scale });
 canvas.height = viewport.height;
 canvas.width = viewport.width;
 var gcc = canvas.getContext('2d');
 gcc.font = "30px Comic Sans MS";
 gcc.fillStyle = "green";
 gcc.textAlign = "center";
 gcc.fillText("Hello World", canvas.width/2, canvas.height/2);           
 page.render({canvasContext: gcc, viewport: viewport});
 );
}

它只显示普通的pdf页面及其内容，任何部分都没有任何“Hello world”文本。我做错了什么？也许我可以将canvas解析为html，然后将文本作为普通标签添加到其中？或者将画布编辑为类似图像的对象并使用添加的文本进行更新？

Answer 1

您尝试使用的将文本添加到画布元素，然后将其显示为 PDF 查看器的一部分的方法是正确的，但您的代码中存在一些问题需要解决。您不能直接将 '' 或 '' 等 HTML 元素添加到画布元素，因为画布是基于位图的渲染上下文。

但是，您可以像在代码中尝试的那样将文本绘制到画布元素上。您的代码中的问题似乎与画布的渲染顺序和比例有关。这是代码的修改版本，应该可以工作：

let thePdf;
let viewer = document.getElementById('pdf-viewer');
let scale = 1.5; // You can adjust the scale as needed

pdfjsLib.getDocument(url).promise.then(function(pdf) {
    thePdf = pdf;

    for (let page = 1; page <= pdf.numPages; page++) {
        let canvas = document.createElement("canvas");
        canvas.className = 'pdf-page-canvas';
        viewer.appendChild(canvas);
        renderPage(page, canvas);
    }
});

function renderPage(pageNumber, canvas) {
    thePdf.getPage(pageNumber).then(function(page) {
        let viewport = page.getViewport({ scale: scale });
        canvas.height = viewport.height;
        canvas.width = viewport.width;
        let context = canvas.getContext('2d');

        // Render the PDF page on the canvas
        page.render({ canvasContext: context, viewport: viewport });

        // Add text to the canvas
        context.font = "30px Comic Sans MS";
        context.fillStyle = "green";
        context.textAlign = "center";
        context.fillText("Hello World", canvas.width / 2, canvas.height / 2);
    });
}

确保您已在 HTML 文件中正确包含 PDF.js 库，以便此代码正常工作。

此代码加载 PDF 文档，为每个页面创建画布元素，在画布上呈现 PDF 内容，然后将“Hello World”文本添加到每个画布。您可以根据特定用例的需要调整

scale

和文本属性。

如果您仍然遇到文本未显示的问题，请仔细检查 PDF.js 库是否已正确包含，并且浏览器控制台中没有错误。