95
Views
2
Comments
Solved
How to print an hidden container

Hello guys,

I have a container that i want to hide from the user on the screen, that is refresh after each onblur. I already have a Js that prints my selected container.

The js code is simple and make what i want to do: (sorry i do not know put this as code text)

var element = document.getElementById($parameters.ContainerId);
var opt = {    
                   image: { type: 'png', quality: 1 },    
                   margin: $parameters.Margin,
                   filename: $parameters.Filename};
html2pdf().
set(opt).
from(element).
toContainer()        
                   .then(function(){          
                    var doc = $('.html2pdf__container');          
                    doc.find('.show-on-export').show(); 
})
.save();


The difficulty here is when i am hidding the container i am pritting a blank page, or the print is not executing because the container is not uploaded in the DOM. I already put the property container visible to true, doesn't work. I already put the style class of the container as "display: none", doesn't work too. 

Someone can help me?

UserImage.jpg
Pedro Ricarte
Solution

Instead of giving the container, in this case i am sending the widget.id and instead of using this: 
var element = document.getElementById($parameters.ContainerId); 

i am using this
var element = document.getElementById($parameters.WidgetId).innerHTML;

to print exacly the information that i want. The .innerHTML is the value of the widget that i am sending so, with this way, i can print what i want without the on and off the class of the container.

2022-09-05 08-23-51
Naveen N

@Toretto
1. Wait for the container element to load before printing:

You can use the window.onload event to ensure that the container element is loaded before attempting to print it. 

window.onload = function() {

    // Your html2pdf code here

};

2. Show the container element temporarily when printing:

One solution is to temporarily show the container element when printing, and then hide it again once the print is finished. you can use javascript or jquery anything is fine.

// Show the container element

document.getElementById("containerId").style.display = "block";


// Print the contents of the container

window.print();


// Hide the container element again

document.getElementById("containerId").style.display = "none";

UserImage.jpg
Pedro Ricarte
Solution

Instead of giving the container, in this case i am sending the widget.id and instead of using this: 
var element = document.getElementById($parameters.ContainerId); 

i am using this
var element = document.getElementById($parameters.WidgetId).innerHTML;

to print exacly the information that i want. The .innerHTML is the value of the widget that i am sending so, with this way, i can print what i want without the on and off the class of the container.

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.