How to print PDF from multi tab single form in jsp

Question

I have single HTML form, but structured as multiple tab using display:none option.

And each tab has few section which will display block / none based on previous tab section.

I want to add print button in confirmation thank page which appear after form submission, that should print whole form (only with fields filled with value) in a same structure like HTML page.

<form>
    <div id="section1">
        <input type="text" id="name1"> 
        <input type="text" id="name2" style="display: block;"> 
    </div>
    <div id="section2" style="display: block;">
    </div>
    <input type="submit">
</form>

I tried to use window print function, but that works only for current visible section.

This code was wrote long back without having this requirement in mind. so can some one suggestion some solution for this?

You can use a Javascript library to build the contents from the page contents for all the tabs (hidden and visible) and print to PDF -> https://stackoverflow.com/questions/742271/generating-pdf-files-with-javascript — daddygames, Jan 24 '18 at 19:26

ClosDesign · Accepted Answer · 2018-01-25T19:52:08.767

1

You would use a print.css file. In the print.css file you would set all your tabs to display:block; . This way:

In your HTML or view file

   <!--MAKE SURE THIS IS LAST CSS FILE REFERENCE IN YOUR HTML <head>-->

  <link rel="stylesheet" media="print" href="print.css">

In your print.css file

#section1, #section2{display:block}

OR

You can do a @media query in your main CSS file that will handle the print as well.

 #section1,#section2{display:none;}

 /*MEDIA PRINT TO HANDLE PRINT TABS. MUST GO AT END OF CSS FILE.*/

 @media print {
     #section1,#section2{display:block;}
 }

Check out the JSFiddle.

https://jsfiddle.net/8u3nhzoL/1/

edited Jan 25 '18 at 19:52

answered Jan 24 '18 at 19:27

ClosDesign

3,894
9
39
62

Solution looks awesome and i tried adding that, but still i am seeing only current display content in print window. Not able to see all the tab section which i filled. – Mohan Jan 25 '18 at 15:47
Do you happen to have a JS Fiddle? Simple example would suffice. Print CSS is pretty standard and I have done this with tabs multiple times. – ClosDesign Jan 25 '18 at 19:40
1

Make sure you print.css file is last in your HTML list of CSS files too. I edited my answer to include a JSFiddle example with a print button. You will see an outcome. – ClosDesign Jan 25 '18 at 19:48
You're simple awesome. With you're above suggestion, i tried !important to make it execute wherever css was. And it works fine. But with one small difference, in screen we have column grid (like Bootstrap responsive) with three column layout but in PDF it is appearing each column in different line. Can we do anything to make it same like screen three column? @ClosDesign – Mohan Jan 26 '18 at 02:00
1

@Mohan, I believe Bootstrap uses a display: inline-block or something like that. You are essentially just overwriting Bootstrap's stylesheet with your style in the Print CSS. Bootstrap has a variety of .print... classes if you want to add those classes to your elements so when they get printed they print as needed. You can look at the bottom of the Bootstrap CSS file. https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css , However, I believe you want to also use your own CSS I think 'display:inline-block' should do what you need in the your Print CSS. – ClosDesign Jan 26 '18 at 16:57
Thanks @ClosDesign, it works with own CSS style "display: inline-block;". – Mohan Jan 29 '18 at 18:25

How to print PDF from multi tab single form in jsp

1 Answers1