Skip to content

Commit

Permalink
docs: Added more information about available composables (#19)
Browse files Browse the repository at this point in the history
  • Loading branch information
zoey-kaiser authored Dec 7, 2023
1 parent d6abd9e commit 09dbb4c
Show file tree
Hide file tree
Showing 3 changed files with 47 additions and 1 deletion.
2 changes: 1 addition & 1 deletion docs/content/1.getting-started/3.quick-start.md
Original file line number Diff line number Diff line change
Expand Up @@ -37,4 +37,4 @@ const pdfSection = ref<HTMLElement | null>(null)
We offer two separate options parameters, that allow you to customize your pdf export.

- 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).
- 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).
- 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).
46 changes: 46 additions & 0 deletions docs/content/1.getting-started/4.composables.md
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')
}
```

0 comments on commit 09dbb4c

Please sign in to comment.