使用renderToString渲染react-barcode返回空<svg>的问题求助

问题原因 #

react-barcode组件的条码生成逻辑依赖客户端DOM环境，或是将条码绘制逻辑放在了componentDidMount这类仅在客户端执行的生命周期方法中。而renderToString是服务端渲染方法，仅会执行组件的render阶段，不会触发客户端生命周期，因此输出的SVG标签是空的。

解决方案 #

方案一：服务端直接生成条码SVG（适合服务端生成PDF场景） #

使用支持服务端运行的条码生成库（如bwip-js）直接生成SVG字符串，再插入到React组件中完成渲染：

1. 安装依赖：

npm install bwip-js

2. 编写服务端渲染代码：

import { renderToString } from 'react-dom/server';
import bwipjs from 'bwip-js';

// 异步生成条码SVG字符串
async function getBarcodeSvg(text) {
  return new Promise((resolve, reject) => {
    bwipjs.toBuffer({
      bcid: 'code128', // 匹配react-barcode默认条码类型
      text,
      scale: 2,
      height: 10,
      includetext: true,
      textxalign: 'center',
    }, (err, buffer) => {
      if (err) return reject(err);
      resolve(buffer.toString('utf8'));
    });
  });
}

// 渲染组件并输出HTML字符串
async function renderBarcodeHtml() {
  const svgStr = await getBarcodeSvg('test');
  const barElement = (
    <div dangerouslySetInnerHTML={{ __html: svgStr }} />
  );
  const htmlString = renderToString(barElement);
  console.log(htmlString); // 输出带完整条码的HTML
}

renderBarcodeHtml();

方案二：客户端渲染后生成PDF（适合前端直接生成PDF场景） #

放弃服务端渲染，在客户端组件渲染完成后，直接从DOM生成PDF（使用html2pdf.js工具）：

1. 安装依赖：

npm install react-barcode html2pdf.js

2. 编写客户端组件：

import Barcode from 'react-barcode';
import { useEffect, useRef } from 'react';
import html2pdf from 'html2pdf.js';

export default function BarcodeToPdf() {
  const containerRef = useRef(null);

  useEffect(() => {
    // 组件渲染完成后触发PDF生成
    if (containerRef.current) {
      html2pdf()
        .set({
          margin: 1,
          filename: 'barcode.pdf',
          html2canvas: { scale: 2 },
          jsPDF: { unit: 'cm', format: 'a4' }
        })
        .from(containerRef.current)
        .save();
    }
  }, []);

  return (
    <div ref={containerRef}>
      <Barcode value={'test'} />
    </div>
  );
}

内容的提问来源于stack exchange，提问作者Kindt