Fix missing fonts issue when printing

hrynko · May 26, 2022 · b0a2ed5 · b0a2ed5
1 parent 782793d
commit b0a2ed5
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 7 deletions.
diff --git a/src/util.js b/src/util.js
@@ -8,7 +8,7 @@ export function addPrintStyles(iframe, sizeX, sizeY) {
   iframe.contentWindow.document.head.appendChild(style)
 }
 
-export function createPrintIframe() {
+export function createPrintIframe(container) {
   return new Promise((resolve) => {
     const iframe = document.createElement('iframe')
     iframe.width = 0
@@ -19,7 +19,7 @@ export function createPrintIframe() {
     iframe.style.border = 'none'
     iframe.style.overflow = 'hidden'
     iframe.onload = () => resolve(iframe)
-    window.document.body.appendChild(iframe)
+    container.appendChild(iframe)
   })
 }
 

diff --git a/src/vue-pdf-embed.vue b/src/vue-pdf-embed.vue
@@ -196,37 +196,51 @@ export default {
 
       const printUnits = dpi / 72
       const styleUnits = 96 / 72
-      let iframe
+      let container, iframe
 
       try {
-        iframe = await createPrintIframe()
+        container = document.createElement('div')
+        container.style.display = 'none'
+        window.document.body.appendChild(container)
+        iframe = await createPrintIframe(container)
+
         await Promise.all(
           this.pageNums.map(async (pageNum, i) => {
             const page = await this.document.getPage(pageNum)
             const viewport = page.getViewport({ scale: 1 })
+
             if (i === 0) {
               const sizeX = (viewport.width * printUnits) / styleUnits
               const sizeY = (viewport.height * printUnits) / styleUnits
               addPrintStyles(iframe, sizeX, sizeY)
             }
-            const canvas = iframe.contentWindow.document.createElement('canvas')
+
+            const canvas = document.createElement('canvas')
             canvas.width = viewport.width * printUnits
             canvas.height = viewport.height * printUnits
-            iframe.contentWindow.document.body.appendChild(canvas)
+            container.appendChild(canvas)
+            const canvasClone = canvas.cloneNode()
+            iframe.contentWindow.document.body.appendChild(canvasClone)
+
             await page.render({
               canvasContext: canvas.getContext('2d'),
               intent: 'print',
               transform: [printUnits, 0, 0, printUnits, 0, 0],
               viewport,
             }).promise
+
+            canvasClone.getContext('2d').drawImage(canvas, 0, 0)
           })
         )
+
         iframe.contentWindow.focus()
         iframe.contentWindow.print()
       } catch (e) {
         this.$emit('printing-failed', e)
       } finally {
-        iframe.parentNode.removeChild(iframe)
+        if (container) {
+          container.parentNode.removeChild(container)
+        }
       }
     },
     /**