使用纯 CSS 和 HTML 在 React JS 中创建 PDF

react jsjavascript libraryfront end technology更新于 2025/11/19 14:04:17

在本文中，我们将了解如何使用 React JS 创建 PDF。PDF 是一种用途广泛的文档格式，可用于各种用途，例如报告、数据共享、数据存储等。如果我们能够通过简单的 CSS 在 React 中创建 PDF，那将非常有帮助。

示例

首先创建一个 React 应用 −

npx create-react-app pdfviewer

安装 react-pdf 软件包

npm i @react-pdf/renderer

我们将使用此软件包，通过 DOM 元素和 CSS 在 React 前端中创建 PDF。

在 App.js 中插入以下代码 −

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

// Create styles
   const styles = StyleSheet.create({
      page: {
      flexDirection: "column",
      backgroundColor: "green",
   },

   title: {
      margin: 20,
      fontSize: 25,
      textAlign: 'center',
      backgroundColor: '#E4E4E4',
      textTransform: 'uppercase',
   },

   section: {
      margin: 10,
      padding: 10,
      fontSize:25,
   },
});

// Create Document Component
const MyDocument = () => (
   <Document>
      <Page size="A4" style={styles.page}>
         <View style={styles.title}>
            <Text>Welcome to Tutorialspoint...</Text>
         </View>
         <View style={styles.section}>
            <Text>Create PDF using React</Text>
         </View>
         <View style={styles.section}>
            <Text>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididuntut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</Text>
         </View>
      </Page>
   </Document>
);
export default function App() {
   return (
      <PDFViewer>
         <MyDocument />
      </PDFViewer>
   );
}