46
Views
9
Comments
Solved
How can I invoke the browser's print function to print a table?
Service Studio Version
11.54.84 (Build 63795)

How can I invoke the browser's print function to print a table? 

2024-09-12 02-43-38
Deepsagar Dubey
Solution

Hello @Cesar Ge 

Here is a general solution, using CSS only, which I have verified to work.

@media print {  
body {    
  visibility: hidden;  
}  
#section-to-print {    
  visibility: visible;    
  position: absolute;    
  left: 0;    
  top: 0;  
}
}

Replace the #section-to-print with a container Id or grid id to which content you want to print.

You can take a reference of a working solution in below links -

Code Link
Browser Preview Link

In preview link Use the browser's Print command (e.g. control-P or command-P). The print preview should show only the given id content. Everything else should not appear.

I hope it'll help you.

Thanks
Deep 

2024-05-02 09-49-04
Murali Manoharan V
Champion
Solution

Yeah we can @Cesar Ge 

Add this JS in Scripts

function printSpecificContainer(contId) {

    var container = document.getElementById(contId); // Get the container

    if (container) {

        var printWindow = window.open('', '_blank'); // Open a new blank window

        var styles = document.head.innerHTML; // Get all styles from the main document


        printWindow.document.write('Print');

        printWindow.document.write(styles); // Include the styles in the print window

        printWindow.document.write('');

        printWindow.document.write(container.innerHTML); // Write the container's content

        printWindow.document.write('');

        printWindow.document.close(); // Close the document to finish writing

        printWindow.focus(); // Focus on the print window

        printWindow.print(); // Trigger the print dialog

        printWindow.close(); // Optionally close the print window after printing

    } else {

        alert("Container not found!");

    }

}


Then In Screen's property add the same as required script

In Print on click call, add js with the grid's widget id as input parameter and call the print function: printSpecificContainer($parameters.contId);


Hope it will help you

Regards

Murali

UserImage.jpg
Cesar Ge

I will give it a try. Thank you very much for your help. 

UserImage.jpg
Cesar Ge

Hi   @Murali Manoharan V ,

When I execute it, it doesn't print what I need. Do you know how to fix it? Thank you for your help. 

Here is the content of the gridI want to print. 

UserImage.jpg
Cesar Ge

Hi   @Murali Manoharan V , 

What I want to print is a grid, not a table. Thank you again for your help and I look forward to your response. 

2023-06-05 15-54-04
João Correia

There are a few versatile solutions on the forge, depending on your use case.

Check out PrintJS and Ultimate PDF

2024-05-02 09-49-04
Murali Manoharan V
Champion

Hi @Cesar Ge 

Inside the button's On Click screen action, add a JavaScript node and include the following code to trigger the browser's print functionality: 

window.print();




Regards 

Murali

UserImage.jpg
Cesar Ge

Hi   @Murali Manoharan V ,

I want to call the browser's print function to print this grid. Do you know how to do it with JS? If you know other methods, please let me know as well. Thank you for your help. 

When I use window.print(), it prints the entire page, but I only want to print this grid. 

2024-05-02 09-49-04
Murali Manoharan V
Champion
Solution

Yeah we can @Cesar Ge 

Add this JS in Scripts

function printSpecificContainer(contId) {

    var container = document.getElementById(contId); // Get the container

    if (container) {

        var printWindow = window.open('', '_blank'); // Open a new blank window

        var styles = document.head.innerHTML; // Get all styles from the main document


        printWindow.document.write('Print');

        printWindow.document.write(styles); // Include the styles in the print window

        printWindow.document.write('');

        printWindow.document.write(container.innerHTML); // Write the container's content

        printWindow.document.write('');

        printWindow.document.close(); // Close the document to finish writing

        printWindow.focus(); // Focus on the print window

        printWindow.print(); // Trigger the print dialog

        printWindow.close(); // Optionally close the print window after printing

    } else {

        alert("Container not found!");

    }

}


Then In Screen's property add the same as required script

In Print on click call, add js with the grid's widget id as input parameter and call the print function: printSpecificContainer($parameters.contId);


Hope it will help you

Regards

Murali

UserImage.jpg
Cesar Ge

I will give it a try. Thank you very much for your help. 

UserImage.jpg
Cesar Ge

Hi   @Murali Manoharan V ,

When I execute it, it doesn't print what I need. Do you know how to fix it? Thank you for your help. 

Here is the content of the gridI want to print. 

UserImage.jpg
Cesar Ge

Hi   @Murali Manoharan V , 

What I want to print is a grid, not a table. Thank you again for your help and I look forward to your response. 

UserImage.jpg
liu mingyang

hi. i try it . only got a blank print page on app .



2024-09-12 02-43-38
Deepsagar Dubey
Solution

Hello @Cesar Ge 

Here is a general solution, using CSS only, which I have verified to work.

@media print {  
body {    
  visibility: hidden;  
}  
#section-to-print {    
  visibility: visible;    
  position: absolute;    
  left: 0;    
  top: 0;  
}
}

Replace the #section-to-print with a container Id or grid id to which content you want to print.

You can take a reference of a working solution in below links -

Code Link
Browser Preview Link

In preview link Use the browser's Print command (e.g. control-P or command-P). The print preview should show only the given id content. Everything else should not appear.

I hope it'll help you.

Thanks
Deep 

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