Prevent images from printing in wrong order

ascali · May 21, 2019 · a975f75 · a975f75
1 parent 01f9d06
commit a975f75
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 43 deletions.
diff --git a/src/js/image.js b/src/js/image.js
@@ -13,54 +13,32 @@ export default {
     let printableElement = document.createElement('div')
     printableElement.setAttribute('style', 'width:100%')
 
-    // Load images and append
-    loadImagesAndAppendToPrintableElement(printableElement, params).then(() => {
-      // Check if we are adding a header
-      if (params.header) addHeader(printableElement, params.header, params.headerStyle)
+    // Create all image elements and append them to the printable container
+    params.printable.forEach(src => {
+      // Create the image element
+      let img = document.createElement('img')
 
-      // Store html data
-      params.htmlData = printableElement.outerHTML
+      // Set image src with the file url
+      img.src = src
 
-      // Print image
-      Print.send(params, printFrame)
-    })
-  }
-}
-
-function loadImagesAndAppendToPrintableElement (printableElement, params) {
-  let promises = []
-
-  params.printable.forEach((image, index) => {
-    // Create the image element
-    let img = document.createElement('img')
-
-    // Set image src with image file url
-    img.src = image
-
-    // Load image
-    promises.push(loadImageAndAppendToPrintableElement(printableElement, params, img, index))
-  })
-
-  return Promise.all(promises)
-}
-
-function loadImageAndAppendToPrintableElement (printableElement, params, img, index) {
-  return new Promise(resolve => {
-    img.onload = () => {
-      // Create image wrapper
+      // Create the image wrapper
       let imageWrapper = document.createElement('div')
       imageWrapper.setAttribute('style', params.imageStyle)
 
-      img.setAttribute('style', 'width:100%;')
-      img.setAttribute('id', 'printableImage' + index)
-
-      // Append image to wrapper element
+      // Append image to the wrapper element
       imageWrapper.appendChild(img)
 
-      // Append wrapper element to printable element
+      // Append wrapper to the printable element
       printableElement.appendChild(imageWrapper)
+    })
 
-      resolve()
-    }
-  })
+    // Check if we are adding a print header
+    if (params.header) addHeader(printableElement, params.header, params.headerStyle)
+
+    // Store html data
+    params.htmlData = printableElement.outerHTML
+
+    // Print image
+    Print.send(params, printFrame)
+  }
 }
diff --git a/test/manual/index.html b/test/manual/index.html
@@ -191,7 +191,7 @@
           'test-02.jpg'
         ],
         type: 'image',
-        style: 'img { max-width: 300px; margin: 30px; }'
+        style: 'img { max-width: 400px; margin: 30px; }'
       })
     }
 
@@ -205,10 +205,24 @@
         css: 'test.css',
       })
     }
+
+    function printExternalImages() {
+      printJS({
+        printable: [
+          'https://printjs.crabbly.com/images/print-01-highres.jpg',
+          'https://printjs.crabbly.com/images/print-02-highres.jpg',
+          'https://printjs.crabbly.com/images/print-03-highres.jpg'
+        ],
+        type: 'image',
+        style: 'img { max-width: 300px; margin: 30px; }',
+        showModal: true,
+        modalMessage: 'Printing...'
+      })
+    }
   </script>
   <body>
     <section id="test" class="test">
-      <h1>Print.js Test Page</h1>
+      <h1></h1>
       <p>
         <button onClick='printPdf();'>
           Print PDF
@@ -264,6 +278,9 @@ <h1>Print.js Test Page</h1>
         <button onClick='printStyledImagesWithStyleSheet();'>
           Print Multiple Images Passing a Style Sheet
         </button>
+        <button onClick='printExternalImages();'>
+          Print Multiple External Images
+        </button>
       </p>
     </section>
   </body>