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

Z时代
2024-01-10
分类：综合

在本文中，我们将了解如何使用 React JS 创建 PDF。PDF 是通用的文档格式，可用于各种目的，如报告、数据共享、数据存储等。如果我们可以通过简单的 CSS 在 React 中生成 PDF，这真的是一个很大的帮助。

示例

首先创建一个 React 应用程序 -

npx create-react-app pdfviewer

安装react-pdf包

npm i @react-pdf/renderer

我们将使用这个包在我们的 React 前端使用 DOM 元素和 CSS 创建一个 PDF。

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

import React from "react";
import {
   Document,
   Page,
   Text,
   View,
   StyleSheet,
   PDFViewer,
} from "@react-pdf/renderer";
//创建样式
   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,
   },
});
//创建文档组件
const MyDocument = () => (
   <Document>
      <Page size="A4" style={styles.page}>
         <View style={styles.title}>
            <Text>Welcome to Nhooo...</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>
   );
}