打印 HTML 元素

Question

我需要在单击按钮时打印元素列表。我的后端有数据，并通过以下方式生成每行包含 5 个元素的元素表：

const labelDataHTML = (values) => (
  <table id="dataTable" style={{ width: "100%" }}>
    <caption>Labels</caption>
    {_.chunk(values, 5).map((item, index) => (
      <tr key={`row-${index}`} className={`row`}>
        {index % 5 !== 0
          ? item.map((obj) => <td>{obj}</td>)
          : item.map((obj) => <td>{obj}</td>)}
      </tr>
    ))}
  </table>
);

我正在另一个函数中检索 HTML 对象，该函数在单击按钮时触发（在其他 SO 页面上找到此代码块）：

const printData = (domElement) => {
  var printContents = document.querySelector("table").innerHTML;
  var originalContents = document.body.innerHTML;

  document.body.innerHTML = printContents;
  window.print();

  document.body.innerHTML = originalContents;
};

这有两个问题。 1是我在单击打印按钮时丢失了所有HTML表格元素，它只是变成了一个没有空格的长列表。其次，一旦我点击它，我页面上的所有其他元素都会变得无响应。我也附上了一个[沙盒][1]。

我一般是 React 和 javascript 的新手。感谢所有帮助！

更新： 这是我解决问题的方法： 我根据我在 SO 上发现的大量其他问题找到了这个解决方案：

const labelDataHTML = values =>
    ReactDOMServer.renderToString(
        <table id="dataTable" style={{ width: "100%" }}>
            <caption>Labels</caption>
            {_.chunk(values, 5).map((item, index) => {
                return (
                    <tr className={`row`}>
                        {index % 5 !== 0
                            ? item.map(obj => <td>{obj}</td>)
                            : item.map(obj => <td>{obj}</td>)
                        }
                    </tr>
                );
            })}
        </table>
    );

const PrintLabels = labelData => {
    let domElement = labelDataHTML(labelData)
    let windowInstance = window.open("");

    windowInstance.document.write(domElement);

    windowInstance.print();
    windowInstance.close();
};

[1]：https://codesandbox.io/s/kind-cache-81qgu

Answer 1

对于您的第一个问题，您需要将 printContents 包装在 html table 标记中。

`<table>${printContents}</table>`

对于第二个问题，您需要创建一个窗口实例并在新窗口中打开打印对话框，然后关闭该实例。你可以将你的函数重构为这样的：

const printData = (domElement) => {
   let printContents = document.querySelector("table").innerHTML;
   let windowInstance= window.open("");
   windowInstance.document.write(`<table>${printContents}</table>`);
   windowInstance.print();
   windowInstance.close();
};

Answer 2

您正在临时更改页面内容，我认为这是一种非常老套的方法。

更好的方法是隐藏页面上的所有其他元素，仅用于使用 css 打印：

@media print {
  body * {
    visibility: hidden;
  }
  #dataTable,
  #dataTable * {
    visibility: visible;
  }

  #dataTable {
    position: absolute;
    left: 0;
    top: 0;
  }
}

然后您可以简单地使用以下命令打印表格：

window.print();