react-base64-to-pdf
A React component library for displaying, previewing, and downloading Base64-encoded PDF files. Easily integrate PDF viewing capabilities into your React applications.
Installation
You can install the package using npm:
npm install react-base64-to-pdf
Usage
Here’s a quick example of how to use the react-base64-to-pdf
library in your React application.
Basic Example
import React, { useEffect, useState } from "react";
import { PDFInfo, PDFPreview, PDFDownloadButton } from 'react-base64-to-pdf';
const App = () => {
const base64Pdf = 'JVBERi0xLjUKJYCBgoMKMSA.....'; // Your Base64-encoded PDF string
return (
<div>
<h1>PDF Viewer Example</h1>
{/* Show PDF Information */}
<PDFInfo base64={base64Pdf} />
{/* Download PDF Button */}
<PDFDownloadButton
base64={base64Pdf}
downloadFileName="your-file.pdf"
style={{
backgroundColor: 'blue',
color: 'white',
padding: '10px 20px',
borderRadius: '5px',
textDecoration: 'none'
}}
/>
</div>
);
};
export default App;
Components
PDFInfo
Displays the information of the PDF file such as file size, PDF version, creation date, modification date, and creator tool.
Props
base64
(string): The Base64-encoded PDF string.showDownloadButton
(boolean): (Optional) Whether to display the download button. Default is false
.showPreview
(boolean): (Optional) Whether to show the PDF preview. Default is false
.
PDFPreview
Renders a preview of the PDF file.
Props
base64
(string): The Base64-encoded PDF string.
PDFDownloadButton
Provides a button to download the PDF file.
Props
base64
(string): The Base64-encoded PDF string.downloadFileName
(string): (Optional) The name of the downloaded file. Default is file.pdf
.style
(React.CSSProperties): (Optional) Custom styles for the button.className
(string): (Optional) Custom class names for additional styling.
License
This project is licensed under the MIT License. See the LICENSE file for details.
Contact
For any inquiries or feedback, feel free to reach out at 28priyanshu2001.