Print tag html + bootstrap

Question

Print tag html + bootstrap

Navigation

#1 by (3 votes)
#2 by (0 votes)

1

I have the following box I want to print:

Print function:

//Imprimir

$(document).on('click', '.imprimirDocumento', function() {

    var divToPrint = document.getElementById('impresion');

    var newWin = window.open('', 'Print-Window');

    newWin.document.open();

    newWin.document.write('<html><body onload="window.print()">' + divToPrint.innerHTML + '</body></html>');

    newWin.document.close();

    setTimeout(function() { newWin.close(); }, 10);
});

But the output is like this:

What can I do so that at the time of printing the document, even if it respects the order of the header (col-md-3) that was done with bootstrap and does not print everything down?

Thank you very much for the help.

EDITED

If I use only window.print() it looks like this:

javascript jquery html bootstrap print

asked by Baker1562 23.02.2018 в 02:42

source

2 answers

0

$(".print").click(function() {
  window.print();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="print">Imprimir Documento</button>

You can do it this way, it will be easier for you and you will not have to use so much code. just place it on each page you want to print

answered by 23.02.2018 в 03:11

How to add different totals by columns in MySQL? Change the format of the date I receive from YYYY-MM-DD to (February 14, 2018)

score 3 · Accepted Answer

You need to create a style sheet for your printing. You can create it in a .css

<link href="impresion.css" type="text/css" media="print" />

Or write it in html, it does not matter.

<style type="text/css">
   @media print {
   /* Todas las reglas Css */
}
<style>

The web browser automatically selects the style defined for the printer when sending a web page to print.

You need to control the style of the page to be printed, and you should consider a very important property: @page

In it you can define very important properties: -Sizes and orientation -the margins -Widowed and orphan lines -page breaks

As I see your code I would advise you to use table-> body inside your 'div' and not use 'col', but if you have already defined it, just specify the CSS rules of your impression.

If you want a quick guide you can suggest this blog: link

Remember that it is not a question of your JavaScript but of your Html and CSS, in case of using columns you could take this example for your CSS rules:

@media print {
  .col-sm-1, .col-sm-2
}
.col-sm-2 {
    width: 30%;
}
.col-sm-1 {
    width: 35%;
}

Etc ....

Greetings