网页内容固定格式打印

关于前端打印

---

前言

遇到关于前端打印的问题，第一次接触，记录一下我的解决方法和实现思路

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、实现思路

当我们想要控制打印页面的样式时，我们可以使用 CSS 中的 @page 查询。这个查询允许我们指定打印页面的样式规则，包括页眉、页脚、页码等。在React中，我们可以在

以下是这个示例的实现思路：

设置可打印的内容区域： 我们首先创建一个

元素，给它一个特定的 id（例如 printable-content），并在其中包含我们希望在打印时打印的内容。

准备打印按钮： 我们创建一个按钮（例如 PrintButton 组件），在点击该按钮时调用浏览器的打印功能。

设置打印样式： 在

隐藏页眉和页脚： 在 @page :first 查询中，我们针对第一页打印页面设置样式。我们将页边距设置为零，然后使用 content: none; 将所有的页眉、页脚、页码都设置为不显示，从而隐藏它们。

触发打印： 当用户点击 “打印” 按钮时，我们调用 window.print() 方法，触发浏览器的打印对话框，让用户选择打印机和设置打印参数。

这样，我们就能够通过控制打印页面的样式来实现打印内容的固定格式化

二、实例代码

代码如下（示例）：

import React from 'react';

function PrintButton() {
  const handlePrint = () => {
    window.print();
  };

  return (
    <button onClick={handlePrint}>打印</button>
  );
}

// 使用示例
function App() {
  return (
    <div>
      <h1>要打印的内容</h1>
      <p>这是要打印的文本内容。</p>
      <PrintButton />

      {/* 打印样式 */}
      <style type="text/css">
        {`
          @media print {
            body * {
              visibility: hidden;
            }
            #printable-content, #printable-content * {
              visibility: visible;
            }
            #printable-content {
              position: absolute;
              left: 0;
              top: 0;
            }
            @page {
              size: auto;   /* 自动页面尺寸 */
              margin: 0;    /* 无页边距 */
            }
            /* 隐藏打印页面的标题、网址、时间和页码 */
            @page :first {
              margin-top: 0;
              margin-bottom: 0;
              margin-left: 0;
              margin-right: 0;
              @top-center {
                content: none;
              }
              @bottom-center {
                content: none;
              }
              @bottom-left {
                content: none;
              }
              @bottom-right {
                content: none;
              }
            }
          }
        `}
      </style>
      {/* 要打印的内容 */}
      <div id="printable-content">
        <h1>打印的标题</h1>
        <p>这是要以固定格式打印的内容。</p>
      </div>
    </div>
  );
}

export default App;

以上代码是react的写法，不过前端其实都差不多