vue-html2pdf

import VueHtml2pdf from 'vue-html2pdf'; export default { components: { VueHtml2pdf }, methods: { generateReport() { // This method is called to trigger PDF generation. // It accesses the component via its ref and calls the generatePdf method. this.$refs.html2Pdf.generatePdf(); }, onProgress(event) { console.log(`PDF generation progress: ${event}%`); }, hasStartedGeneration() { console.log('PDF generation has started.'); }, hasGenerated(event) { console.log('PDF has been successfully generated.', event); } }, template: ` <div> <button @click="generateReport">Generate PDF</button> <vue-html2pdf :show-layout="false" :float-layout="true" :enable-download="true" :preview-modal="true" :paginate-elements-by-height="1400" filename="my-document" :pdf-quality="2" :manual-pagination="false" pdf-format="a4" pdf-orientation="landscape" pdf-content-width="800px" @progress="onProgress($event)" @hasStartedGeneration="hasStartedGeneration()" @hasGenerated="hasGenerated($event)" ref="html2Pdf" > <section slot="pdf-content"> <h1>Hello, Vue-HTML2PDF!</h1> <p>This is a sample content that will be converted into a PDF document.</p> <img src="https://via.placeholder.com/300x150.png?text=Image" alt="Placeholder Image" style="width: 300px; height: 150px;" /> <p>More content here to potentially trigger pagination if height exceeds 1400px.</p> </section> </vue-html2pdf> </div> ` }