-
-
Notifications
You must be signed in to change notification settings - Fork 9
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs: Added more information about available composables (#19)
- Loading branch information
1 parent
d6abd9e
commit 09dbb4c
Showing
3 changed files
with
47 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,46 @@ | ||
# Composables | ||
|
||
`nuxt-pdf` exposes multiple composables, that you can access to easily create pdfs through vue code. | ||
|
||
|
||
## exportToPDF | ||
|
||
Through this composable you can directly reference a HTML element, which will then be exported to a PDF. | ||
|
||
```ts | ||
import { exportToPDF } from '#imports' | ||
|
||
const pdfSection = ref<HTMLElement | null>(null) | ||
|
||
const DOCUMENT_OPTIONS = {} // See all options: http://raw.githack.com/MrRio/jsPDF/master/docs/jsPDF.html | ||
const HTML_OPTIONS = {} // See all options: http://raw.githack.com/MrRio/jsPDF/master/docs/module-html.html#~html | ||
|
||
await exportToPDF('FILE_NAME.pdf', pdfSection, DOCUMENT_OPTIONS, HTML_OPTIONS) | ||
``` | ||
|
||
## htmlToPdf | ||
|
||
`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. | ||
|
||
```ts | ||
import { htmlToPdf } from '#imports' | ||
|
||
const openInWindow = async (HTMLElement: HTMLElement) => { | ||
const pdf = await htmlToPdf(HTMLElement, | ||
undefined, | ||
{ | ||
html2canvas: { | ||
scale: 0.7, | ||
useCORS: true | ||
} | ||
}) | ||
const totalPages = pdf.getNumberOfPages() | ||
const pdfHeight = pdf.getPageHeight() | ||
await pdf.html('<b>I am a custom pdf!!!</b>', { | ||
x: 20, | ||
y: (pdfHeight - 50) * totalPages // place in the bottom | ||
}) | ||
const blob = pdf.output('blob') | ||
window.open(URL.createObjectURL(blob), '_blank') | ||
} | ||
``` |
File renamed without changes.