A Simple Utility to render React JSX to PDF
$ npm i jsx-to-pdf
import { JsxToPdf } from "jsx-to-pdf";
function App() {
return (
<JsxToPdf>
{({ save, jsxRef, error, errorText }) => {
return (
<div className="App" ref={jsxRef}>
<button style={{ height: 50, margin: 20, backgroundColor: '#61dafb' }} onClick={save}>Download PDF for this Page</button>
</div>
)
}}
</JsxToPdf>
)
}
import { useJsxToPdf } from "jsx-to-pdf";
function App() {
const { jsxRef, convertToPdf } = useJsxToPdf()
return (
<div className="App" ref={jsxRef}>
<button style={{ height: 50, margin: 20, backgroundColor: '#61dafb' }} onClick={save}>Download PDF for this Page</button>
</div>
)
}
Name | Type | Default | Description |
---|---|---|---|
name | String | jsxToPdf |
Name of the PDF to be saved |
scale | Number | 1 | Scale of the HTMLNodeElement element |
x | Number | 0 | Offset x of the PDF |
y | Number | 0 | Offset y of the PDF |
width | Number | jsPDF document width |
Width of the HTMLNodeElement to be set in PDF |
height | Number | jsPDF document height |
Height of the HTMLNodeElement to be set in PDF |
{...rest} |
Object | {} |
JSPDF options |
Name | Type | Default | Description |
---|---|---|---|
save | Function | () => {} |
Trigger PDF Submit |
jsxRef | ref |
undefined | Reference to the HTMLNodeElement |
loading | Boolean | false | Loader for PDF save |
error | Boolean | false | Error |
errorText | String | () => {} |
Error Text |
Name | Type | Default | Description |
---|---|---|---|
convertToPDF | Function | () => {} |
Trigger PDF Submit |
jsxRef | ref |
undefined | Reference to the HTMLNodeElement |
loading | Boolean | false | Loader for PDF save |
error | Boolean | false | Error |
errorText | String | () => {} |
Error Text |
- @pritishvaidya The main author.
Feel free to contact me or create an issue