无法更改打印反应中的 QR 码大小答案

【问题标题】：Not able to change the QR code size in react-to-print无法更改打印反应中的 QR 码大小
【发布时间】：2023-01-04 16:26:29
【问题描述】：

我正在使用https://www.npmjs.com/package/react-qr-code 在我的网站上生成二维码。

当我在 PDF 文件中打印此二维码时，我想更改此二维码的大小。我可以在不更改反应页面大小的情况下更改pdf文件中二维码的大小吗？我尝试使用状态更改大小，但问题是更新状态也会更新 DOM 容器上的大小。

我正在使用https://github.com/gregnb/react-to-print 来打印二维码。

import QRCode from 'react-qr-code';
import ReactToPrint from 'react-to-print';


  const getPageMargins = () => {
    return `@page { margin: '1000px' '10' '10 '10' !important; }`;
  };

  const onBeforeGetContent = () => {
    setSize(200);
    setIsLoading(true);
    return Promise.resolve();
  };

  const onBeforePrint = () => {
    setSize(100);
    return Promise.resolve();
  };

  const onAfterPrint = () => {
    setSize(100);
    setIsLoading(true);
    return Promise.resolve();
  };

// this is what I am rendering
     <div ref={QRRef}>
      <QRCode
          value={`{ "_id": "${unit.id}" }`}
          size={size}
      />
      <p className="hide-unit-id">{unit.id}</p>
      </div>
      <ReactToPrint
          pageStyle={getPageMargins}
          onBeforePrint={onBeforePrint}
          onBeforeGetContent={onBeforeGetContent}
          onAfterPrint={onAfterPrint}
          trigger={() => (
              <PrinterFilled />
            )}
          content={() => QRRef.current}>
      </ReactToPrint>

任何帮助深表感谢。提前致谢。

【问题讨论】：

你能分享一些代码吗？
您好，@NjugunaMureithi 感谢您的回复。我更新了代码 sn-ps。
你解决了吗？如果没有那么我可以试试。

标签： reactjs react-to-print react-qr-code

【解决方案1】：

试试onAfterPrint

const promiseRef = useRef(null);
const [size, setSize] = useState(10);

useEffect(() => {
  // Check both that there is a promise to resolve AND that the state has actually changed
  if (promiseRef.current && size === 100) {
    // Resolve the promise, causing react-to-print to continue
    promiseRef.current();
  }
}, [promiseRef.current, size]);

const onBeforeGetContent = () => {
  return new Promise((resolve) => {
    // This is async: we don't know when React will actually make the state change
    setSize(100);
    promiseRef = resolve;
  });
};

const onAfterPrint = () => {
  setSize(10);
};

【讨论】：

谢谢你的回复哈利。但是设置宽高不影响二维码的大小。
我已经用新答案更新了我的线程。核实！
我已经尝试过这个解决方案，但在这个解决方案中发生的事情是，在运行 onBeforeGetContent 之后需要 2-3 秒才能运行 onAfterPrint。因此，将大小设置为更高的值会对网站中的组件大小产生视觉效果。
我需要在不影响用户界面的情况下打印更大尺寸的二维码
这就是它的作用:)

【解决方案2】：

更清洁的解决方案是使用 Print CSS。通过设置 CSS width 和 height 属性来调整目标元素的大小，在下面的示例中，我将 QR 码的 svg 元素的 width 和 height 设置为 50%

const pageStyle = `
@media print {
    @page{
      size: A4;
    }
    svg {
      width:50%;
      height: 50%;
    }
}
  `

并将 pageStyle 属性传递给 useReactToPrint 钩子

const handlePrint = useReactToPrint({
   content: () => qrRef.current,
   pageStyle,
})

【讨论】：