Creating Multiple pages with different text to print with javascript

Question

So I am creating a basic asp.bet website. Which in end, generates a receipt to print like this-

So I am printing this receipt with simple javascript code. The javascript code goes like-

   <script type="text/javascript">
            function printData() {
                if (confirm("Data Saved!\nDo you want to take a Print?")) {
                    var divToPrint = document.getElementById("<%=divAll.ClientID %>");
                    newWin = window.open("");
                    newWin.document.write(divToPrint.outerHTML);
                    newWin.document.close();
                    newWin.focus();
                    newWin.print();
                    newWin.close();
                }
            }
    </script>

(Above receipt is coded in tables and "divAll" is the main division which has all the tables. And the text CONSIGNEE COPY is a simple text in a table division.)

and the code for print button goes like-

<asp:Button ID="btnPrint" runat="server" Text="Print Consignment" OnClientClick="printData();"/>

What I want to do is to take 4 copies of the receipt with different text in place of CONSIGNEE COPY-

1- CONSIGNEE COPY
2- DRIVER COPY
3- TAX COPY
4- OFFICE COPY

So now my question is, can I do that with javascript?
The printData() function of javascript is already opening a new window. Can I append a new page in newWin with same receipt but with different text(in place of CONSIGNEE COPY). So that finally the newWin has 4 pages with different text on each page. Is that possible? How can I achieve this?

Thanks for the Help. :)

#Edit:
OK, so after some searching I managed to add my receipt two times in print preview.

<script type="text/javascript">
            function printData() {
                if (confirm("Data Saved!\nDo you want to take a Print?")) {
                    var divToPrint = document.getElementById("<%=divAll.ClientID %>");                    
                    newWin = window.open("");
                    newWin.document.write(divToPrint.outerHTML);
                    var div = document.createElement("div");
                    div.innerHTML = divToPrint.innerHTML;
                    div.setAttribute("style", "font-family:Arial !important;");
                    div.setAttribute("align", "center");
                    newWin.document.body.appendChild(div);
                    newWin.document.close();
                    newWin.focus();
                    newWin.print();
                    newWin.close();
                }
            }
    </script>

by above method I can add 4 pages too, but how can I change the CONSIGNEE COPY value each time? Please help!

Ravindra · Accepted Answer · 2020-02-29 07:51:42Z

1

try this

just change one line, and iterate for other remaining copies

    newWin.document.write(divToPrint.outerHTML.replace("CONSIGNEE COPY", "DRIVER COPY"));

answered Feb 29, 2020 at 7:51

Ravindra

666 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Creating Multiple pages with different text to print with javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related