0

I have a table in Reactjs which I want to print as it is with the bootstrap styling applied.
This is my table: enter image description here

I wrote this js function on print button clicked:

var divContents = document.getElementById("blah").innerHTML;
    var a = window.open('', '', 'height=500, width=500');
    a.document.write('<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><link media="all" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"><title></title></head>');
    a.document.write('<body>');
    a.document.write(divContents);
    a.document.write('</body></html>');
    a.document.close();
    a.print();

where blah is id of the div containing table html. But this shows my pdf as:

enter image description here

How can I print the bootstrap html along with styling?
Thanks for your time :)

Vid
  • 123
  • 11

1 Answers1

-1

Try this code :

var divContents = document.getElementById("printTable").innerHTML;
var a = window.open();
a.document.write('<html><head><meta charset="utf-8"><link media="all" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" ></head>');
a.document.write('<body>');
a.document.write(divContents);
a.document.write('</body></html>');
a.document.close();        
setTimeout(function(){
    a.focus();        
    a.print();
    a.close();
 },1000); // wait for images to load inside iframe

//a.print();
Babak Yaghoobi
  • 1,892
  • 9
  • 18