Creacion del proyecto
npm install @react-pdf/renderer --save
en components/PDF.jsx
import { Document, Text, Page, StyleSheet, Image } from "@react-pdf/renderer";
import nextLogo from '../nextlogo.png';
const styles = StyleSheet.create({});
function PDF() {
return (
<Document>
<Page>
<Text>Hello world</Text>
<Image src={nextLogo} />
<Text>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi tempore modi voluptate molestias aperiam laboriosam consequatur ullam aspernatur blanditiis earum, id eius dignissimos a neque, autem doloribus accusantium recusandae repudiandae consectetur. Sapiente eum neque perspiciatis laborum, at et rerum ipsum necessitatibus ex, odio explicabo atque nostrum, velit voluptatum similique labore minima. Incidunt, quibusdam dicta quisquam quidem dolorum nemo possimus sed error inventore nam, quis ut officia quo sapiente dolorem molestiae corporis, velit optio. Similique ducimus doloribus quam, corrupti adipisci, perspiciatis accusamus voluptates laudantium magni cupiditate optio! Sunt ad, in ut similique est, vitae enim minima deleniti voluptatem repellat architecto dolor.
</Text>
</Page>
</Document>
);
}
export default PDF;
en App.jsx:
import { PDFDownloadLink } from "@react-pdf/renderer";
import PDF from "./components/PDF";
function App() {
return (
<div>
<PDFDownloadLink document={<PDF />} fileName="somename.pdf">
{({ blob, url, loading, error }) =>
loading ? (
<button>Loading document...</button>
) : (
<button>Download now!</button>
)
}
</PDFDownloadLink>
</div>
);
}
export default App;
Añadiendo Estilos
import {
Document,
Text,
Page,
StyleSheet,
Image,
View,
} from "@react-pdf/renderer";
import nextLogo from "../nextlogo.png";
const styles = StyleSheet.create({
page: {
backgroundColor: "#E4E4E4",
},
section: {
flexDirection: "row",
margin: 10,
padding: 10,
flexGrow: 1,
},
pageNumber: {
position: "absolute",
fontSize: 12,
bottom: 30,
left: 0,
right: 0,
textAlign: "center",
color: "grey",
},
});
function PDF() {
return (
<Document>
<Page style={styles.page}>
<Text>Hello world</Text>
<View style={styles.section}>
<Image src={nextLogo} />
<Text>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi
tempore modi voluptate molestias aperiam laboriosam consequatur
ullam aspernatur blanditiis earum, id eius dignissimos a neque,
autem doloribus accusantium recusandae repudiandae consectetur.
Sapiente eum neque perspiciatis laborum, at et rerum ipsum
necessitatibus ex, odio explicabo atque nostrum, velit voluptatum
similique labore minima. Incidunt, quibusdam dicta quisquam quidem
dolorum nemo possimus sed error inventore nam, quis ut officia quo
sapiente dolorem molestiae corporis, velit optio. Similique ducimus
doloribus quam, corrupti adipisci, perspiciatis accusamus voluptates
laudantium magni cupiditate optio! Sunt ad, in ut similique est,
vitae enim minima deleniti voluptatem repellat architecto dolor.
</Text>
</View>
<View style={styles.pageNumber}>
<Text
render={({ pageNumber, totalPages }) =>
`${pageNumber} / ${totalPages}`
}
// fixed
/>
</View>
</Page>
</Document>
);
}
export default PDF;