Hi have more than one imageplease help me how to print more than imageltscript type34textjavascript34gtfunction ImageReturne var div documentgetElementById34scroll34innerHTML var firstFunc function step1 setTimeout39step239 10 var secondFunc function step2 windowprint windowclose var getImages 34lthtmlgtltheadgtltscriptgtn34 firstFunc 34n34 secondFunc

Print multiple Images on Button click using JavaScript and jQuery

suhaas12...

SOLVED CLOSED ACTIVE ANSWERED
User: suhaas121
Posted: on Mar 25, 2019 07:50 AM
Forum: JavaScript
Answer: 1
Views: 8920
Sample Code: Download

Hi have more than one image.please help me how to print more than image.

<script  type="text/javascript">
function ImageReturne() {
            var div = document.getElementById("scroll").innerHTML;
            var firstFunc = function step1() { setTimeout('step2()', 10); }
            var secondFunc = function step2() { window.print(); window.close() }
            var getImages = "<html><head><script>\n" + firstFunc + "\n" + secondFunc + "</scri" + "pt></head><body onload='step1()'>\n" + "'" + div + "" + "</body></html>";
            return getImages;
        }
        function myprint() {
            Pagelink = "about:blank";
            var pwa = window.open(Pagelink, "_new");
            pwa.document.open();
            pwa.document.write(ImageReturne());
            pwa.document.close();
        }
        $(function () {
            var clicking = false;
            var previousX;
            var previousY;
            $("#scroll").mousedown(function (e) {
                e.preventDefault();
                previousX = e.clientX;
                previousY = e.clientY;
                clicking = true;
            });
            $(document).mouseup(function () {
                clicking = false;
            });
            $("#scroll").mousemove(function (e) {
                if (clicking) {
                    e.preventDefault();
                    var directionX = (previousX - e.clientX) > 0 ? 1 : -1;
                    var directionY = (previousY - e.clientY) > 0 ? 1 : -1;
                    $("#scroll").scrollLeft($("#scroll").scrollLeft() + (previousX - e.clientX));
                    $("#scroll").scrollTop($("#scroll").scrollTop() + (previousY - e.clientY));
                    previousX = e.clientX;
                    previousY = e.clientY;
                }
            });
            $("#scroll").mouseleave(function (e) {
                clicking = false;
            });
        });


</script>

<nav class="navbar-fixed-top navbar-default">
    <button type="button" id="zoomin"> <span class="glyphicon glyphicon-zoom-in"></span> Zoom In</button>
    <button type="button" id="zoomout"> <span class="glyphicon glyphicon-zoom-out"></span> Zoom Out</button>
     <button type="button" onclick="document.location.reload(true);" value="Reload Page"> <span class="glyphicon glyphicon-repeat"></span> Reset</button>
             <button type="button" onclick="myprint()"> <span class="glyphicon glyphicon-print"></span> Print</button>
           </nav>  
<div id="one" align="center">
         <div id="scroll">
                 <div id="divName" >
         <img src="CHAP_30_10_00 fig3/DEICINSYSEMPE-1.jpg" class="mapimg iborderff0c00 iradius16 iopacity10 icolorf9f479" width="607" height="808" usemap="#Map" border="0" /></div>
             </div>
                     </div>
<div id="two" align="center">
          <div id="scroll">
                 <div id="divName1" >
                     <img src="CHAP_30_10_00 fig3/DEICINSYSEMPE-2.jpg"  class="mapimg iborderff0c00 iradius16 iopacity10 icolorf9f479" width="610" height="820" usemap="#Map2" border="0" />
                     </div>
              </div>
         </div>

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 2

Reply
ANSWER
User: dharmendr
Replied: on Mar 26, 2019 12:56 AM
Report

Hi suhaas121,

Check this example. Now please take its reference and correct your code.

HTML

<style type="text/css">
    #scroll
    {
        width: 100%;
        height: 300px;
        overflow: hidden;
    }
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript">
    var currentZoom = 1.0;
    $(document).ready(function () {
        $('#zoomin').click(function () {
            currentZoom = currentZoom + 0.03;
            var scaleString = "scale(" + currentZoom + ")";
            $('[id*=divName]').each(function () {
                $(this).css("transform", scaleString);
            });
        })
        $('#zoomout').click(function () {
            currentZoom = currentZoom - 0.03;
            var scaleString = "scale(" + currentZoom + ")";
            $('[id*=divName]').each(function () {
                $(this).css("transform", scaleString);
            });
        })
    });
    function ImageReturne() {
        var div = document.getElementById("dvPrint").innerHTML;
        var firstFunc = function step1() { setTimeout('step2()', 10); }
        var secondFunc = function step2() { window.print(); window.close() }
        var getImages = "<html><head><script>\n" + firstFunc + "\n" + secondFunc + "</scri" + "pt></head><body onload='step1()'>\n" + "'" + div + "" + "</body></html>";
        return getImages;
    }
    function myprint() {
        Pagelink = "about:blank";
        var pwa = window.open(Pagelink, "_new");
        pwa.document.open();
        pwa.document.write(ImageReturne());
        pwa.document.close();
    }
    $(function () {
        var clicking = false;
        var previousX;
        var previousY;
        $("#scroll").mousedown(function (e) {
            e.preventDefault();
            previousX = e.clientX;
            previousY = e.clientY;
            clicking = true;
        });
        $(document).mouseup(function () {
            clicking = false;
        });
        $("#scroll").mousemove(function (e) {
            if (clicking) {
                e.preventDefault();
                var directionX = (previousX - e.clientX) > 0 ? 1 : -1;
                var directionY = (previousY - e.clientY) > 0 ? 1 : -1;
                $("#scroll").scrollLeft($("#scroll").scrollLeft() + (previousX - e.clientX));
                $("#scroll").scrollTop($("#scroll").scrollTop() + (previousY - e.clientY));
                previousX = e.clientX;
                previousY = e.clientY;
            }
        });
        $("#scroll").mouseleave(function (e) {
            clicking = false;
        });
    });
</script>
<nav class="navbar-fixed-top navbar-default">
    <button type="button" id="zoomin"> <span class="glyphicon glyphicon-zoom-in"></span> Zoom In</button>
    <button type="button" id="zoomout"> <span class="glyphicon glyphicon-zoom-out"></span> Zoom Out</button>
    <button type="button" onclick="document.location.reload(true);" value="Reload Page"> <span class="glyphicon glyphicon-repeat"></span> Reset</button>
    <button type="button" onclick="myprint()"> <span class="glyphicon glyphicon-print"></span> Print</button>
</nav>
<div id="dvPrint">
    <div id="one" align="center">
        <div id="scroll">
            <div id="divName">
                <img src="Images/Chrysanthemum.jpg" class="mapimg iborderff0c00 iradius16 iopacity10 icolorf9f479"
                    width="200" height="200" usemap="#Map" border="0" /></div>
        </div>
    </div>
    <div id="two" align="center">
        <div id="scroll">
            <div id="divName1">
                <img src="Images/Desert.jpg" class="mapimg iborderff0c00 iradius16 iopacity10 icolorf9f479"
                    width="200" height="200" usemap="#Map2" border="0" />
            </div>
        </div>
    </div>
</div>

Screenshot

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Print multiple Images on Button click using JavaScript and jQuery

Company

Explore

Follow us

Contact Us