![]() Page : This indicates a Page in the document and you can have multiple Pages in a document. StyleSheet.create() : It helps you define the styles you want to use in the document, It accepts an object containing all the CSS you want to use in the Document and it returns an object which you can apply to any of the PDF elements via the style prop.ĭocument : The PDFDownloadLink document prop accepts only a component of type Document so this must be the root of your components when creating the PDF template and accepts only child of type Page, The Document is simply a wrapper around your PDF template and it accepts some optional props So I'd briefly talk about the some of React-pdf API's I used here. ![]() This Movie.jsx component is the template of the PDF we are generating, Here we define how the structure of the PDF using React-primitives(VIEW, DOCUMENT) and also style. Import React, Įnter fullscreen mode Exit fullscreen mode This demo is going to demonstrate generating the best movies of the year. So I will briefly work you through a simple example of generating pdf from the MoviesDB API. Also when I checked the Github Repository the maintainer Diego Muracciole is quite active and tries to respond to most issues opened. Those were some of the features that made me pick React-pdf. React-Pdf has a Font API that helps you load fonts from different sources and use in your PDF document. What if you are a big fan of CSS-in-JS? well, they also support the entire styled-components API. Check the docs for the CSS properties they support. Now that we have an idea of how to create the PDF document how do we style it? React-pdf provides powerful styling solution using the StyleSheet API which helps you style your document using CSS, Media queries and Flexbox. You can checkout the docs for more details on what each component above does, Basically the components about help you create pdf using JSXesques syntax. React-Pdf uses React-Primitives spec to create custom components that you can use to create and structure your PDF documents. While going through the documentation when I was trying to pick the appropriate library for my use-case there were some features of React-pdf that convinced me to use it, I will briefly talk about them: So in the tutorial/ blog post, I will try to explain briefly how react-pdf works and also walk you through how to generate PDf from an array of objects coming from the Moviedb Api. The library was built by Diego Muracciole and also maintained by him. I found other libraries like but I decided to go with React-pdf because of its developer-friendly documentation. So I had to look for a React library that could work for my use case, lucky for me I found React-pdf. I was working on a project recently and I got a unique(for me) requirement that needed me to generate pdf file from an array of values in the Browser, usually in my little experience in software development Pdf files are generated in the backend using Puppeteer for node js and FPDF for PHP e.t.c. ![]() This post was originally published on my Blog, check it out for more contents.
0 Comments
Leave a Reply. |