0

在 reactJS 中，我的要求是保存一些图像、内容、图表等的 PDF 文件。为此，当我使用以下编程进行测试时，我无法使用任何 reactJS 组件，并且只能{Page, Text, View, Document, StyleSheet, Image} 在@react-pdf/renderer. 但我要求使用所有组件。请让我知道<Text>,<p>在 PdfDocument 中运行其他组件的任何可能方法。

电影列表.jsx

import React, { useState } from "react";
import { PDFDownloadLink } from "@react-pdf/renderer";
import { PdfDocument } from "./Umovie";


export default function MovieList() {
  const [data, setData] = useState([]);
  const [show, setHide] = useState(false)


  const OnGeneratePDF = async e => {
    try {
      setHide(true)
    } catch (error) {
      console.log(error);
    }
  };

  return (
    <div className="container">
      <h2>Best movies of the year</h2>
      <button onClick={OnGeneratePDF}>GeneratePDF</button>

      {show &&<PDFDownloadLink
        document={<PdfDocument data={data} />}
        fileName="movielist.pdf"
        style={{
          textDecoration: "none",
          padding: "10px",
          color: "#4a4a4a",
          backgroundColor: "#f2f2f2",
          border: "1px solid #4a4a4a"
        }}
      >
        {({ blob, url, loading, error }) =>
          loading ? "Loading document..." : "Download Pdf"
        }
      </PDFDownloadLink>}
    </div>
  );
}

Umovie.jsx

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

export function PdfDocument(props) {
    console.log("pdf props", props.data);
    return (
        <Document>
            <Page style={styles.page} type="portrait">
                {props.data
                    ? <View  style={styles.movieContainer}>
                        <View  style={styles.movieDetails}>
                        <Text style={styles.Title}>Uday Test Title</Text>
                        </View>
                        <View style={styles.overviewContainer}>
                            <p>Hi Hello How areyou</p>
                        </View>
                    </View>
            : ""}
            </Page>
        </Document>
    );
}

const styles = StyleSheet.create({
    page: {
        backgroundColor: "#ffffff"
    },
    section: {
        margin: 10,
        padding: 10,
        flexGrow: 1
    },
    movieContainer: {
        backgroundColor: "#f6f6f5",
        padding: 20
    },
    movieDetails: {
        display: "flex",
        marginLeft: 5
    },
    Title: {
        fontSize: 15,
        marginBottom: 10
    },
    Overview: {
        fontSize: 10
    },

    image: {
        height: 200,
        width: 150
    },
});

在上面，Umovie.jsx如果我删除<p>Hi Hello How areyou</p>它，那么它工作正常，但如果我添加它，它就不能工作......

4

1 回答 1

0

抱歉，没有办法呈现 html 标签。您需要将您的替换<p>为<Text>.

于 2021-03-24T19:21:07.790 回答