Currently, I am utilizing ui-grid version v3.2.9 with the aim of printing data that has already been displayed in UI.
My table structure consists of div elements created using Angular UI Grid.
Here's my current approach:
I open a new window and append the HTML of the grid to it. Then, I invoke the window.print() method to print all the content within this newly opened window.
However, I encountered an issue where if there are numerous records in my grid, a vertical scroll appears in the newly opened window. When I use the window.print() method, it only prints the visible area instead of all the content present in the window. Below is the pseudo code snippet I have used:
function print(id){
var print = document.getElementById(id);
var w = window.open("", "");
var headContent = document.getElementsByTagName('head')[0].outerHTML;
var writeMe = ('<html><body><head>' + headContent + '</head>');
writeMe += (print.outerHTML);
writeMe += ('</body></html>');
w.document.write(writeMe);
w.document.close();
w.focus();
w.setTimeout(function(){
w.print();
w.close();
}, 1000);
}
I am seeking suggestions on how I can enhance my code to successfully print the entire content of the window. Any insights would be greatly appreciated! Thank you!