Web应用批量打印PDF与渲染HTML：能否一键预览并打印？

嘿，完全可以做到预览后一键批量打印，不用逐个操作！你只需要把所有要打印的内容（HTML段落+PDF）整合到一个统一的预览容器里，再利用浏览器的打印功能就能一次性搞定。下面给你具体的实现思路和代码示例：

核心思路 #

把你的第一段HTML、PDF内容、第二段HTML全部整合到一个专门的打印容器中，先让用户预览完整内容，再触发浏览器的打印对话框，用户确认后就能一次性打印所有内容。

具体实现步骤 #

1. 准备打印容器与触发按钮 #

先在页面上添加一个隐藏的打印容器，用来存放所有要打印的内容，再放一个触发预览/打印的按钮：

<button onclick="startPrintWorkflow()">预览并打印全部内容</button>

<!-- 隐藏的打印专用容器 -->
<div id="print-container" style="display: none; padding: 20px;">
  <!-- 第一段HTML内容 -->
  <p>
    This is my paragraph<br />
    This is my paragraph<br />
    This is my paragraph<br />
    This is my paragraph<br />
    This is my paragraph<br />
    This is my paragraph<br />
  </p>
  
  <!-- 用来承载PDF的容器 -->
  <div id="pdf-holder"></div>
  
  <!-- 第二段HTML内容 -->
  <p>
    This is my paragraph<br />
    This is my paragraph<br />
    This is my paragraph<br />
    This is my paragraph<br />
    This is my paragraph<br />
    This is my paragraph<br />
  </p>
</div>

2. 处理PDF的渲染与兼容 #

直接用iframe加载PDF在部分浏览器中打印可能会有兼容性问题，推荐用PDF.js把PDF渲染成Canvas，这样能确保在所有现代浏览器中都能正常预览和打印。如果加载失败，再用iframe作为降级方案：

function startPrintWorkflow() {
  const printContainer = document.getElementById('print-container');
  const pdfHolder = document.getElementById('pdf-holder');
  
  // 清空PDF容器（避免重复渲染）
  pdfHolder.innerHTML = '';

  // 使用PDF.js加载并渲染PDF
  pdfjsLib.getDocument('http://www.africau.edu/images/default/sample.pdf').promise.then(pdf => {
    let renderedPages = 0;
    const totalPages = pdf.numPages;

    // 遍历PDF的每一页
    for (let pageNum = 1; pageNum <= totalPages; pageNum++) {
      pdf.getPage(pageNum).then(page => {
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        const viewport = page.getViewport({ scale: 1.2 }); // 缩放比例适配打印
        
        canvas.width = viewport.width;
        canvas.height = viewport.height;
        
        // 渲染页面到Canvas
        page.render({ canvasContext: ctx, viewport }).promise.then(() => {
          pdfHolder.appendChild(canvas);
          // 添加分页符（确保每个PDF页面单独占一页）
          if (pageNum !== totalPages) {
            const pageBreak = document.createElement('div');
            pageBreak.style.pageBreakAfter = 'always';
            pdfHolder.appendChild(pageBreak);
          }
          
          renderedPages++;
          // 所有页面渲染完成后，展示预览并触发打印
          if (renderedPages === totalPages) {
            showPreviewAndPrint(printContainer);
          }
        });
      });
    }
  }).catch(err => {
    console.error('PDF加载失败，使用iframe降级:', err);
    // 降级方案：用iframe加载PDF
    const iframe = document.createElement('iframe');
    iframe.src = 'http://www.africau.edu/images/default/sample.pdf';
    iframe.style.width = '100%';
    iframe.style.height = '800px';
    iframe.frameBorder = '0';
    pdfHolder.appendChild(iframe);
    
    // 直接展示预览并打印
    showPreviewAndPrint(printContainer);
  });
}

// 展示预览并触发打印的通用函数
function showPreviewAndPrint(printContainer) {
  // 在当前页面显示预览，用户确认后打印
  printContainer.style.display = 'block';
  // 添加确认按钮，点击后触发打印
  const confirmBtn = document.createElement('button');
  confirmBtn.textContent = '确认打印';
  confirmBtn.onclick = () => {
    window.print();
    // 打印后隐藏预览容器和按钮
    printContainer.style.display = 'none';
    confirmBtn.remove();
  };
  printContainer.appendChild(confirmBtn);

  // 可选：打开新窗口单独展示预览并打印
  // const printWindow = window.open('', '_blank');
  // printWindow.document.write(printContainer.innerHTML);
  // printWindow.document.close();
  // printWindow.focus();
  // printWindow.print();
  // printWindow.onafterprint = () => printWindow.close();
}

3. 添加打印样式优化 #

用@media print CSS规则来优化打印时的样式，确保内容排版正确：

@media print {
  /* 隐藏页面上不需要打印的元素 */
  body > *:not(#print-container) {
    visibility: hidden;
  }
  
  #print-container, #print-container * {
    visibility: visible;
  }
  
  #print-container {
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    padding: 15px;
  }
  
  /* 确保Canvas/PDF页面单独分页 */
  canvas {
    display: block;
    page-break-after: always;
  }
  
  /* 隐藏打印确认按钮 */
  button {
    display: none !important;
  }
}

关键注意点 #

• 兼容性：PDF.js能解决大部分浏览器的PDF打印兼容问题，建议引入官方的CDN版本使用。
• 预览体验：你可以根据需求选择在当前页面展示预览，或者打开新窗口预览，两种方式都能实现一键打印。
• 分页控制：通过page-break-after: always来控制内容的分页，确保PDF每页、HTML段落都能正确分隔打印。

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