Skip to content

Commit 09dbb4c

Browse files
authored
docs: Added more information about available composables (#19)
1 parent d6abd9e commit 09dbb4c

File tree

3 files changed

+47
-1
lines changed

3 files changed

+47
-1
lines changed

docs/content/1.getting-started/3.quick-start.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,4 +37,4 @@ const pdfSection = ref<HTMLElement | null>(null)
3737
We offer two separate options parameters, that allow you to customize your pdf export.
3838

3939
- The `documentOptions`, allow you to customize the general layout of your document. You can find the options [here](http://raw.githack.com/MrRio/jsPDF/master/docs/jsPDF.html).
40-
- The `options`, allow you to customize the conversion of your HTML to a canvas. You can find the options [here](http://raw.githack.com/MrRio/jsPDF/master/docs/module-html.html#~html).
40+
- The `htmlOptions`, allow you to customize the conversion of your HTML to a canvas. You can find the options [here](http://raw.githack.com/MrRio/jsPDF/master/docs/module-html.html#~html).
Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
# Composables
2+
3+
`nuxt-pdf` exposes multiple composables, that you can access to easily create pdfs through vue code.
4+
5+
6+
## exportToPDF
7+
8+
Through this composable you can directly reference a HTML element, which will then be exported to a PDF.
9+
10+
```ts
11+
import { exportToPDF } from '#imports'
12+
13+
const pdfSection = ref<HTMLElement | null>(null)
14+
15+
const DOCUMENT_OPTIONS = {} // See all options: http://raw.githack.com/MrRio/jsPDF/master/docs/jsPDF.html
16+
const HTML_OPTIONS = {} // See all options: http://raw.githack.com/MrRio/jsPDF/master/docs/module-html.html#~html
17+
18+
await exportToPDF('FILE_NAME.pdf', pdfSection, DOCUMENT_OPTIONS, HTML_OPTIONS)
19+
```
20+
21+
## htmlToPdf
22+
23+
`htmlToPdf` allows you to pass an HTML string and format it into a PDF. This can allow you to futhur customize the behaviour of how the module interacts with your UI.
24+
25+
```ts
26+
import { htmlToPdf } from '#imports'
27+
28+
const openInWindow = async (HTMLElement: HTMLElement) => {
29+
const pdf = await htmlToPdf(HTMLElement,
30+
undefined,
31+
{
32+
html2canvas: {
33+
scale: 0.7,
34+
useCORS: true
35+
}
36+
})
37+
const totalPages = pdf.getNumberOfPages()
38+
const pdfHeight = pdf.getPageHeight()
39+
await pdf.html('<b>I am a custom pdf!!!</b>', {
40+
x: 20,
41+
y: (pdfHeight - 50) * totalPages // place in the bottom
42+
})
43+
const blob = pdf.output('blob')
44+
window.open(URL.createObjectURL(blob), '_blank')
45+
}
46+
```
File renamed without changes.

0 commit comments

Comments
 (0)