search

crabbly / Print.js

A tiny javascript library to help printing from the web.
MIT License
4.28k stars 672 forks source link

iPad & iPhone-Chrome/safari browser- Image print 'raw-html' is printing the entire html page and also blank pages #674

Open RahulTejaTeepalapudi opened 1 year ago

RahulTejaTeepalapudi commented 1 year ago

Hi there, I need help on this issue on IOS Devices - iPad and iPhone - chrome and safari browsers I am using Print-JS for printing of images. Below is my code of how I am calling it.

Calling printJS:

printJS({
      printable: htmlContent,
      type: 'raw-html',
      style,
      documentTitle: '',
      showModal: true,
      modalMessage: 'Preparing data...',
      onError() {
        alert('Could not print the document');
      },
    });

Below is the iFrame that Print-JS library has injected into the DOM

iFrame injected:

<iframe 
style="visibility: hidden; height: 0; width: 0; position: absolute; border: 0" 
id="printJS" 
srcdoc="<html><head><title></title></head><body></body></html>">
#document
<html>
    <head>
    <title></title>
    <style>
      @media print {
        div.img-container {
          overflow:hidden;
          page-break-after:always;
          page-break-inside: avoid;
        }
        .catalogImg {
          width: 95vw;
          height: 95vh;
        }
        @page {
        margin-top: 0;
        margin-bottom: 0;
        }
      }    
      </style>
      </head>
      <body>
        <div style="width:100%">
            <div class="img-container"> 
                <img src="blob:https://ab.dev.abc.com/26922f94-2dfd-436b-aa60-890aff8b815b" 
                    class="cataImg"> 
            </div>
        </div>
        </body>
</html>
</iframe>

Output on iPad Air Chrome browser:

Issue: Entire page is printed instead of actual image to print.

entirePage1

entirePage2

Output on iPhone 14 Pro Max Safari browser

Issue: Blank white pages are getting printed instead of actual Image.