Print Bootstrap Grid Layout using Custom Styling
Question
I was working with Bootstrap Grid and made a Layout. I want to print exactly the same that is displaying on the Web Page, same layout No change. I try to use some sort of print method using javascript for adding custom CSS codes but all in vain.
Here is my sample layout ( Fiddle ) that I want to print exactly the same.
The last print JavaScript code that I tried was:
<script>
var all_source_content = document.documentElement.innerHTML;
var DocumentContainer = document.getElementById('main_container');
var WindowObject = window.open('', 'PrintWindow', '');
WindowObject.document.writeln('<!DOCTYPE html>');
WindowObject.document.writeln('<html><head><title></title>');
WindowObject.document.writeln('<link rel="stylesheet" href="https://getbootstrap.com/docs/3.3/dist/css/bootstrap.min.css">');
WindowObject.document.writeln('<style></style>');
WindowObject.document.writeln('</head><body>');
console.log(DocumentContainer.innerHTML);
WindowObject.document.writeln(DocumentContainer.innerHTML);
WindowObject.document.writeln('</body></html>');
WindowObject.document.close();
WindowObject.focus();
WindowObject.print();
</script>
But it also did not help me.
My desired layout:
1 answers
solution1
0 ACCPTED 2020-01-23 11:03:26
In your code, you are creating a new window If the window couldn't be opened, it returns a null value.
if ur using chrome browser check ur console:
Uncaught TypeError: Cannot read property 'document' of null u can see this error.
This is because of browser's default settings the pop-ups are blocked by default. if you want u can change the option to allow.
Then if you want to print the page as it is you have to adjust the scale factor while printing .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.