Angular 5 PDFViewer中如何仅打印Canvas内的PDF内容？

我来给你几个实用的解决方案，帮你实现只打印canvas里的PDF内容，而不是整个页面：

方案一：创建临时打印容器（不弹出新窗口） #

这个方法会在当前页面动态生成一个仅包含PDF canvas的临时容器，打印完成后自动移除，不会影响原页面结构。

首先修改你的print方法：

print() {
  // 获取展示PDF的canvas元素（替换成你实际的canvas ID）
  const pdfCanvas = document.getElementById('pdf-canvas') as HTMLCanvasElement;
  if (!pdfCanvas) return;

  // 创建带专属类名的临时容器
  const printContainer = document.createElement('div');
  printContainer.className = 'print-container';
  printContainer.style.position = 'fixed';
  printContainer.style.top = '0';
  printContainer.style.left = '0';
  printContainer.style.width = '100%';
  printContainer.style.height = '100%';
  printContainer.style.background = 'white';
  printContainer.style.zIndex = '9999';

  // 克隆canvas并设置自适应样式
  const clonedCanvas = pdfCanvas.cloneNode(true) as HTMLCanvasElement;
  clonedCanvas.style.width = '100%';
  clonedCanvas.style.height = 'auto';
  printContainer.appendChild(clonedCanvas);

  // 把容器添加到页面
  document.body.appendChild(printContainer);

  // 等待DOM渲染完成后执行打印，打印后移除容器
  setTimeout(() => {
    window.print();
    document.body.removeChild(printContainer);
  }, 300);
}

然后在全局样式文件（比如styles.css）中添加打印专属样式，确保只有临时容器内容显示：

@media print {
  body * {
    visibility: hidden; /* 隐藏页面所有默认内容 */
  }
  .print-container, .print-container * {
    visibility: visible; /* 仅显示打印容器内的内容 */
  }
  .print-container {
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    padding: 10px;
  }
}

方案二：使用新窗口独立打印 #

这个方法会打开一个仅包含PDF canvas的新窗口，打印完成后自动关闭，不会干扰原页面。

修改print方法如下：

print() {
  const pdfCanvas = document.getElementById('pdf-canvas') as HTMLCanvasElement;
  if (!pdfCanvas) return;

  // 打开新窗口
  const printWindow = window.open('', '_blank');
  if (!printWindow) {
    alert('请允许弹出窗口权限以完成打印');
    return;
  }

  // 在新窗口中写入仅包含canvas的HTML结构
  printWindow.document.write(`
    <html>
      <head>
        <title>PDF 打印</title>
        <style>
          body { margin: 20px; padding: 0; }
          canvas { width: 100%; height: auto; }
        </style>
      </head>
      <body>
        ${pdfCanvas.outerHTML}
      </body>
    </html>
  `);
  printWindow.document.close();

  // 等待新窗口加载完成后执行打印并关闭
  printWindow.onload = () => {
    printWindow.print();
    printWindow.close();
  };
}

方案三：利用PDF.js原生打印方法（如果用PDF.js渲染） #

如果你是通过PDF.js库渲染的PDF，可以直接调用它的原生打印API，这是最贴合PDF场景的方法：

// 假设你已经获取了PDF.js的文档实例
async printPdf() {
  try {
    // 替换成你的PDF文件路径或已加载的文档实例
    const pdfDoc = await pdfjsLib.getDocument('your-pdf-file-url').promise;
    // 调用PDF.js原生打印方法
    await pdfDoc.print();
  } catch (error) {
    console.error('打印失败:', error);
  }
}

注意事项 #

• 记得把代码中的pdf-canvas替换成你实际使用的canvas元素ID
• 如果PDF有多页（对应多个canvas元素），需要遍历所有canvas并克隆到打印容器/新窗口中
• 方案二可能会被浏览器的弹窗拦截，建议提前提示用户开启弹窗权限

内容的提问来源于stack exchange，提问作者Ravi