{"id":10618,"date":"2024-10-24T10:21:40","date_gmt":"2024-10-24T10:21:40","guid":{"rendered":"http:\/\/localhost\/hashstudioz\/?p=10618"},"modified":"2025-09-04T16:45:55","modified_gmt":"2025-09-04T11:15:55","slug":"how-to-generate-pdfs-for-dynamic-content-in-reactjs","status":"publish","type":"post","link":"https:\/\/www.hashstudioz.com\/blog\/how-to-generate-pdfs-for-dynamic-content-in-reactjs\/","title":{"rendered":"How to Generate PDFs for Dynamic Content in ReactJS"},"content":{"rendered":"\n<p>Did you know that nearly <strong>90% of businesses<\/strong> report a significant increase in customer satisfaction when they provide downloadable content in a convenient PDF format? <strong>Generate PDFs in ReactJS<\/strong> has never been easier, thanks to the react-pdf library, which allows developers to seamlessly create dynamic and customizable PDF documents directly within their React applications.<\/p>\n\n\n\n<p>To generate a PDF, you should implement a button that, when clicked, triggers the PDF creation and allows the user to either view or download the file. Begin by setting up this button within your React component.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.hashstudioz.com\/blog\/how-to-generate-pdfs-for-dynamic-content-in-reactjs\/#Key_Takeaways\" >Key Takeaways<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.hashstudioz.com\/blog\/how-to-generate-pdfs-for-dynamic-content-in-reactjs\/#Integrate_a_button_for_downloading\" >Integrate a button for downloading<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.hashstudioz.com\/blog\/how-to-generate-pdfs-for-dynamic-content-in-reactjs\/#Establish_a_State_to_Manage_PDF_Downloads_and_Display_Content_Based_on_the_Corresponding_PDF_Action\" >Establish a State to Manage PDF Downloads and Display Content Based on the Corresponding PDF Action<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.hashstudioz.com\/blog\/how-to-generate-pdfs-for-dynamic-content-in-reactjs\/#Generate_a_PDF_Featuring_Dynamic_Content\" >Generate a PDF Featuring Dynamic Content.<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.hashstudioz.com\/blog\/how-to-generate-pdfs-for-dynamic-content-in-reactjs\/#Output\" >Output<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.hashstudioz.com\/blog\/how-to-generate-pdfs-for-dynamic-content-in-reactjs\/#Cloud_Solutions_by_HashStudioz_Scalable_PDF_Generation_for_Dynamic_Content\" >Cloud Solutions by HashStudioz: Scalable PDF Generation for Dynamic Content<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.hashstudioz.com\/blog\/how-to-generate-pdfs-for-dynamic-content-in-reactjs\/#Conclusion\" >Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Key_Takeaways\"><\/span>Key Takeaways<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>User Demand<\/strong>: Understanding that a significant number of users prefer downloadable content in PDF format can drive better application design.<\/li>\n\n\n\n<li><strong>Dynamic Content<\/strong>: ReactJS offers powerful capabilities to generate PDFs from dynamic content, making it easier to provide tailored information.<\/li>\n\n\n\n<li><strong>Library Options<\/strong>: Familiarize yourself with popular libraries like jsPDF and React-PDF, which simplify the PDF generation process.<\/li>\n\n\n\n<li><strong>Performance Considerations<\/strong>: Ensure that PDF generation does not hinder application performance by optimizing the generation process.<\/li>\n\n\n\n<li><strong>Styling and Formatting<\/strong>: Utilize CSS for styling PDFs to maintain brand consistency and improve readability.<\/li>\n\n\n\n<li><strong>Testing<\/strong>: Always test generated PDFs across different devices and browsers to ensure a consistent user experience.<\/li>\n\n\n\n<li><strong>User Engagement<\/strong>: Offering downloadable PDFs can significantly enhance user engagement and satisfaction, leading to better retention rates.<\/li>\n\n\n\n<li><strong>Accessibility<\/strong>: Consider accessibility features when generating PDFs to ensure all users can benefit from the content.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Integrate_a_button_for_downloading\"><\/span>Integrate a button for downloading<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>npm i @react-pdf\/renderer<\/code><\/pre>\n\n\n\n<p>Import the button into the desired page and render it within the HTML structure.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { PDFDownloadLink } from \"@react-pdf\/renderer\";<\/code><\/pre>\n\n\n\n<p>I have set placeholder content to dynamically load data<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { politicalData, basicInfo } from '.\/Tested.jsx';<\/code><\/pre>\n\n\n\n<p>Create a separate file and include some placeholder data in it.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/Tested.jsx\n\nexport const politicalData = &#91;\n            {\n                \"heading\": \"General\",\n                \"qa\": &#91;\n                    {\n                        \"q\": \"1. Political first question - \",\n                        \"a\": \"Not Exists\",\n                        \"type\": \"list\",\n                        \"prefixIcon\": \"https:\/\/cdn-icons-png.flaticon.com\/128\/1375\/1375106.png\",\n                        \"prefixIconSvg\": \"https:\/\/cdn-icons-png.flaticon.com\/128\/1829\/1829586.png\",\n                        \"valueIcon\": \"\",\n                        \"place\": \"\",\n                        \"options\": &#91;]\n                    },\n                    {\n                        \"q\": \"2. Political second question - \",\n                        \"a\": \"District\",\n                        \"type\": \"default\",\n                        \"prefixIcon\": \"https:\/\/cdn-icons-png.flaticon.com\/128\/16\/16410.png\",\n                        \"prefixIconSvg\": \"https:\/\/cdn-icons-png.flaticon.com\/128\/1829\/1829586.png\",\n                        \"valueIcon\": \"\",\n                        \"place\": \"\",\n                        \"options\": &#91;]\n                    },\n                    {\n                        \"q\": \"3. Political third question - \",\n                        \"a\": \"Town Planning Department of the State Government\",\n                        \"type\": \"default\",\n                        \"prefixIcon\": \"https:\/\/cdn-icons-png.flaticon.com\/128\/1375\/1375106.png\",\n                        \"prefixIconSvg\": \"https:\/\/cdn-icons-png.flaticon.com\/128\/1829\/1829586.png\",\n                        \"valueIcon\": \"\",\n                        \"place\": \"\",\n                        \"options\": &#91;]\n                    },\n                    {\n                        \"q\": \"4. Political fourth question - \",\n                        \"a\": \"District\",\n                        \"type\": \"default\",\n                        \"prefixIcon\": \"https:\/\/cdn-icons-png.flaticon.com\/128\/16\/16410.png\",\n                        \"prefixIconSvg\": \"https:\/\/cdn-icons-png.flaticon.com\/128\/1829\/1829586.png\",\n                         \"valueIcon\": \"\",\n                        \"place\": \"\",\n                        \"options\": &#91;]\n                    },\n                    {\n                        \"q\": \"5. Political fifth question - \",\n                        \"a\": \"District\",\n                        \"type\": \"default\",\n                        \"prefixIcon\": \"https:\/\/cdn-icons-png.flaticon.com\/128\/1375\/1375106.png\",\n                        \"prefixIconSvg\": \"https:\/\/cdn-icons-png.flaticon.com\/128\/1829\/1829586.png\",\n                        \"valueIcon\": \"\",\n                        \"place\": \"\",\n                        \"options\": &#91;]\n                    },\n                    {\n                        \"q\": \"6. Political six question - \",\n                        \"a\": \"\",\n                        \"type\": \"multiSelectionList\",\n                        \"prefixIcon\": \"https:\/\/cdn-icons-png.flaticon.com\/128\/16\/16410.png\",\n                        \"prefixIconSvg\": \"https:\/\/cdn-icons-png.flaticon.com\/128\/1829\/1829586.png\",\n                        \"valueIcon\": \"https:\/\/cdn-icons-png.flaticon.com\/128\/1442\/1442912.png\",\n                        \"place\": \"pre\",\n                        \"options\": &#91;\n                            \"Is this for testing\",\n                            \"Yeah its a good plan\",\n                            \"This is fine\"\n                        ]\n                    }\n                ]\n            }];\n\nexport const basicInfo = {\n    \"actor_id\": \"7878*******\",\n    \"actor_name\": \"Hansa Thakur\",\n    \"population_2011\": \"6,777\",\n    \"no_of_wards\": \"15\",\n    \"latest_population_year\": 2024,\n    \"latest_population\": \"10,128\",\n    \"state_name\": \"Himachal Pradesh\",\n    \"admin_officer_name\": \"Mr Hans Singh\",\n    \"admin_officer_designation\": \"Chief Municipal Officer\",\n    \"public_rep_name\": \"Mr Radhe Nag\",\n    \"public_rep_designation\": \"Chairperson\",\n    \"nodal_officer_name\": \"Mr Sanjay Pande\",\n    \"nodal_officer_designation\": \"Municipal Engineer\",\n    \"form_status\": \"Completed\"<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Establish_a_State_to_Manage_PDF_Downloads_and_Display_Content_Based_on_the_Corresponding_PDF_Action\"><\/span>Establish a State to Manage PDF Downloads and Display Content Based on the Corresponding PDF Action<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>const &#91;isDownload, setIsDownload] = useState(true); \/\/ Verifies whether the PDF is downloading\nconst &#91;filename, setFilename] = useState(\"react-test.pdf\"); \/\/ Specifies the file name\nconst &#91;loader, setLoader] = useState(false); \/\/ Indicates whether the PDF is currently downloading\u2026<\/code><\/pre>\n\n\n\n<p>When the button is clicked, the PDF should begin downloading; however, we need to inform the page that an action is taking place. To achieve this, we can manage our state to display a custom message on the button.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>  const handlePdf = () => {\n    setIsDownload(true);\n    setLoader(true);\n    setTimeout(() => {\n      setDisablePdf(false);\n      setLoader(false);\n    }, 2000);\n  };<\/code><\/pre>\n\n\n\n<p>CSS for buttons allows for extensive customization, enabling you to tailor your button&#8217;s appearance to suit your preferences.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.pdf-btn {\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  font-size: 1rem; \/* Base font size *\/\n  color: white;\n  font-weight: 500;\n  background-color: #0062BA;\n  border: 1px solid #0062BA; \/* Border with specified color *\/\n  padding: 0.5rem; \/* Padding equivalent to p-2 *\/\n  border-radius: 0.375rem; \/* Rounded corners equivalent to rounded-md *\/\n  width: auto; \/* Default width *\/\n  margin-left: auto; \/* Left margin auto for alignment *\/\n  margin-right: 0; \/* Right margin reset *\/\n  transition: all 0.7s ease-in-out; \/* Transition effect *\/\n  align-items: center; \/* Align items center in flex container *\/\n}\n\n\/* Responsive adjustments *\/\n@media (max-width: 640px) { \/* Small screen breakpoint *\/\n  .pdf-btn {\n    margin-right: 0.75rem; \/* Right margin for small screens *\/\n  }\n}\n\n@media (min-width: 1280px) { \/* Extra-large screen breakpoint *\/\n  .pdf-btn {\n    margin-right: 0; \/* Reset right margin for extra-large screens *\/\n  }\n}\n\n@media (min-width: 1536px) { \/* 1xl breakpoint *\/\n  .pdf-btn {\n    margin-left: 0; \/* Reset left margin for 1xl screens *\/\n  }\n}<\/code><\/pre>\n\n\n\n<p>To optimize the code, we will create a separate PDF file where we will pass this in the document and write all the PDF content. This page will receive dynamic data. Therefore, ensure to import that file\u00a0 at the top.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import Pdf from \"..\/Pdf\";<\/code><\/pre>\n\n\n\n<p>Proceed to configure the button on the page<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;PDFDownloadLink\n                    className=\"pdf-btn\"\n                    fileName={filename}\n                    onClick={handlePdf}\n                    document={\n                      &lt;Pdf\n                        download={isDownload}\n                         basicData={basicInfo}\/\/dynamic data\n                         pData={politicalData} \/\/dynamic data\n                          \/>                      }\n                  >\n                    {({ blob, url, loading, error }) => (\n                      &lt;>\n                        &lt;span>{loader ? \"Loading documents...\" : \"Download Now\"}&lt;\/span>\n                      &lt;\/>\n                    )}\n                  &lt;\/PDFDownloadLink><\/code><\/pre>\n\n\n\n<p>We can incorporate Font Awesome icons or custom icons as needed. For instance, I referenced this image via a CDN and set it up in a dedicated file. To implement this, create a separate file named <strong>CDN.jsx.<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>export const img2 = 'https:\/\/cdn-icons-png.flaticon.com\/128\/3100\/3100240.png';\nexport const agam =\"https:\/\/png.pngtree.com\/thumb_back\/fh260\/background\/20241016\/pngtree-large-orange-moon-is-in-the-sky-above-a-wave-image_16403128.jpg\";\nexport const i_4 = 'https:\/\/t3.ftcdn.net\/jpg\/02\/94\/88\/68\/240_F_294886812_WDt5ec6COGuTGxnVuUVttrZWHg79F6Hb.jpg';\nexport const soul = 'https:\/\/images.pexels.com\/photos\/166277\/pexels-photo-166277.jpeg';\nexport const i_1 ='https:\/\/cdn-icons-png.flaticon.com\/128\/17935\/17935447.png';\nexport const i_3 = 'https:\/\/cdn-icons-png.flaticon.com\/128\/17992\/17992957.png';\nexport const i_2 ='https:\/\/images.pexels.com\/photos\/164455\/pexels-photo-164455.jpeg';\nexport const img1 = \"https:\/\/images.pexels.com\/photos\/52718\/angel-wings-love-white-52718.jpeg\";\nexport const corner = 'https:\/\/image.shutterstock.com\/image-vector\/3d-fire-flame-icon-burning-260nw-2234372939.jpg';\nexport const dwnldbtn ='https:\/\/w7.pngwing.com\/pngs\/190\/961\/png-transparent-download-now-download-icon-download-button-download-logo-flat-icon-flat-logo-flat-image-button-flat-round.png'<\/code><\/pre>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Also Read:-<\/strong>  <a href=\"https:\/\/www.hashstudioz.com\/blog\/react-vs-react-native\/\">React vs. React Native: Clash of Titans in the App Development Arena<\/a> <\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Generate_a_PDF_Featuring_Dynamic_Content\"><\/span>Generate a PDF Featuring Dynamic Content.<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>For setting the font size in a PDF, we utilized the Poppins font library. You can, however, choose any library that suits your needs. I recommend Poppins because I\u2019ve successfully used it in PDFs before. You can easily download the font files from the following link: https:\/\/fontlibrary.org\/en\/font\/poppins#google_vignette and host them on your server or CDN.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/pdf.jsx<\/code><\/pre>\n\n\n\n<p>A PDF is a document format that enables us to control various components such as headers, footers, layout, and styling. Therefore, we must explicitly define and manage each of these elements<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import {\n    Document,\n    Image,\n    Page,\n    StyleSheet,\n    Text,\n    View,\n    Font \n} from \"@react-pdf\/renderer\"; \/\/call the element<\/code><\/pre>\n\n\n\n<p>You may specify the file path where your library is located.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { CND_URL } from \"..\/..\/Utils\";<\/code><\/pre>\n\n\n\n<p>Import all the images from a separate file.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { img1, img2,  corner, soul, agam, i_1, i_2, i_3, i_4 } from '.\/CDN';<\/code><\/pre>\n\n\n\n<p>Register font library.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Font.register({\n    family: 'Poppins', src: CND_URL + 'fonts\/poppins\/Poppins-Regular.ttf',\n    fonts: &#91;\n        { src: CND_URL + 'fonts\/poppins\/Poppins-ExtraBold.ttf', fontWeight: 'bold' },\n        { src: CND_URL + 'fonts\/poppins\/Poppins-Light.ttf', fontWeight: 'normal' },\n        { src: CND_URL + 'fonts\/poppins\/Poppins-Medium.ttf', fontWeight: 500 },\n        { src: CND_URL + 'fonts\/poppins\/Poppins-Medium.ttf', fontWeight: 600 },\n        { src: CND_URL + 'fonts\/poppins\/Poppins-bold.ttf', fontWeight: 800 },\n        { src: CND_URL + 'fonts\/poppins\/Poppins-Italic.ttf', fontStyle: 'italic' },\n\n    ]\n});\nFont.registerHyphenationCallback(word => (\n    &#91;word]\n));\n\nconst Pdf = ({\n    lastUpdated,\n    basicData,\/\/get the data dynamically\n    pData,\/\/get the data dynamically\n}) => {\n    const styles = StyleSheet.create({ \/\/set style of document \n        bottom: {\n            marginTop: 10,\n            height: '20px'\n        },\n        page: { \n            family: 'Poppins',\n            flexDirection: 'column',\n            backgroundColor: '#fff',\n            margin: 0,\n            paddingBottom: 50\n        },\n        section: {\n            position: 'relative',\n            margin: 0,\n        },\n        footer: {\n            position: 'absolute', \/\/ Fixed position at the bottom\n            bottom: 10,\n            height: 55, \/\/ Set the height of the footer\n            left: 20,\n            right: 20,\n        },\n        text1: {\n            fontSize: 22,\n            fontFamily: 'Poppins', fontWeight: 600,\n            color: '#000',\n            position: 'absolute', \/\/ Set position to absolute for precise text placement\n            top: '75%', \/\/ Adjust top to center vertically\n            left: '5%', \/\/ Adjust left to center horizontally\n            \/\/transform: 'translate(-50%, -50%)', \/\/ Center the text\n            textAlign: 'left',\n            width: 280\n        },\n        text2: {\n            fontSize: 25,\n            fontFamily: 'Poppins', fontWeight: 'bold',\n            color: '#000',\n            position: 'absolute', \/\/ Set position to absolute for precise text placement\n            top: '75%', \/\/ Adjust top to center vertically\n            left: '5%', \/\/ Adjust left to center horizontally\n            \/\/transform: 'translate(-50%, -50%)', \/\/ Center the text\n            textAlign: 'center',\n        },\n        text3: {\n            fontSize: 20,\n            color: '#686868',\n            fontFamily: 'Poppins', fontWeight: 500,\n            position: 'absolute', \/\/ Set position to absolute for precise text placement\n            top: '85%', \/\/ Adjust top to center vertically\n            left: '5%', \/\/ Adjust left to center horizontally\n            \/\/transform: 'translate(-50%, -50%)', \/\/ Center the text  width: '595', height: '100%',\n            textAlign: 'center',\n        },\n        text4: {\n            fontSize: 24,\n            fontFamily: 'Poppins', fontWeight: 600,\n            color: '#FE8402',\n            left: '5%',\n            position: 'absolute',\n            top: '90%',\n        },\n        power: {\n            paddingTop: 10,\n            fontSize: 11,\n            fontFamily: 'Poppins', fontWeight: 'normal',\n            color: '#000',\n        },\n        section2: {\n            flexDirection: 'row',\n            justifyContent: 'left', \/\/ Center content vertically\n            margin: 0\n        },\n        image: {\n            height: 750,\n        },\n        image2: {\n            width: 40,\n            height: 30,\n            paddingTop: 0\n        },\n        sectionContainer: {\n            margin: 20,\n            marginTop: 0,\n            position: 'relative',\n            fontFamily: 'Poppins'\n        },\n        row: {\n            flexDirection: 'column',\n            alignItems: 'left',\n        },\n        col: {\n            flexDirection: 'row', \/\/ Set to 'row' for left-to-right alignment\n            alignItems: 'left', \/\/ Align items vertically in the center\n            justifyContent: 'flex-end', \/\/ Align items to the right\n            marginTop: '-50'\n        },\n\n        corner: {\n            width: 33,\n            height: 35,\n            paddingTop: 10,\n            marginLeft: -10,\n\n        },\n        indicatorText: {\n            fontSize: 20,\n            fontFamily: 'Poppins', fontWeight: 600,\n            color: '#000', \/\/ Text color\n        },\n        indicatorBorder: {\n            marginTop: 2,\n            width: 50,\n            borderRadius: 5, \/\/ Set the border radius\n            borderWidth: 2, \/\/ Border width\n            borderStyle: 'solid', \/\/ Border style (solid, dashed, dotted, etc.)\n            borderColor: '#FF9211', \/\/ Border color\n            backgroundColor: '#FF9211',\n        },\n        logo: {\n            width: 140,\n            height: 50,\n            paddingRight: 10,\n            borderRightWidth: 1, \/\/ Border width\n            borderStyle: 'solid', \/\/ Border style (solid, dashed, dotted, etc.)\n            borderRightColor: '#000', \/\/ Border color\n        },\n        logo1: {\n            width: 140,\n            height: 50,\n            paddingLeft: 10,\n        },\n        tile: {\n            backgroundColor: '#0062BA',\n            paddingTop: 3,\n            paddingBottom: 3,\n            paddingLeft: 5,\n            color: '#fff',\n            fontSize: 13,\n            fontFamily: 'Poppins', fontWeight: 500,\n            \/* height: 32,*\/\n            borderTopRightRadius: 3,\n            borderBottomRightRadius: 3,\n            flex: 1,\n        },\n        headingP: {\n            display: \"flex\",\n            flexDirection: \"row\",\n            textAlign: 'left',\n            marginBottom: 5\n        },\n        headingPp: {\n            display: \"flex\",\n            flexDirection: \"row\",\n            textAlign: 'left',\n            paddingTop: 5\n        },\n        mBox: {\n            padding: 6,\n            backgroundColor: '#fff',\n            borderColor: '#C8C7C7',\n            borderWidth: 1,\n            borderRadius: 5,\n            paddingBottom: 5,\n            marginBottom: 5,\n            fontFamily: 'Poppins'\n        },\n        content: {\n            display: \"flex\",\n            flexDirection: \"row\",\n            fontFamily: 'Poppins'\n        },\n        contentM: {\n            color: '#000',\n            fontSize: 11,\n            width: '100%',\n            fontFamily: 'Poppins',\n            fontWeight: 500\n        },\n        contentImg: {\n            maxWidth: 15,\n            maxHeight: 12,\n            marginRight: 5,\n            marginTop: 3,\n            fontFamily: 'Poppins',\n        },\n        tableBottomIcon: {\n            width: 25,\n            height: 20,\n            paddingRight: 5,\n\n        },\n        dot1: { marginTop: 3, width: 6, height: 6, backgroundColor: '#936DFE' },\n        dot2: { marginTop: 3, width: 6, height: 6, backgroundColor: '#FF4E8E' },\n        dot3: { marginTop: 3, width: 6, height: 6, backgroundColor: '#5DBBFF' },\n        dot4: { marginTop: 3, width: 6, height: 6, backgroundColor: '#5FED52' },\n\n        label: { fontSize: 11, color: '#000', marginLeft: 5, fontFamily: 'Poppins', fontWeight: 500 },\n        value: { fontSize: 11, color: '#0062BA', fontFamily: 'Poppins', fontWeight: 600, marginLeft: 15 },\n        container: {\n            flexDirection: 'column',\n            alignItems: 'left',\n            justifyContent: 'left',\n            marginLeft: 10,\n            marginTop: 20,\n        },\n        sectionBox: { padding: 3, borderColor: '#CACACA', backgroundColor: '#F9F9F9', borderStyle: 'solid', borderWidth: 2, borderRadius: 5, width: 260, height: 280, marginBottom: 10 },\n        pagination: { textAlign: 'right', fontSize: 11, color: '#000', fontFamily: 'Poppins', fontWeight: 500, marginTop: 10 },\n    });<\/code><\/pre>\n\n\n\n<p>\/\/You can create a function that capitalizes the first letter<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>    function capitalizeText(sentence) {\n        if (sentence &amp;&amp; sentence.length) {\n            \/\/ Split the sentence into words\n            const words = sentence.split(' ');\n            \/\/ Capitalize the first letter of each word\n            const capitalizedWords = words.map(word => {\n                \/\/ Capitalize the first letter and concatenate with the rest of the word\n                return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();\n            });\n            \/\/ Join the words back into a sentence\n            const capitalizedSentence = capitalizedWords.join(' ');\n            return capitalizedSentence;\n        }\n        return sentence;\n    }<\/code><\/pre>\n\n\n\n<p>Keep the header separate so it can be called on every page. Use the View tag to define the layout and the Image tag to call the image. Additionally, keep all styles in a separate section.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>  const Header = ({ structure }) => (\n        &lt;View fixed style={{ marginTop: 10 }}>\n            &lt;Image style={styles.corner} src={corner} \/>\n\n            &lt;View style={styles.row}>\n                &lt;Text style={styles.indicatorText}>Indicators&lt;\/Text>\n                &lt;Text style={styles.indicatorBorder}>&lt;\/Text>\n            &lt;\/View>\n            &lt;View style={styles.col}>\n                &lt;Image style={styles.logo} src={soul} \/>\n                &lt;Image style={styles.logo1} src={agam} \/>\n            &lt;\/View>\n            &lt;View style={{ display: \"flex\", flexDirection: \"row\", marginTop: 5, marginBottom: 5 }}>\n                &lt;Text style={{ textAlign: \"left\", color: '#0062BA', fontSize: 15, fontFamily: 'Poppins', fontWeight: 600 }}>{structure}&lt;\/Text>\n                &lt;Text style={{ textAlign: \"right\", flex: 1, color: '#0062BA', fontSize: 14, fontFamily: 'Poppins', fontWeight: 600 }}>{basicData?.actor_name}({basicData?.actor_id})&lt;\/Text>\n            &lt;\/View>\n        &lt;\/View>\n    );<\/code><\/pre>\n\n\n\n<p>\/\/Keep the footer section separate, just like the header, and call it on every page.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const Footer = ({ }) => (\n        &lt;View style={styles.footer} fixed>\n            &lt;View style={{\n                flexDirection: 'row', width: '100%', justifyContent: 'space-between'\n            }}>\n                &lt; View style={styles.section2} >\n                    &lt;Text style={styles.power}>Powered By &lt;\/Text>\n                    &lt;Image style={styles.image2} src={img2} \/>\n                &lt;\/View>\n                &lt;Text style={styles.pagination}\n                    render={({ pageNumber, totalPages }) => (\n                        `Page ${pageNumber} \/ ${totalPages}`\n                    )}>&lt;\/Text>\n            &lt;\/View>\n         \n        &lt;\/View>\n    );<\/code><\/pre>\n\n\n\n<p>Write code to create a page and include the header and footer on each page.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> return (&lt;>\n        {pData &amp;&amp;\n            &lt;Document >\n                &lt;Page size=\"A4\" style={styles.page}>\n                    &lt;View style={styles.section}>\n                        &lt;Image style={styles.image} src={img1} \/>\n                        &lt;Text wrap={false} style={styles.text1}>{basicData?.actor_name}&lt;\/Text>\n                        &lt;Text style={styles.text3}>{basicData?.actor_id}&lt;\/Text>\n                        &lt;Text style={styles.text4}>{basicData?.state_name}&lt;\/Text>\n                    &lt;\/View>\n                    &lt;View style={styles.footer}>\n                        &lt;View style={styles.section2}>\n                            &lt;Text style={styles.power}>Powered By &lt;\/Text>\n                            &lt;Image style={styles.image2} src={img2} \/>\n                        &lt;\/View>\n                    &lt;\/View>\n                &lt;\/Page>\n\n                &lt;Page size=\"A4\" style={styles.page}>\n                    &lt;View style={styles.sectionContainer}>\n                        &lt;View wrap={false} style={{ marginTop: 10 }}>\n                            &lt;Image style={styles.corner} src={corner} \/>\n\n                            &lt;View style={styles.row}>\n                                &lt;Text style={styles.indicatorText}>Actor Information&lt;\/Text>\n                                &lt;Text style={styles.indicatorBorder}>&lt;\/Text>\n                            &lt;\/View>\n                            &lt;View style={styles.col}>\n                                &lt;Image style={styles.logo} src={soul} \/>\n                                &lt;Image style={styles.logo1} src={agam} \/>\n                            &lt;\/View>\n                            &lt;View style={{ display: \"flex\", flexDirection: \"row\", marginTop: 20, marginBottom: 10 }}>\n                                {lastUpdated &amp;&amp; &lt;Text style={{ textAlign: \"left\", color: '#000', fontSize: 11, fontFamily: 'Poppins', fontWeight: 500 }}>Updated on: &lt;Text style={{ color: '#0062BA' }}>{lastUpdated}&lt;\/Text>&lt;\/Text>}\n                                &lt;Text style={{ textAlign: \"right\", flex: 1, color: '#0062BA', fontSize: 14, fontFamily: 'Poppins', fontWeight: 600 }}>{basicData?.actor_name}({basicData?.actor_id})&lt;\/Text>\n                            &lt;\/View>\n                        &lt;\/View>\n\n                        &lt;View style={{ position: 'relative', display: 'flex', flexDirection: \"row\", justifyContent: 'space-between' }}>\n                            {\/***********SECTION 1***********\/}\n                            &lt;View style={styles.sectionBox}>\n                                &lt;Text style={{ position: 'absolute', top: -5, left: 80, borderRadius: 5, borderColor: '#936DFE', backgroundColor: '#936DFE', borderWidth: 2, width: 100, height: 2, margin: '0 auto' }}>&lt;\/Text>\n                                &lt;View style={styles.headingPp}>\n                                    &lt;Image style={styles.tableBottomIcon} src={i_1} \/>\n                                    &lt;View style={{ flexDirection: 'column' }}>\n                                        &lt;Text style={{ fontSize: 14, color: '#000', fontFamily: 'Poppins', fontWeight: 500 }}>Basic Details&lt;\/Text>\n                                    &lt;\/View>\n                                &lt;\/View>\n\n                                &lt;View style={styles.container}>\n                                    &lt;View style={styles.headingP}>\n                                        &lt;View style={styles.dot1} \/>\n                                        &lt;View style={{ flexDirection: 'column' }}>\n                                            &lt;Text style={styles.label}>Population&lt;\/Text>\n                                        &lt;\/View>\n                                    &lt;\/View>\n                                    {basicData?.population_2011 &amp;&amp; basicData?.population_2011 != 0 &amp;&amp; &lt;Text style={styles.value}>{basicData?.population_2011}&lt;\/Text>}\n                                    {basicData?.population_2011 == 0 &amp;&amp; &lt;Text style={styles.value}> - &lt;\/Text>}\n\n                                &lt;\/View>\n\n                                &lt;View style={styles.container}>\n                                    &lt;View style={styles.headingP}>\n                                        &lt;View style={styles.dot1} \/>\n                                        &lt;Text style={styles.label}>Population {basicData?.latest_population_year &amp;&amp; &lt;Text>{basicData?.latest_population_year}&lt;\/Text>}&lt;\/Text>\n                                    &lt;\/View>\n                                    {basicData?.latest_population &amp;&amp; basicData?.latest_population != 0 &amp;&amp; &lt;Text style={styles.value}>{basicData?.latest_population}&lt;\/Text>}\n                                    {basicData?.latest_population == 0 &amp;&amp; &lt;Text style={styles.value}> - &lt;\/Text>}\n                                &lt;\/View>\n\n                                &lt;View style={styles.container}>\n                                    &lt;View style={styles.headingP}>\n                                        &lt;View style={styles.dot1} \/>\n                                        &lt;Text style={styles.label}>District&lt;\/Text>\n                                    &lt;\/View>\n                                    &lt;Text style={styles.value}>{basicData?.actor_name}&lt;\/Text>\n                                &lt;\/View>\n\n                                &lt;View style={styles.container}>\n                                    &lt;View style={styles.headingP}>\n                                        &lt;View style={styles.dot1} \/>\n                                        &lt;Text style={styles.label}>No. of Wards&lt;\/Text>\n                                    &lt;\/View>\n                                    {basicData?.no_of_wards != 'NULL' &amp;&amp; &lt;Text style={styles.value}>{basicData?.no_of_wards}&lt;\/Text>}\n                                    {basicData?.no_of_wards == 'NULL' &amp;&amp; &lt;Text style={styles.value}>-&lt;\/Text>}\n                                &lt;\/View>\n                            &lt;\/View>\n                            {\/**********************SECTION 2*****\/}\n                            &lt;View style={styles.sectionBox}>\n                                &lt;Text style={{ position: 'absolute', top: -5, left: 80, borderRadius: 5, borderColor: '#FF4E8E', backgroundColor: '#FF4E8E', borderWidth: 2, width: 100, height: 2, margin: '0 auto' }}>&lt;\/Text>\n                                &lt;View style={styles.headingPp}>\n                                    &lt;Image style={styles.tableBottomIcon} src={i_2} \/>\n                                    &lt;View style={{ flexDirection: 'column' }}>\n                                        &lt;Text style={{ fontSize: 14, color: '#000', fontFamily: 'Poppins', fontWeight: 500 }}>Authority&lt;\/Text>\n                                    &lt;\/View>\n                                &lt;\/View>\n\n                                &lt;View style={styles.container}>\n                                    &lt;View style={styles.headingP}>\n                                        &lt;View style={styles.dot2} \/>\n                                        &lt;Text style={styles.label}>Name&lt;\/Text>\n                                    &lt;\/View>\n                                    &lt;Text style={styles.value}>{capitalizeText(basicData?.admin_officer_name)}&lt;\/Text>\n                                &lt;\/View>\n\n                                &lt;View style={styles.container}>\n                                    &lt;View style={styles.headingP}>\n                                        &lt;View style={styles.dot2} \/>\n                                        &lt;Text style={styles.label}>Designation&lt;\/Text>\n                                    &lt;\/View>\n                                    &lt;Text style={styles.value}>{capitalizeText(basicData?.admin_officer_designation)}&lt;\/Text>\n                                &lt;\/View>\n                            &lt;\/View>\n                        &lt;\/View>\n                        &lt;View style={{ display: 'flex', flexDirection: \"row\", justifyContent: 'space-between' }}>\n                            {\/**********************SECTION 3*****\/}\n                            &lt;View style={styles.sectionBox}>\n                                &lt;Text style={{ position: 'absolute', top: -5, left: 80, borderRadius: 5, borderColor: '#5DBBFF', backgroundColor: '#5DBBFF', borderWidth: 2, width: 100, height: 2, margin: '0 auto' }}>&lt;\/Text>\n                                &lt;View style={styles.headingPp}>\n                                    &lt;Image style={styles.tableBottomIcon} src={i_3} \/>\n                                    &lt;View style={{ flexDirection: 'column' }}>\n                                        &lt;Text style={{ fontSize: 14, color: '#000', fontFamily: 'Poppins', fontWeight: 500 }}>Nodal Officer&lt;\/Text>\n                                    &lt;\/View>\n                                &lt;\/View>\n\n                                &lt;View style={styles.container}>\n                                    &lt;View style={styles.headingP}>\n                                        &lt;View style={styles.dot3} \/>\n                                        &lt;Text style={styles.label}>Name&lt;\/Text>\n                                    &lt;\/View>\n                                    &lt;Text style={styles.value}>{capitalizeText(basicData?.nodal_officer_name)}&lt;\/Text>\n                                &lt;\/View>\n\n                                &lt;View style={styles.container}>\n                                    &lt;View style={styles.headingP}>\n                                        &lt;View style={styles.dot3} \/>\n                                        &lt;Text style={styles.label}>Designation&lt;\/Text>\n                                    &lt;\/View>\n                                    &lt;Text style={styles.value}>{capitalizeText(basicData?.nodal_officer_designation)}&lt;\/Text>\n                                &lt;\/View>\n                            &lt;\/View>\n                            {\/**********************SECTION 4*****\/}\n                            &lt;View style={styles.sectionBox}>\n                                &lt;Text style={{ position: 'absolute', top: -5, left: 80, borderRadius: 5, borderColor: '#5FED52', backgroundColor: '#5FED52', borderWidth: 2, width: 100, height: 2, margin: '0 auto' }}>&lt;\/Text>\n                                &lt;View style={styles.headingPp}>\n                                    &lt;Image style={styles.tableBottomIcon} src={i_4} \/>\n                                    &lt;View style={{ flexDirection: 'column' }}>\n                                        &lt;Text style={{ fontSize: 14, color: '#000', fontFamily: 'Poppins', fontWeight: 500 }}>Representative&lt;\/Text>\n                                    &lt;\/View>\n                                &lt;\/View>\n\n                                &lt;View style={styles.container}>\n                                    &lt;View style={styles.headingP}>\n                                        &lt;View style={styles.dot4} \/>\n                                        &lt;Text style={styles.label}>Name&lt;\/Text>\n                                    &lt;\/View>\n                                    &lt;Text style={styles.value}>{capitalizeText(basicData?.public_rep_name)}&lt;\/Text>\n                                &lt;\/View>\n\n                                &lt;View style={styles.container}>\n                                    &lt;View style={styles.headingP}>\n                                        &lt;View style={styles.dot4} \/>\n                                        &lt;Text style={styles.label}>Designation&lt;\/Text>\n                                    &lt;\/View>\n                                    &lt;Text style={styles.value}>{capitalizeText(basicData?.public_rep_designation)}&lt;\/Text>\n                                &lt;\/View>\n                            &lt;\/View>\n                            {\/***************all section end***************\/}\n                        &lt;\/View>\n                    &lt;\/View>\n                    &lt;Footer \/>\n                &lt;\/Page>\n                {\/*************Political page****************\/}\n                &lt;Page size=\"A4\" style={styles.page}>\n                    &lt;View style={styles.sectionContainer}>\n                        &lt;Header structure={'Structure'} \/>\n                        {pData &amp;&amp; pData.map((items, index) => (\n                            &lt;View>\n                                &lt;View style={styles.headingP} wrap={false}>\n                                    &lt;Text style={{ borderTopLeftRadius: 3, borderBottomLeftRadius: 3, width: 5, backgroundColor: '#26D8FF', }}>&lt;\/Text>\n                                    &lt;Text style={styles.tile}>{items.heading}&lt;\/Text>\n                                &lt;\/View>\n\n                                {items &amp;&amp; items&#91;'qa'] &amp;&amp; items&#91;'qa'].map((item) => (\n                                    &lt;View style={styles.mBox} wrap={false}>\n                                        &lt;View style={styles.content}>\n                                            &lt;Image style={styles.contentImg} src={item.prefixIcon} \/>\n                                            &lt;Text style={styles.contentM}>{item.q} {item.a ? &lt;Text style={{ paddingLeft: 3, color: '#0062BA', display: 'flex', gap: 1 }}>{item?.place == 'pre' &amp;&amp; item.valueIcon == '\\u20b9' &amp;&amp; &lt;Text>{item.a}&lt;\/Text>} {item?.place == 'pre' &amp;&amp; item.valueIcon != '\\u20b9' &amp;&amp; &lt;Text>{item.valueIcon + item.a}&lt;\/Text>}{item.place == 'post' &amp;&amp; item.valueIcon &amp;&amp; item.valueIcon == '%' &amp;&amp; &lt;Text>{item.a + item.valueIcon}&lt;\/Text>}{item?.place == 'post' &amp;&amp; item.valueIcon &amp;&amp; item.valueIcon != '%' &amp;&amp; &lt;Text>{item.a}&amp;nbsp;{item.valueIcon}&lt;\/Text>} {(!item.valueIcon || item.valueIcon == '') &amp;&amp; &lt;Text>{item.a}&lt;\/Text>}&lt;\/Text> : ''}&lt;\/Text>\n                                        &lt;\/View>\n\n                                        {\n                                            item.type != 'default' &amp;&amp; item.type !== 'multiSelectionList' &amp;&amp; item.options &amp;&amp;\n                                            &lt;View style={styles.content}>\n                                                &lt;View style={{ paddingLeft: 20, color: '#000', fontWeight: 500, flexDirection: 'column', gap: 1, fontSize: 11, fontFamily: 'Poppins', fontStyle: 'italic' }}>\n                                                    {item.options.map((nexted) => (\n                                                        &lt;Text style={{ paddingLeft: 10, color: '#000', display: 'flex', gap: 1, fontFamily: 'Poppins', fontStyle: 'italic' }}>{nexted.label}  {nexted?.place == 'pre' &amp;&amp; nexted.value &amp;&amp; &lt;Text style={{ color: '#0062BA', fontFamily: 'Poppins', fontStyle: 'italic' }}>{nexted.valueIcon != '\\u20b9' &amp;&amp; nexted.valueIcon}&lt;\/Text>}{nexted.type == 'url' &amp;&amp; nexted.value &amp;&amp; &lt;Text style={{ textDecoration: 'underline', color: '#0062BA', fontFamily: 'Poppins', fontStyle: 'italic' }} >{nexted.value}&lt;\/Text>}{(!nexted.type || nexted.type != 'url') &amp;&amp; nexted.value &amp;&amp; &lt;Text style={{ color: '#0062BA', fontFamily: 'Poppins', fontStyle: 'italic' }}>{nexted.value}&lt;\/Text>}{nexted?.place == 'post' &amp;&amp; nexted.value &amp;&amp; &lt;Text style={{ color: '#0062BA' }}>{nexted.valueIcon &amp;&amp; nexted.valueIcon != '%' &amp;&amp; &lt;Text>&amp;nbsp;&lt;\/Text>}{nexted.valueIcon}&lt;\/Text>}&lt;\/Text>\n                                                    ))}\n                                                &lt;\/View>\n                                            &lt;\/View>\n                                        }\n\n                                        {item.type == 'multiSelectionList' &amp;&amp; item.options &amp;&amp;\n                                            &lt;View style={styles.content}>\n                                                &lt;View style={{ paddingLeft: 15, color: '#17CD1F', flexDirection: 'column', gap: 1, fontSize: 11, fontFamily: 'Poppins', fontStyle: 'italic' }}>\n                                                    {item.options.map((nexted) => (\n                                                        &lt;Text style={{ paddingLeft: 5, color: '#000', display: 'flex', gap: 1, fontFamily: 'Poppins', fontStyle: 'italic' }}> &lt;Text style={{ color: '#0062BA', fontFamily: 'Poppins', fontStyle: 'italic', fontWeight: 500 }}>{nexted}&lt;\/Text>&lt;\/Text>\n                                                    ))}\n                                                &lt;\/View>\n                                            &lt;\/View>\n                                        }\n                                    &lt;\/View>\n\n                                ))}\n                            &lt;\/View>\n                        ))}\n                    &lt;\/View>\n                    &lt;Footer \/>\n\n                &lt;\/Page>\n                {\/*************End of political page****************\/}\n\n            &lt;\/Document>}\n    &lt;\/>);\n};\nexport default Pdf;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Output\"><\/span><strong>Output<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<figure class=\"wp-block-image\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1600\" height=\"900\" src=\"https:\/\/www.hashstudioz.com\/blog\/wp-content\/uploads\/2024\/10\/image-9.png\" alt=\"\" class=\"wp-image-10622\" srcset=\"https:\/\/www.hashstudioz.com\/blog\/wp-content\/uploads\/2024\/10\/image-9.png 1600w, https:\/\/www.hashstudioz.com\/blog\/wp-content\/uploads\/2024\/10\/image-9-300x169.png 300w, https:\/\/www.hashstudioz.com\/blog\/wp-content\/uploads\/2024\/10\/image-9-1060x596.png 1060w, https:\/\/www.hashstudioz.com\/blog\/wp-content\/uploads\/2024\/10\/image-9-768x432.png 768w, https:\/\/www.hashstudioz.com\/blog\/wp-content\/uploads\/2024\/10\/image-9-1536x864.png 1536w, https:\/\/www.hashstudioz.com\/blog\/wp-content\/uploads\/2024\/10\/image-9-1280x720.png 1280w, https:\/\/www.hashstudioz.com\/blog\/wp-content\/uploads\/2024\/10\/image-9-1024x576.png 1024w, https:\/\/www.hashstudioz.com\/blog\/wp-content\/uploads\/2024\/10\/image-9-1320x743.png 1320w, https:\/\/www.hashstudioz.com\/blog\/wp-content\/uploads\/2024\/10\/image-9-24x14.png 24w, https:\/\/www.hashstudioz.com\/blog\/wp-content\/uploads\/2024\/10\/image-9-36x20.png 36w, https:\/\/www.hashstudioz.com\/blog\/wp-content\/uploads\/2024\/10\/image-9-48x27.png 48w, https:\/\/www.hashstudioz.com\/blog\/wp-content\/uploads\/2024\/10\/image-9-600x338.png 600w, https:\/\/www.hashstudioz.com\/blog\/wp-content\/uploads\/2024\/10\/image-9-150x84.png 150w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"900\" src=\"https:\/\/www.hashstudioz.com\/blog\/wp-content\/uploads\/2024\/10\/image-7.png\" alt=\"\" class=\"wp-image-10620\" srcset=\"https:\/\/www.hashstudioz.com\/blog\/wp-content\/uploads\/2024\/10\/image-7.png 1600w, https:\/\/www.hashstudioz.com\/blog\/wp-content\/uploads\/2024\/10\/image-7-300x169.png 300w, https:\/\/www.hashstudioz.com\/blog\/wp-content\/uploads\/2024\/10\/image-7-1060x596.png 1060w, https:\/\/www.hashstudioz.com\/blog\/wp-content\/uploads\/2024\/10\/image-7-768x432.png 768w, https:\/\/www.hashstudioz.com\/blog\/wp-content\/uploads\/2024\/10\/image-7-1536x864.png 1536w, https:\/\/www.hashstudioz.com\/blog\/wp-content\/uploads\/2024\/10\/image-7-1280x720.png 1280w, https:\/\/www.hashstudioz.com\/blog\/wp-content\/uploads\/2024\/10\/image-7-1024x576.png 1024w, https:\/\/www.hashstudioz.com\/blog\/wp-content\/uploads\/2024\/10\/image-7-1320x743.png 1320w, https:\/\/www.hashstudioz.com\/blog\/wp-content\/uploads\/2024\/10\/image-7-24x14.png 24w, https:\/\/www.hashstudioz.com\/blog\/wp-content\/uploads\/2024\/10\/image-7-36x20.png 36w, https:\/\/www.hashstudioz.com\/blog\/wp-content\/uploads\/2024\/10\/image-7-48x27.png 48w, https:\/\/www.hashstudioz.com\/blog\/wp-content\/uploads\/2024\/10\/image-7-600x338.png 600w, https:\/\/www.hashstudioz.com\/blog\/wp-content\/uploads\/2024\/10\/image-7-150x84.png 150w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"900\" src=\"https:\/\/www.hashstudioz.com\/blog\/wp-content\/uploads\/2024\/10\/image-8.png\" alt=\"\" class=\"wp-image-10621\" srcset=\"https:\/\/www.hashstudioz.com\/blog\/wp-content\/uploads\/2024\/10\/image-8.png 1600w, https:\/\/www.hashstudioz.com\/blog\/wp-content\/uploads\/2024\/10\/image-8-300x169.png 300w, https:\/\/www.hashstudioz.com\/blog\/wp-content\/uploads\/2024\/10\/image-8-1060x596.png 1060w, https:\/\/www.hashstudioz.com\/blog\/wp-content\/uploads\/2024\/10\/image-8-768x432.png 768w, https:\/\/www.hashstudioz.com\/blog\/wp-content\/uploads\/2024\/10\/image-8-1536x864.png 1536w, https:\/\/www.hashstudioz.com\/blog\/wp-content\/uploads\/2024\/10\/image-8-1280x720.png 1280w, https:\/\/www.hashstudioz.com\/blog\/wp-content\/uploads\/2024\/10\/image-8-1024x576.png 1024w, https:\/\/www.hashstudioz.com\/blog\/wp-content\/uploads\/2024\/10\/image-8-1320x743.png 1320w, https:\/\/www.hashstudioz.com\/blog\/wp-content\/uploads\/2024\/10\/image-8-24x14.png 24w, https:\/\/www.hashstudioz.com\/blog\/wp-content\/uploads\/2024\/10\/image-8-36x20.png 36w, https:\/\/www.hashstudioz.com\/blog\/wp-content\/uploads\/2024\/10\/image-8-48x27.png 48w, https:\/\/www.hashstudioz.com\/blog\/wp-content\/uploads\/2024\/10\/image-8-600x338.png 600w, https:\/\/www.hashstudioz.com\/blog\/wp-content\/uploads\/2024\/10\/image-8-150x84.png 150w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Cloud_Solutions_by_HashStudioz_Scalable_PDF_Generation_for_Dynamic_Content\"><\/span>Cloud Solutions by HashStudioz: Scalable PDF Generation for Dynamic Content<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>At HashStudioz, our <a href=\"https:\/\/www.hashstudioz.com\/cloud-application-development-services.html\">Cloud Solutions<\/a> offer robust cloud-based PDF generation services designed to meet the needs of businesses seeking scalable and efficient document creation. Our service is particularly beneficial for applications built with dynamic content, ensuring that users can generate, store, and retrieve documents seamlessly.<\/p>\n\n\n\n<p><strong>Key Features of Our Cloud PDF Generation Services:<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Scalability: <\/strong>Our cloud infrastructure is built to scale with your business requirements. Whether you need to generate a few PDFs or thousands, <a href=\"https:\/\/www.hashstudioz.com\/\">HashStudioz<\/a> ensures consistent performance under varying demands.<\/li>\n\n\n\n<li><strong>Efficient Document Creation:<\/strong> Leveraging cloud computing resources allows for rapid and efficient PDF generation. Users can create documents on-demand, pulling real-time data from your ReactJS application for accurate and up-to-date results.<\/li>\n\n\n\n<li><strong>Secure Storage:<\/strong> Generated PDFs are stored securely in the cloud, providing easy access and retrieval from anywhere. This eliminates the limitations of local storage while ensuring document security.<\/li>\n\n\n\n<li><strong>Collaborative Access:<\/strong> Our solutions facilitate collaborative efforts, enabling teams to share and access documents easily, streamlining workflows across the organization.<\/li>\n\n\n\n<li><strong>Integration with Existing Systems:<\/strong> HashStudioz ensures seamless integration of our cloud PDF generation services with your current applications and workflows, enhancing functionality without a complete system overhaul.<\/li>\n\n\n\n<li><strong>Automatic Updates:<\/strong> As your application evolves, our cloud solutions allow for quick updates to PDF templates and generation logic, keeping your documents aligned with the latest changes.<\/li>\n\n\n\n<li><strong>Cost Efficiency:<\/strong> Utilizing our cloud infrastructure can lead to significant cost savings by reducing the need for extensive on-premises hardware and maintenance. You pay only for the resources you use, providing a flexible and budget-friendly solution.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span><strong>Conclusion<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Generating PDFs for dynamic content in ReactJS is not only feasible but also essential for enhancing user experience and engagement. By leveraging powerful libraries like jsPDF and React-PDF, developers can seamlessly transform their applications to meet the growing demand for downloadable content. As businesses continue to prioritize user-friendly features, mastering PDF generation can provide a competitive edge. Don&#8217;t let your application fall behind\u2014embrace the power of PDFs and watch your user satisfaction soar!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Did you know that nearly 90% of businesses report a significant increase in customer satisfaction when they provide downloadable content in a convenient PDF format? Generate PDFs in ReactJS has never been easier, thanks to the react-pdf library, which allows developers to seamlessly create dynamic and customizable PDF documents directly within their React applications. To [&hellip;]<\/p>\n","protected":false},"author":32,"featured_media":10619,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","footnotes":""},"categories":[129,395],"tags":[],"class_list":["post-10618","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-software-development","category-technology"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Generate PDFs in ReactJS for Dynamic Content<\/title>\n<meta name=\"description\" content=\"Learn how to generate PDFs for dynamic content in ReactJS using the best tools and libraries to streamline your development process.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hashstudioz.com\/blog\/how-to-generate-pdfs-for-dynamic-content-in-reactjs\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Generate PDFs in ReactJS for Dynamic Content\" \/>\n<meta property=\"og:description\" content=\"Learn how to generate PDFs for dynamic content in ReactJS using the best tools and libraries to streamline your development process.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hashstudioz.com\/blog\/how-to-generate-pdfs-for-dynamic-content-in-reactjs\/\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hashstudioz\/\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/hashstudioz\" \/>\n<meta property=\"article:published_time\" content=\"2024-10-24T10:21:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-04T11:15:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.hashstudioz.com\/blog\/wp-content\/uploads\/2024\/10\/How-to-Generate-PDFs-for-Dynamic-Content-in-ReactJS.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Hansa Kumari\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/hashstudioz\" \/>\n<meta name=\"twitter:site\" content=\"@hashstudioz\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Hansa Kumari\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hashstudioz.com\\\/blog\\\/how-to-generate-pdfs-for-dynamic-content-in-reactjs\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hashstudioz.com\\\/blog\\\/how-to-generate-pdfs-for-dynamic-content-in-reactjs\\\/\"},\"author\":{\"name\":\"Hansa Kumari\",\"@id\":\"https:\\\/\\\/www.hashstudioz.com\\\/blog\\\/#\\\/schema\\\/person\\\/aacb7c7aa78e0f5d293a8f0fd7db7396\"},\"headline\":\"How to Generate PDFs for Dynamic Content in ReactJS\",\"datePublished\":\"2024-10-24T10:21:40+00:00\",\"dateModified\":\"2025-09-04T11:15:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hashstudioz.com\\\/blog\\\/how-to-generate-pdfs-for-dynamic-content-in-reactjs\\\/\"},\"wordCount\":987,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hashstudioz.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hashstudioz.com\\\/blog\\\/how-to-generate-pdfs-for-dynamic-content-in-reactjs\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.hashstudioz.com\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/10\\\/How-to-Generate-PDFs-for-Dynamic-Content-in-ReactJS.png\",\"articleSection\":[\"Software Development\",\"Technology\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hashstudioz.com\\\/blog\\\/how-to-generate-pdfs-for-dynamic-content-in-reactjs\\\/\",\"url\":\"https:\\\/\\\/www.hashstudioz.com\\\/blog\\\/how-to-generate-pdfs-for-dynamic-content-in-reactjs\\\/\",\"name\":\"Generate PDFs in ReactJS for Dynamic Content\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hashstudioz.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hashstudioz.com\\\/blog\\\/how-to-generate-pdfs-for-dynamic-content-in-reactjs\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hashstudioz.com\\\/blog\\\/how-to-generate-pdfs-for-dynamic-content-in-reactjs\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.hashstudioz.com\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/10\\\/How-to-Generate-PDFs-for-Dynamic-Content-in-ReactJS.png\",\"datePublished\":\"2024-10-24T10:21:40+00:00\",\"dateModified\":\"2025-09-04T11:15:55+00:00\",\"description\":\"Learn how to generate PDFs for dynamic content in ReactJS using the best tools and libraries to streamline your development process.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hashstudioz.com\\\/blog\\\/how-to-generate-pdfs-for-dynamic-content-in-reactjs\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hashstudioz.com\\\/blog\\\/how-to-generate-pdfs-for-dynamic-content-in-reactjs\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hashstudioz.com\\\/blog\\\/how-to-generate-pdfs-for-dynamic-content-in-reactjs\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.hashstudioz.com\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/10\\\/How-to-Generate-PDFs-for-Dynamic-Content-in-ReactJS.png\",\"contentUrl\":\"https:\\\/\\\/www.hashstudioz.com\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/10\\\/How-to-Generate-PDFs-for-Dynamic-Content-in-ReactJS.png\",\"width\":1200,\"height\":630,\"caption\":\"How to Generate PDFs for Dynamic Content in ReactJS\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hashstudioz.com\\\/blog\\\/how-to-generate-pdfs-for-dynamic-content-in-reactjs\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hashstudioz.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Generate PDFs for Dynamic Content in ReactJS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hashstudioz.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hashstudioz.com\\\/blog\\\/\",\"name\":\"HashStudioz Technologies\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hashstudioz.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hashstudioz.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hashstudioz.com\\\/blog\\\/#organization\",\"name\":\"HashStudioz Technologies\",\"url\":\"https:\\\/\\\/www.hashstudioz.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hashstudioz.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hashstudioz.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/02\\\/logo-1.png\",\"contentUrl\":\"https:\\\/\\\/www.hashstudioz.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/02\\\/logo-1.png\",\"width\":1709,\"height\":365,\"caption\":\"HashStudioz Technologies\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hashstudioz.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hashstudioz\\\/\",\"https:\\\/\\\/x.com\\\/hashstudioz\",\"https:\\\/\\\/www.instagram.com\\\/hashstudioz\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/hashstudioz\",\"https:\\\/\\\/in.pinterest.com\\\/hashstudioz\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hashstudioz.com\\\/blog\\\/#\\\/schema\\\/person\\\/aacb7c7aa78e0f5d293a8f0fd7db7396\",\"name\":\"Hansa Kumari\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/ffbbd57dca579cbeff75d782cb30e7ba713a47cc78d9bdc7a9e05ec775c4123f?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/ffbbd57dca579cbeff75d782cb30e7ba713a47cc78d9bdc7a9e05ec775c4123f?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/ffbbd57dca579cbeff75d782cb30e7ba713a47cc78d9bdc7a9e05ec775c4123f?s=96&r=g\",\"caption\":\"Hansa Kumari\"},\"description\":\"Hansa Kumari is a skilled Technical Lead at HashStudioz Technologies, where she leverages her expertise in software development to lead innovative engineering projects. With a strong focus on collaboration and problem-solving, she is dedicated to driving her team's success and delivering high-quality solutions. Hansa is passionate about technology and continuously seeks to enhance her knowledge and skills to contribute effectively to the ever-evolving tech landscape.\",\"sameAs\":[\"https:\\\/\\\/www.hashstudioz.com\",\"https:\\\/\\\/www.facebook.com\\\/hashstudioz\",\"https:\\\/\\\/www.instagram.com\\\/hashstudioz\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/hashstudioz\",\"https:\\\/\\\/x.com\\\/https:\\\/\\\/twitter.com\\\/hashstudioz\"],\"url\":\"https:\\\/\\\/www.hashstudioz.com\\\/blog\\\/author\\\/hansa-kumari\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Generate PDFs in ReactJS for Dynamic Content","description":"Learn how to generate PDFs for dynamic content in ReactJS using the best tools and libraries to streamline your development process.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hashstudioz.com\/blog\/how-to-generate-pdfs-for-dynamic-content-in-reactjs\/","og_locale":"en_US","og_type":"article","og_title":"Generate PDFs in ReactJS for Dynamic Content","og_description":"Learn how to generate PDFs for dynamic content in ReactJS using the best tools and libraries to streamline your development process.","og_url":"https:\/\/www.hashstudioz.com\/blog\/how-to-generate-pdfs-for-dynamic-content-in-reactjs\/","article_publisher":"https:\/\/www.facebook.com\/hashstudioz\/","article_author":"https:\/\/www.facebook.com\/hashstudioz","article_published_time":"2024-10-24T10:21:40+00:00","article_modified_time":"2025-09-04T11:15:55+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/www.hashstudioz.com\/blog\/wp-content\/uploads\/2024\/10\/How-to-Generate-PDFs-for-Dynamic-Content-in-ReactJS.png","type":"image\/png"}],"author":"Hansa Kumari","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/hashstudioz","twitter_site":"@hashstudioz","twitter_misc":{"Written by":"Hansa Kumari","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hashstudioz.com\/blog\/how-to-generate-pdfs-for-dynamic-content-in-reactjs\/#article","isPartOf":{"@id":"https:\/\/www.hashstudioz.com\/blog\/how-to-generate-pdfs-for-dynamic-content-in-reactjs\/"},"author":{"name":"Hansa Kumari","@id":"https:\/\/www.hashstudioz.com\/blog\/#\/schema\/person\/aacb7c7aa78e0f5d293a8f0fd7db7396"},"headline":"How to Generate PDFs for Dynamic Content in ReactJS","datePublished":"2024-10-24T10:21:40+00:00","dateModified":"2025-09-04T11:15:55+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hashstudioz.com\/blog\/how-to-generate-pdfs-for-dynamic-content-in-reactjs\/"},"wordCount":987,"publisher":{"@id":"https:\/\/www.hashstudioz.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hashstudioz.com\/blog\/how-to-generate-pdfs-for-dynamic-content-in-reactjs\/#primaryimage"},"thumbnailUrl":"https:\/\/www.hashstudioz.com\/blog\/wp-content\/uploads\/2024\/10\/How-to-Generate-PDFs-for-Dynamic-Content-in-ReactJS.png","articleSection":["Software Development","Technology"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.hashstudioz.com\/blog\/how-to-generate-pdfs-for-dynamic-content-in-reactjs\/","url":"https:\/\/www.hashstudioz.com\/blog\/how-to-generate-pdfs-for-dynamic-content-in-reactjs\/","name":"Generate PDFs in ReactJS for Dynamic Content","isPartOf":{"@id":"https:\/\/www.hashstudioz.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hashstudioz.com\/blog\/how-to-generate-pdfs-for-dynamic-content-in-reactjs\/#primaryimage"},"image":{"@id":"https:\/\/www.hashstudioz.com\/blog\/how-to-generate-pdfs-for-dynamic-content-in-reactjs\/#primaryimage"},"thumbnailUrl":"https:\/\/www.hashstudioz.com\/blog\/wp-content\/uploads\/2024\/10\/How-to-Generate-PDFs-for-Dynamic-Content-in-ReactJS.png","datePublished":"2024-10-24T10:21:40+00:00","dateModified":"2025-09-04T11:15:55+00:00","description":"Learn how to generate PDFs for dynamic content in ReactJS using the best tools and libraries to streamline your development process.","breadcrumb":{"@id":"https:\/\/www.hashstudioz.com\/blog\/how-to-generate-pdfs-for-dynamic-content-in-reactjs\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hashstudioz.com\/blog\/how-to-generate-pdfs-for-dynamic-content-in-reactjs\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hashstudioz.com\/blog\/how-to-generate-pdfs-for-dynamic-content-in-reactjs\/#primaryimage","url":"https:\/\/www.hashstudioz.com\/blog\/wp-content\/uploads\/2024\/10\/How-to-Generate-PDFs-for-Dynamic-Content-in-ReactJS.png","contentUrl":"https:\/\/www.hashstudioz.com\/blog\/wp-content\/uploads\/2024\/10\/How-to-Generate-PDFs-for-Dynamic-Content-in-ReactJS.png","width":1200,"height":630,"caption":"How to Generate PDFs for Dynamic Content in ReactJS"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hashstudioz.com\/blog\/how-to-generate-pdfs-for-dynamic-content-in-reactjs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hashstudioz.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Generate PDFs for Dynamic Content in ReactJS"}]},{"@type":"WebSite","@id":"https:\/\/www.hashstudioz.com\/blog\/#website","url":"https:\/\/www.hashstudioz.com\/blog\/","name":"HashStudioz Technologies","description":"","publisher":{"@id":"https:\/\/www.hashstudioz.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hashstudioz.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hashstudioz.com\/blog\/#organization","name":"HashStudioz Technologies","url":"https:\/\/www.hashstudioz.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hashstudioz.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hashstudioz.com\/blog\/wp-content\/uploads\/2020\/02\/logo-1.png","contentUrl":"https:\/\/www.hashstudioz.com\/blog\/wp-content\/uploads\/2020\/02\/logo-1.png","width":1709,"height":365,"caption":"HashStudioz Technologies"},"image":{"@id":"https:\/\/www.hashstudioz.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hashstudioz\/","https:\/\/x.com\/hashstudioz","https:\/\/www.instagram.com\/hashstudioz\/","https:\/\/www.linkedin.com\/company\/hashstudioz","https:\/\/in.pinterest.com\/hashstudioz\/"]},{"@type":"Person","@id":"https:\/\/www.hashstudioz.com\/blog\/#\/schema\/person\/aacb7c7aa78e0f5d293a8f0fd7db7396","name":"Hansa Kumari","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/ffbbd57dca579cbeff75d782cb30e7ba713a47cc78d9bdc7a9e05ec775c4123f?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/ffbbd57dca579cbeff75d782cb30e7ba713a47cc78d9bdc7a9e05ec775c4123f?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ffbbd57dca579cbeff75d782cb30e7ba713a47cc78d9bdc7a9e05ec775c4123f?s=96&r=g","caption":"Hansa Kumari"},"description":"Hansa Kumari is a skilled Technical Lead at HashStudioz Technologies, where she leverages her expertise in software development to lead innovative engineering projects. With a strong focus on collaboration and problem-solving, she is dedicated to driving her team's success and delivering high-quality solutions. Hansa is passionate about technology and continuously seeks to enhance her knowledge and skills to contribute effectively to the ever-evolving tech landscape.","sameAs":["https:\/\/www.hashstudioz.com","https:\/\/www.facebook.com\/hashstudioz","https:\/\/www.instagram.com\/hashstudioz\/","https:\/\/www.linkedin.com\/company\/hashstudioz","https:\/\/x.com\/https:\/\/twitter.com\/hashstudioz"],"url":"https:\/\/www.hashstudioz.com\/blog\/author\/hansa-kumari\/"}]}},"_links":{"self":[{"href":"https:\/\/www.hashstudioz.com\/blog\/wp-json\/wp\/v2\/posts\/10618","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hashstudioz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hashstudioz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hashstudioz.com\/blog\/wp-json\/wp\/v2\/users\/32"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hashstudioz.com\/blog\/wp-json\/wp\/v2\/comments?post=10618"}],"version-history":[{"count":8,"href":"https:\/\/www.hashstudioz.com\/blog\/wp-json\/wp\/v2\/posts\/10618\/revisions"}],"predecessor-version":[{"id":18738,"href":"https:\/\/www.hashstudioz.com\/blog\/wp-json\/wp\/v2\/posts\/10618\/revisions\/18738"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hashstudioz.com\/blog\/wp-json\/wp\/v2\/media\/10619"}],"wp:attachment":[{"href":"https:\/\/www.hashstudioz.com\/blog\/wp-json\/wp\/v2\/media?parent=10618"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hashstudioz.com\/blog\/wp-json\/wp\/v2\/categories?post=10618"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hashstudioz.com\/blog\/wp-json\/wp\/v2\/tags?post=10618"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}