使用JavaScript优雅实现每页一图的打印功能

云只上

已于 2024-06-17 21:54:26 修改

阅读量448

点赞数 5

文章标签： javascript 开发语言 ecmascript

于 2024-06-17 21:52:03 首次发布

本文链接：https://blog.csdn.net/m0_47483157/article/details/139755394

版权

在Web开发中，打印功能往往是一个不可或缺的部分，尤其是对于需要生成发票、报告等文档的应用场景。本文将指导你如何在前端实现一个实用功能：使用JavaScript打印一系列图片，确保每张图片占据一页，且无需弹出额外的打印窗口。我们将结合原生JavaScript操作和CSS媒体查询来达成这一目标。

最终实现效果图效果图：

步骤一：构建打印内容

function handlePrint(pdfList) {
  showLoading(); // 显示加载指示器
  previewInvoicePngMoreHttp(JSON.stringify(pdfList))
    .then(response => {
      hideLoading(); // 隐藏加载指示器
      if (response.code === "0000") {
        // 构建打印内容
        let htmlContent = buildPrintContent(response.data);
        // 使用隐藏iframe进行打印
        printWithIframe(htmlContent);
      } else {
        showError(response.msg); // 显示错误信息
      }
    })
    .catch(error => {
      hideLoading();
      handleRequestError(error); // 处理请求错误
    });
}

步骤二：生成打印HTML内容

接下来，定义buildPrintContent函数，它负责根据图片数据生成HTML字符串，确保每张图片被包裹在一个具有.invoice-page类的<div>中，以便于应用打印样式。

function buildPrintContent(images) {
  let html = `
    <html>
      <head>
        <meta charset="UTF-8">
        <title>Invoice Print</title>
        <style>
          /* 这里可以添加更多全局打印样式 */
        </style>
      </head>
      <body>
  `;
  
  images.forEach((imageData, index) => {
    html += `
      <div class="invoice-page">
        <img src="data:image/png;base64,${imageData}" alt="Invoice Image ${index + 1}">
      </div>
      <!-- 添加分页符 -->
      <div class="page-break"></div>
    `;
  });
  
  html += '</body></html>';
  return html;
}

步骤三：使用隐藏iframe打印
为了不在新窗口中打开打印预览，我们将使用一个隐藏的<iframe>来承载打印内容并触发打印操作。

function printWithIframe(content) {
  const iframe = document.createElement('iframe');
  iframe.style.display = 'none';
  document.body.appendChild(iframe);

  iframe.contentDocument.open();
  iframe.contentDocument.write(content);
  iframe.contentDocument.close();

  iframe.onload = function() {
    iframe.contentWindow.focus();
    iframe.contentWindow.print();
    setTimeout(() => {
      document.body.removeChild(iframe);
    }, 500);
  };
}

步骤四：添加CSS媒体查询以优化打印样式
在mounted生命周期钩子中（或页面加载时），添加一个CSS样式，确保每一页结束时自动分页。

mounted() {
  const style = document.createElement('style');
  style.innerHTML = `
    @media print {
      .page-break {
        break-after: page;
      }
    }
  `;
  document.head.appendChild(style);
}

总结
通过上述步骤，我们不仅实现了在前端优雅地打印一系列图片，确保每张图片独占一页，而且整个过程中没有弹出额外的打印窗口，提升了用户体验。此方案结合了JavaScript动态生成HTML、CSS媒体查询以及隐藏iframe的技术，是处理网页打印需求的一个高效而灵活的方法。在实际项目中，可根据具体需求调整样式和逻辑细节。

云只上

关注

5
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
使用JavaScript优雅实现每页一图的打印功能

步骤二：生成打印HTML内容接下来，定义buildPrintContent函数，它负责根据图片数据生成HTML字符串，确保每张图片被包裹在一个具有.invoice-page类的中，以便于应用打印样式。
复制链接

扫一扫