Skip to content

Instantly share code, notes, and snippets.

@wp126

wp126/Pdf Render on click React Js

Created September 27, 2024 06:09
Show Gist options
  • Save wp126/51eedbca7c1f54e38a096d3fbf202803 to your computer and use it in GitHub Desktop.
Save wp126/51eedbca7c1f54e38a096d3fbf202803 to your computer and use it in GitHub Desktop.
Download ZIP
Pdf Render on click React Js
Raw
Pdf Render on click React Js
import React, { useState } from 'react';
import { Document, Page, PDFViewer } from '@react-pdf/renderer';
import { Html } from 'react-pdf-html';
const MyDocument = () => {
const html = `
<div>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p>This is some introductory text.</p>
<h2>A List of Items:</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<h2>Table Example:</h2>
<table style="width: 100%; border-collapse: collapse;">
<thead>
<tr>
<th style="border: 1px solid #000; padding: 5px;">Header 1</th>
<th style="border: 1px solid #000; padding: 5px;">Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td style="border: 1px solid #000; padding: 5px;">Row 1, Cell 1</td>
<td style="border: 1px solid #000; padding: 5px;">Row 1, Cell 2</td>
</tr>
<tr>
<td style="border: 1px solid #000; padding: 5px;">Row 2, Cell 1</td>
<td style="border: 1px solid #000; padding: 5px;">Row 2, Cell 2</td>
</tr>
</tbody>
</table>
</div>
`;
return (
<Document>
<Page size="A4">
<Html>{html}</Html>
</Page>
</Document>
);
};
const PDFGenerator = () => {
const [showViewer, setShowViewer] = useState(false);
const handleViewPDF = () => {
setShowViewer(true);
};
return (
<div>
<button onClick={handleViewPDF}>View PDF</button>
{showViewer && (
<PDFViewer style={{ width: '100%', height: '600px', marginTop: '20px' }}>
<MyDocument />
</PDFViewer>
)}
</div>
);
};
export default PDFGenerator;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment