Decouple HTML to PDF logic from saving functionality for improved flexibility

playground/app.vue

@@ -3,17 +3,24 @@
     <div style="position: fixed">
       <button
         style="border-radius: 0; font-size: 20px; cursor: pointer"
-        @click="exportToPDF('pdf_export.pdf', pdfSection, undefined, {html2canvas: {scale: 0.7, useCORS: true}})"
+        @click="exportToPDF('pdf_export.pdf', pdfSection as HTMLElement, undefined, {html2canvas: {scale: 0.7, useCORS: true}})"
       >
         Generate normal PDF
       </button>
       <br>
       <button
         style="border-radius: 0; font-size: 20px; cursor: pointer; margin-top: 10px"
-        @click="printProtected(pdfSection)"
+        @click="printProtected(pdfSection as HTMLElement)"
       >
         Generate protected PDF
       </button>
+      <br>
+      <button
+        style="border-radius: 0; font-size: 20px; cursor: pointer; margin-top: 10px"
+        @click="openInWindow(pdfSection as HTMLElement)"
+      >
+        Generate custom PDF and open in window
+      </button>
     </div>
     <div ref="pdfSection" style="width: 500px; margin: auto">
       <TestingStage />
@@ -23,11 +30,11 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import { exportToPDF } from '#imports'
+import { exportToPDF, htmlToPdf } from '#imports'
 
 const pdfSection = ref<HTMLElement | null>(null)
 
-const printProtected = (HTMLElement: HTMLElement | undefined) => {
+const printProtected = (HTMLElement: HTMLElement) => {
   exportToPDF('pdf_protected_export.pdf', HTMLElement,
     {
       encryption: {
@@ -42,6 +49,25 @@ const printProtected = (HTMLElement: HTMLElement | undefined) => {
       }
     })
 }
+
+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')
+}
 </script>
 
 <style>

src/runtime/composables/exportToPDF.ts

@@ -1,24 +1,12 @@
-import jsPDF, { HTMLOptions, jsPDFOptions } from 'jspdf'
+import { HTMLOptions, jsPDFOptions } from 'jspdf'
+import { htmlToPdf } from './htmlToPdf'
 
 export const exportToPDF = async (
   fileName: string,
-  element?: HTMLElement,
+  element: HTMLElement,
   documentOptions?: jsPDFOptions,
-  options?: HTMLOptions
+  htmlOptions?: HTMLOptions
 ) => {
-  if (!(element instanceof HTMLElement)) {
-    throw new TypeError('usePDFExport: element is not a HTMLElement.')
-  }
-  const orientation = (element.offsetWidth > element.offsetHeight) ? 'l' : 'p'
-
-  // eslint-disable-next-line new-cap
-  const pdf = new jsPDF({
-    orientation: documentOptions?.orientation ?? orientation,
-    unit: documentOptions?.unit ?? 'px',
-    format: documentOptions?.format ?? 'A4',
-    encryption: documentOptions?.encryption
-  })
-
-  await pdf.html(element, options)
+  const pdf = await htmlToPdf(element, documentOptions, htmlOptions)
   return pdf.save(fileName)
 }

src/runtime/composables/htmlToPdf.ts

@@ -0,0 +1,23 @@
+import jsPDF, { HTMLOptions, jsPDFOptions } from 'jspdf'
+
+export const htmlToPdf = async (
+  element: HTMLElement,
+  documentOptions?: jsPDFOptions,
+  htmlOptions?: HTMLOptions
+) => {
+  if (!(element instanceof HTMLElement)) {
+    throw new TypeError('usePDFExport: element is not a HTMLElement.')
+  }
+  const orientation = (element.offsetWidth > element.offsetHeight) ? 'l' : 'p'
+
+  // eslint-disable-next-line new-cap
+  const pdf = new jsPDF({
+    orientation: documentOptions?.orientation ?? orientation,
+    unit: documentOptions?.unit ?? 'px',
+    format: documentOptions?.format ?? 'A4',
+    encryption: documentOptions?.encryption
+  })
+
+  await pdf.html(element, htmlOptions)
+  return pdf
+}