Print image from Javascript

问题

i have some images .... the size of each image is different For example:

img1 = 200 x 1900
img2 = 1800 x 400
img3 = 600 x 800

// HTML

<html>
<body>
    <img src='img1.jpg'>    
    <img src='img2.jpg'>
    <img src='img3.jpg'>
</body>
</html>

// javascript

            var mywindow = window.open('', 'my div');
            mywindow.document.write('<html><head><title>my div</title>');
            mywindow.document.write('</head><body >');
            data = "<img src='img1.jpg'><img src='img2.jpg'><img src='img3.jpg'>";
            mywindow.document.write(data);  // data = all image
            mywindow.document.write('</body></html>');
            mywindow.print();
            mywindow.close();

Now the output is all images printed but the sizes is corrupted how can i print each image in page A4 and print it fitted in page (A4)

回答1:

You can define CSS rules for printing and base the dimensions on 21cm x 29.7cm.

For example :

<style type="text/css">
@media print {
   img {
      max-width: 18cm;
      max-height: 8cm;
   }
}
</style>

Note that if your page is simple enough, you don't have to build a new layout in a new window as you can simply define different rules for @media print and @media screen.

回答2:

You can't. Websites are created for screens, not printers.

However you could force the web browser to display the page with the same pixel dimensions as A4. However, there may be a few quirks when things are rendered.

<!DOCTYPE html>
<html>
  <head>
    <style>
    body {
        height: 842px;
        width: 595px;
        /* to centre page on screen*/
        margin-left: auto;
        margin-right: auto;
    }
    </style>
  <head>
  <body>
  </body>
</html>

The best solution for printing, is to use PDFs, that's what they are for. Create a PDF that has the same data. You have full control over the print format in that case.

来源：https://stackoverflow.com/questions/15884575/print-image-from-javascript

标签

javascript

html

printing