在 ReactJS 中打印答案

【问题标题】：Printing in ReactJS在 ReactJS 中打印
【发布时间】：2017-06-03 12:01:54
【问题描述】：

如何在我的应用程序组件中打印（打印机）一个 DIV 反应？我有一个 DIV=(badgeContainer)，在其中添加了一些形状、文本和图像，现在我想打印 DIV=(badgeContainer) 中的元素。有没有一个包可以帮助我在反应中做到这一点？非常感谢任何帮助。

【问题讨论】：

打印是指显示在屏幕上（DOM）还是打印到打印机或控制台？
到打印机，我也在使用电子。因此，如果您有使用电子的解决方案，即使是这样，我们也将不胜感激。
创建你自己的组件，避免使用 npm 包，除非你的组件很复杂
我使用电子代码来实现这一点，webContents.print 为我做到了。

标签： node.js reactjs electron

【解决方案1】：

您可以为此使用几个库。我用过https://github.com/MrRio/jsPDF，很棒。

【讨论】：

感谢您的解决方案。

【解决方案2】：

您可以使用 useRef 钩子和窗口来执行此操作。（打开 & 打印 & 关闭）。

import React from "react";
export const Printable = () => {
  const printableAreaRef = React.useRef<HTMLDivElement>(null);
  const handlePrintClick = () => {
    const w = window.open();
    if (printableAreaRef.current?.innerHTML) {
      w?.document.write(printableAreaRef.current.innerHTML);
      w?.print();
    }
    w?.close();
  };
  return (
    <>
      <button onClick={handlePrintClick}>Click To Print</button>
      <div ref={printableAreaRef}>
        I want to print this
      </div>
    </>
  );
};

【讨论】：

【解决方案3】：

你可以给你这个包裹： ReactToPrint - Print React components in the browser

我用它，它可以为你处理打印

【讨论】：