diff --git a/docs/content/1.getting-started/3.quick-start.md b/docs/content/1.getting-started/3.quick-start.md index 4954cd2..a05bcee 100644 --- a/docs/content/1.getting-started/3.quick-start.md +++ b/docs/content/1.getting-started/3.quick-start.md @@ -37,4 +37,4 @@ const pdfSection = ref(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). diff --git a/docs/content/1.getting-started/4.composables.md b/docs/content/1.getting-started/4.composables.md new file mode 100644 index 0000000..5af26c4 --- /dev/null +++ b/docs/content/1.getting-started/4.composables.md @@ -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(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('I am a custom pdf!!!', { + x: 20, + y: (pdfHeight - 50) * totalPages // place in the bottom + }) + const blob = pdf.output('blob') + window.open(URL.createObjectURL(blob), '_blank') +} +``` diff --git a/docs/content/1.getting-started/4.getting-help.md b/docs/content/1.getting-started/5.getting-help.md similarity index 100% rename from docs/content/1.getting-started/4.getting-help.md rename to docs/content/1.getting-started/5.getting-help.md