有没有办法在React中将html标签转换为react-pdf标签？

Question

我将使用React中的react-pdf render将HTML内容转换为react-pdf标签。

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

const styles = StyleSheet.create({
  page: {
    backgroundColor: '#fff',
    padding: 24
  },
  h1: {
    fontSize: 24,
    fontWeight: 500
  },
  h5: {
    fontSize: 12,
    fontWeight: 500
  },
  ...

const ProposalPDF = ({ content }) => {

  return (
    <Document>
      <Page size="A4" style={styles.page}>
        <View style={styles.header}>
          <View>
            <Image
              source="/static/logo.png"
              style={styles.brand}
            />
          </View>
          <View style={styles.flexAlignRight}>
            <Text style={[styles.h1]}>
              Title
            </Text>
            ...

我需要将 HTML 内容添加到

Document

，但它们显示为纯 HTML。 我尝试的是在文本标签内使用

dangerouslySetInnerHTML

。 但根本没用。

<Text style={styles.body1} dangerouslySetInnerHTML={{__html: content }} />

我应该使用什么来将 html 内容显示为 PDF 视图？ HTML 内容由 Quill 编辑器生成。 所以有一些HTML标签包括

strong

、

h1

、

li

、

p

、

br

、

ol

、

ul

等

Answer 1

这个函数可以帮助您将 HTML 字符串 转换为 React PDF 元素，它也可以处理嵌套元素。

import ReactHtmlParser from "react-html-parser";
import { Text } from "@react-pdf/renderer";
import React from "react";

interface ParsedElementProps {
  children: React.ReactNode;
  [key: string]: any;
}

export const htmlParser = (taskDescription: string | null): JSX.Element => {
  const parseElements = (elements: React.ReactNode): React.ReactNode[] => {
    const returnContentConst: React.ReactNode[] = [];

    React.Children.forEach(elements, (element) => {
      if (typeof element === "string") {
        // Handle string content
        returnContentConst.push(<Text key={Math.random()}>{element}</Text>);
      } else if (React.isValidElement(element)) {
        console.log(element);
        const elementProps = element.props as ParsedElementProps;
        const type = element.type;
        const children = parseElements(elementProps.children);

        switch (type) {
          case "p":
            returnContentConst.push(
              <Text key={Math.random()}>{children}</Text>
            );
            break;
          case "strong":
            returnContentConst.push(
              <Text
                key={Math.random()}
                style={{ fontFamily: "Helvetica-Bold", fontWeight: 600 }}
              >
                {children}
              </Text>
            );
            break;
          // Add more cases as needed for other HTML tags
          default:
            returnContentConst.push(
              <Text key={Math.random()}>{children}</Text>
            );
            break;
        }
      }
    });

    return returnContentConst;
  };

  if (taskDescription) {
    console.log(taskDescription);
    const parsedHtml = ReactHtmlParser(taskDescription);

    console.log(parsedHtml);
    const returnContentConst = parseElements(parsedHtml);

    console.log(returnContentConst);
    return <>{returnContentConst}</>;
  } else {
    return <></>;
  }
};

使用方法

...
 const PaymentAndAdditionalDetailSection = () => {
    return htmlParser(paymentOutput);
  };
...

Answer 2

我最终找到了一个很好的资源，帮助我在这里找到了解决方案：https://levelup.gitconnected.com/elegant-pdfs-from-user- generated-content-in-react-656b79533fee

我有一个辅助函数，它使用 DraftJS 来过滤 HTML 并转换为 React-pdf 友好的标签。