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.
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.htmlconst HTML_OPTIONS = {} // See all options: http://raw.githack.com/MrRio/jsPDF/master/docs/module-html.html#~htmlawait 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.
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')}
Table of Contents