如何从基于 JSON 的 HTML/SCSS 模板生成 PDF？

Question

我有一个服务器（Nodejs typescript），它以 JSON 格式创建标签数据。每个标签都有一个唯一的 ID，它包含各种详细信息，如发货信息、重量、条形码等。以下是 JSON 结构的示例：

{
    "{{unique-id}}": [
        {
            "shipment_details": {
                "from": {
                    "company": "company Inc",
                    "address": "address",
                    "country": "country"
                },
                "to": {
                    "company": "company",
                    "address": "address",
                    "country": "country"
                }
            },
            "weight": "31",
            "cz": "CZ002205",
            "created": "Created: 2023/09/05 01:21 PDT (-07)",
            "barcode": "barcode",
            "sku": "sku-IMP",
            "quantity": 20
        }
    ]
}

我创建了一个使用 SCSS 样式的组件模板（Reactjs typescript）来表示标签。 现在，我想在客户端生成一个 PDF 文件，将该模板呈现为可读文本（而不是嵌入图像）。

并且使用模板，我想要播放并在每页制作一个标签或每页 6 个标签，这样组件也应该调整大小并适合。

u200f我听说过像

jsPDF

和

react-pdf

这样的库，但我不知道如何继续，尤其是保留 SCSS 的样式并确保内容在 PDF 中保留为文本。

u200f有没有人有解决方案或方法可以将这种样式的 HTML 模板转换为文本可读的 PDF？

u200f提前谢谢您！

这里是标签的示例。

Answer 1

最后我能够使用

react-pdf

和

bwipjs

库创建我想要的标签。 最大的问题是我如何在 pdf 中写入条形码，我发现在

bwipjs

的帮助下，可以生成并将其转换为画布，然后它将作为 pdf 中的图像，然后使用

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

的帮助 您可以设计元素并将它们放在所需的位置。

这是一个小代码示例。

import { Document, Page, Text, View, Image, StyleSheet } from '@react-pdf/renderer';

const styles = StyleSheet.create({
  labelContainer: {
    // Define container styles
  },
  text: {
    // Define text styles
  },
  // Define styles for other elements
});

function RenderLabel({ labelData }) {
  return (
    <Document>
      <Page>
        <View style={styles.labelContainer}>
          {/* Render text elements */}
          <Text style={styles.text}>{labelData.shipment_details.from.company}</Text>
          {/* Insert barcode images */}
          <Image src={barcodeImageData} />
          {/* Add other elements as needed */}
        </View>
      </Page>
    </Document>
  );
}

这里是如何生成条形码，然后到canvas并返回dataUrl

import bwipjs from 'bwip-js';

async function generateBarcodeDataURL(options) {
  return new Promise((resolve) => {
    bwipjs.toCanvas('myCanvas', options, (info, canvas) => {
      resolve(canvas.toDataURL('image/png'));
    });
  });
}