Question

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

Answer 1

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

Answer 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>
    </>
  );
};

在ReactJS中打印

2 个答案: