基于JSON的HTML/SCSS模板生成文本可读取PDF的实现方案咨询

核心需求回顾 #

• 基于现有React.js TypeScript+SCSS标签组件，生成文本可读取/编辑的PDF
• 支持每页1个或6个标签的自适应布局
• 保留原SCSS样式效果

方案一：基于@react-pdf/renderer（推荐，原生支持矢量可编辑文本） #

1. 适配现有React组件到PDF渲染体系 #

将原React DOM组件（div/p等）替换为@react-pdf/renderer提供的专属组件：

• 根容器用<Document>，每页内容用<Page>
• 布局容器用<View>，文本内容用<Text>，条形码用<Image>（优先用SVG格式保证矢量性）

原SCSS样式需要转换为react-pdf支持的样式定义，可通过StyleSheet.create()实现，示例：

import { StyleSheet } from '@react-pdf/renderer';

// 把SCSS样式转换为react-pdf兼容的样式对象
const styles = StyleSheet.create({
  labelContainer: {
    padding: 10,
    border: '1px solid #000',
    width: '100%',
    fontFamily: 'Arial',
  },
  shipmentInfo: {
    marginTop: 8,
    fontSize: 12,
    lineHeight: 1.4,
  },
  // 其他样式按SCSS规则转换
});

如果原SCSS包含变量、嵌套等复杂语法，可借助css-to-react-native工具自动转换：

npm install css-to-react-native

import css from 'css-to-react-native';

const scssCode = `
.label-container {
  padding: 10px;
  border: 1px solid #000;
  & .shipment-info {
    font-size: 12px;
  }
}
`;
const convertedStyles = css(scssCode);

2. 实现双布局逻辑 #

单标签布局

设置<Page>尺寸为标签实际物理尺寸（比如4x6英寸，对应PDF单位为288pt×432pt），将标签组件居中放置：

<Page size={[288, 432]} style={styles.singlePage}>
  <View style={styles.labelContainer}>
    {/* 标签内容：发货信息、重量、条形码等 */}
  </View>
</Page>

6标签布局

用Flexbox/Grid在标准A4/Letter页面内排列2列3行的标签，通过样式控制间距和尺寸：

<Page size="LETTER" style={styles.sixPage}>
  <View style={styles.sixLabelsGrid}>
    {labelsData.map(label => (
      <View style={styles.smallLabelContainer} key={label.id}>
        {/* 缩小版标签内容组件 */}
      </View>
    ))}
  </View>
</Page>

对应的Grid样式：

sixLabelsGrid: {
  display: 'flex',
  flexWrap: 'wrap',
  justifyContent: 'space-between',
  padding: 15,
  gap: 10,
},
smallLabelContainer: {
  width: '48%',
  height: '31%',
  padding: 8,
  border: '1px solid #000',
},

3. 数据接入与PDF下载 #

从Node.js服务获取JSON数据后，传入PDF组件，用PDFDownloadLink提供下载入口：

import { PDFDownloadLink, Document, Page } from '@react-pdf/renderer';

const LabelPdfGenerator = ({ labels, layout = 'single' }) => {
  const renderDocument = () => (
    <Document>
      {layout === 'single' 
        ? labels.map(label => <Page key={label.id} size={[288,432]}><LabelComponent data={label} /></Page>)
        : <Page size="LETTER"><SixLabelsGrid data={labels} /></Page>
      }
    </Document>
  );

  return (
    <PDFDownloadLink
      document={renderDocument()}
      fileName={`shipping-labels-${layout}.pdf`}
    >
      {({ loading }) => loading ? '生成中...' : '下载PDF'}
    </PDFDownloadLink>
  );
};

方案二：基于jsPDF + html2pdf.js（兼容现有HTML/CSS） #

1. 准备可打印的DOM容器 #

将现有React标签组件渲染到一个隐藏的DOM容器中，根据布局动态生成结构：

• 单标签：容器尺寸设为标签物理大小
• 6标签：用CSS Grid布局在A4尺寸容器内排列6个标签

2. 配置工具链实现PDF生成 #

安装依赖：

npm install jspdf html2pdf.js dompurify

生成PDF的核心代码（确保文本可编辑需开启SVG模式）：

import html2pdf from 'html2pdf.js';
import DOMPurify from 'dompurify';

const generatePdf = (containerId: string, layout: 'single' | 'six') => {
  const sourceElement = document.getElementById(containerId);
  if (!sourceElement) return;

  // 净化HTML避免XSS风险
  const cleanHtml = DOMPurify.sanitize(sourceElement.innerHTML);
  const tempContainer = document.createElement('div');
  tempContainer.innerHTML = cleanHtml;
  document.body.appendChild(tempContainer);

  const pdfOptions = {
    margin: 5,
    filename: `shipping-labels-${layout}.pdf`,
    html2canvas: { 
      scale: 2, 
      useSVG: true, // 开启SVG模式保证文本可编辑
      logging: false 
    },
    jsPDF: { 
      unit: 'mm', 
      format: layout === 'single' ? [101.6, 152.4] : 'a4', 
      orientation: 'portrait' 
    }
  };

  html2pdf().set(pdfOptions).from(tempContainer).save().then(() => {
    document.body.removeChild(tempContainer);
  });
};

3. 样式与文本可编辑性注意事项 #

• 确保原SCSS样式已正确编译并应用到DOM容器
• useSVG: true是保证文本可编辑的关键，部分浏览器可能存在兼容性，需测试
• 自定义字体需提前嵌入到jsPDF中，避免PDF显示默认字体

关键提示 #

• @react-pdf/renderer生成的PDF是原生矢量格式，文本天然可编辑，但样式支持有限（不支持CSS伪类、动画）
• html2pdf.js对现有CSS兼容性更好，但只有开启SVG模式才能保证文本可编辑，否则会转为位图
• 条形码需用矢量格式（如SVG）嵌入，同时在下方显示对应数字文本，确保可读性

内容的提问来源于stack exchange，提问作者Roni Jack Vituli