如何在jsp中从多选项卡单个表单打印PDF答案

【问题标题】：How to print PDF from multi tab single form in jsp如何在jsp中从多选项卡单个表单打印PDF
【发布时间】：2018-01-24 19:14:22
【问题描述】：

我有一个 HTML 表单，但使用 display:none 选项构造为多个选项卡。

每个选项卡都有几个部分，这些部分将根据前一个选项卡部分显示块/无。

我想在表单提交后出现的确认感谢页面中添加打印按钮，该按钮应该以与 HTML 页面相同的结构打印整个表单（仅包含填充值的字段）。

<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>

我尝试使用窗口打印功能，但这仅适用于当前可见部分。

这段代码是在很久以前写的，没有考虑到这个要求。那么有人可以为此提出一些解决方案吗？

【问题讨论】：

您可以使用 Javascript 库从所有选项卡（隐藏和可见）的页面内容构建内容并打印到 PDF -> stackoverflow.com/questions/742271/…

标签： javascript jquery html forms jsp

【解决方案1】：

您将使用 print.css 文件。在 print.css 文件中，您可以将所有选项卡设置为 display:block; .这样：

在您的 HTML 或视图文件中

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

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

在您的 print.css 文件中

#section1, #section2{display:block}

或

您可以在主 CSS 文件中执行 @media 查询，该文件也将处理打印。

 #section1,#section2{display:none;}

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

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

查看 JSFiddle。

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

【讨论】：

解决方案看起来很棒，我尝试添加它，但我仍然在打印窗口中看到当前显示内容。无法看到我填写的所有选项卡部分。
你碰巧有一个 JS Fiddle 吗？简单的例子就足够了。打印 CSS 是非常标准的，我已经多次使用选项卡完成此操作。
确保你的 print.css 文件也在你的 CSS 文件的 HTML 列表中。我编辑了我的答案以包含一个带有打印按钮的 JSFiddle 示例。你会看到结果。
你简直太棒了。有了您的建议，我尝试 !important 让它在 CSS 所在的任何地方执行。它工作正常。但是有一个小的区别，在屏幕中我们有具有三列布局的列网格（如 Bootstrap 响应式），但在 PDF 中它出现在不同行中的每一列。我们可以做些什么让它像屏幕三栏一样吗？ @ClosDesign
@Mohan，我相信 Bootstrap 使用 display: inline-block 或类似的东西。您实际上只是用您在 Print CSS 中的样式覆盖 Bootstrap 的样式表。 Bootstrap 有各种 .print... 类，如果你想将这些类添加到你的元素中，那么当它们被打印时，它们会根据需要打印。您可以查看 Bootstrap CSS 文件的底部。 maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/… ，但是，我相信您也想使用自己的 CSS 我认为 'display:inline-block' 应该在您的打印 CSS 中做您需要的。