-
Notifications
You must be signed in to change notification settings - Fork 61
/
ExampleAdvanced.tsx
54 lines (53 loc) · 1.58 KB
/
ExampleAdvanced.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
import React from "react";
import generatePDF, { Resolution, Margin, Options } from "react-to-pdf";
import { Card } from "./Card";
import { Button } from "./Button";
import { Container } from "./Container";
const options: Options = {
filename: "advanced-example.pdf",
// default is `save`
method: "save",
// default is Resolution.MEDIUM = 3, which should be enough, higher values
// increases the image quality but also the size of the PDF, so be careful
// using values higher than 10 when having multiple pages generated, it
// might cause the page to crash or hang.
resolution: Resolution.HIGH,
page: {
// margin is in MM, default is Margin.NONE = 0
margin: Margin.SMALL,
// default is 'A4'
format: "letter",
// default is 'portrait'
orientation: "landscape",
},
canvas: {
// default is 'image/jpeg' for better size performance
mimeType: "image/png",
qualityRatio: 1,
},
// customize any value passed to the jsPDF instance and html2canvas
// function
overrides: {
// see https://artskydj.github.io/jsPDF/docs/jsPDF.html for more options
pdf: {
compress: true,
},
// see https://html2canvas.hertzen.com/configuration for more options
canvas: {
useCORS: true,
},
},
};
export const ExampleAdvanced = () => {
const openPDF = () => {
generatePDF(() => document.getElementById("wrapper"), options);
};
return (
<Container>
<Button onClick={openPDF}>Download PDF</Button>
<div id="wrapper">
<Card imageId={17} title="Using advanced options" />
</div>
</Container>
);
};