window.print is not a function()

Hello everyone ,
I have a html (bootsrap ) page .I want to print current page .I created a file css where i defined all css when medai print.
The only problem is that when i tried to window.print() when clicking on a button , it gives me a error  window.print is not a function ?

Can anyone Help me, please?

Paola
PaolaSoftware DeveloperAsked:
Who is Participating?
 
Juan OcasioConnect With a Mentor Application DeveloperCommented:
where is your <script> located?

Try doing this in your js file
(function() {
      var printDoc = function (){ 
      window.print();
})();

Open in new window

0
 
Juan OcasioApplication DeveloperCommented:
Is the page fully loaded when you click the button?  Do you have the code?
0
 
PaolaSoftware DeveloperAuthor Commented:
<!-- START: Main content -->
<section class="invoice" id="section_test">
    <!-- START: Invoice Header -->
        <!-- Customer -->
        <div class="col-xs-4 col-md-4 col-sm-4 col-lg-4">
            <form id="customer-form" class="form-validation">
                <div class="box box-success">
                    <div class="box-header with-border">
                        <h3 class="box-title" style="float:left;">
                            Cliente
                            <a id="edit-customer-modal" onclick="showUpdateCustomerModal()" href="#" hidden>
                                <span class="hide-sm">  <i class="fa fa-pencil-square-o fa-1" aria-hidden="true"></i></span>
                            </a>
                        </h3>
                    </div>
                    <div class="box-body">
                        <div class="row form-group">
                            <label for="customer-vat-code" class="col-xs-3 col-md-3 col-sm-3 col-lg-3 control-label customer_labels ">P.Iva</label>
                            <div class="col-xs-9 col-md-9 col-sm-9 col-lg-9">
                                <div class="ui-widget"><input id="doc-customer-vat-code" class="form-control input-sm" /></div>
                            </div>
                        </div>
                        <div class="row form-group">
                            <label for="customer-fiscal-code" class="col-xs-3 col-md-3 col-sm-3 col-lg-3 control-label customer_labels">Cod.Fisc</label>
                            <div class="col-xs-9 col-md-9 col-sm-9 col-lg-9">
                                <div class="ui-widget"><input id="doc-customer-fiscal-code" class="form-control input-sm" /></div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>

        <!-- Details -->
        <div class="col-xs-4 col-md-4 col-sm-4 col-lg-4" id="details-form">
            <div class="box box-warning">
                <div class="box-header with-border">
                    <h3 class="box-title" style="float:left;">Dettagli</h3>
                    <div class="input-group date" id="datetimepicker1" style="float:right; width:57%">
                        <div class="input-group-addon input-sm">
                            <i class="fa fa-calendar"></i>
                        </div>
                        <input type="text" data-validate="required" class="form-control input-sm" id="document-date" placeholder="Data" value="@DateTime.Now.ToShortDateString()">
                    </div>
                </div>
                <div class="box-body">
                    <div class="row form-group">
                        <label for="document-status" id="label_doc_status" class="col-xs-2 col-md-2 col-sm-2 col-lg-2 control-label">Stato</label>
                        <div class="col-xs-3 col-md-3 col-sm-3 col-lg-3">
                            <div class="ui-widget">
                                <input id="document-status-code" value="@Model.DocumentStatus" hidden />
                                <input id="document-status" data-validate="required" class="form-control input-sm" value="@Model.DocumentStatusName" disabled />
                            </div>
                        </div>
                    </div>
                    <div class="row form-group">
                        <label for="document-vat-code" class="col-xs-2 col-md-2 col-sm-2 col-lg-2 control-label">
                            Iva
                            <a id="add-vatcodes-modal" onclick="vatCodesListModal()" href="#">
                                <span class="hide-sm">  <i class="fa fa-cog" aria-hidden="true"></i></span>
                            </a>
                        </label>
                        <label for="document-currency" id="label_doc_valute" class="col-xs-3 col-md-3 col-sm-3 col-lg-3 control-label">Valuta</label>
                        <div class="col-xs-4 col-md-4 col-sm-4 col-lg-4">
                            <div class="ui-widget">
                                <input id="document-currency-code" value="@Model.CurrencyCode" hidden />
                                <input id="document-currency" data-validate="required" disabled class="form-control input-sm" value="@Model.CurrencyName" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    <!-- END: Invoice Header -->
    <!-- START: Invoice Body -->
    <div class="row invoice-body test" id="invoicebody-id" disabled="disabled">
        <div style="padding: 0!important" class="col-xs-12 col-md-12 col-lg-12 table-responsive">
            <div class="box">
                <div class="box-body" id="invoicebody-id2" disabled="disabled">
                    <table width="100%" class="table table-striped table-bordered dt-responsive nowrap" id="invoice-table" cellspacing="0">
                        <thead>

                            <tr id="t">
                                <th></th>
                                <th>Codice &emsp;&emsp;&emsp;&emsp;</th>
                                <th>Nome &emsp;&emsp;&emsp;</th>
                                <th>
                                    U.M<a id="add-measureunit-modal" onclick="measureUnitsListModal()" href="#"> <span class="hide-sm"> <i class="fa fa-cog" aria-hidden="true"></i></span> </a>
                                </th>
                                <th>Qta</th>
                                <th>Prezzo</th>
                                <th>
                                    IVA &emsp;<a id="add-vatcodes-modal" onclick="vatCodesListModal()" href="#"> <span class="hide-sm"> <i class="fa fa-cog" aria-hidden="true"></i></span> </a>
                                </th>
                                <th>Prezzo Ivato</th>
                                <th>Sc1%</th>
                                <th>Sc2%</th>
                                <th>Subtotal</th>
                                <th>Total</th>
                            </tr>
                        </thead>
                    </table>                    
                </div>
            </div>
        </div>
    </div>
    <!-- END: Invoice Body -->
    <!-- START: Invoice Footer -->
    <!-- END: Invoice Footer -->
    <form>
        <div class="row invoice-button">
            <div class="col-xs-12 col-md-12 col-lg-12" id="add_buttons">
                <input type="button" id="a" onclick="printDoc()" value="Print" class="btn btn-success pull-right" />
            </div>
        </div>
    </form>
</section>

Javascript is an external file and the function printDoc()
 function printDoc(){
window.print();
}
I tried even onclick="window.print()" , even other possibilities like window.open() and then window.print() but this way my file css "get out of game".

Thank you for your reply :)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.