Javascript 如何在jsp中从多选项卡单表单打印PDF_Javascript_Jquery_Html_Forms_Jsp

Javascript 如何在jsp中从多选项卡单表单打印PDF

javascript jquery html forms jsp

Javascript 如何在jsp中从多选项卡单表单打印PDF,javascript,jquery,html,forms,jsp,Javascript,Jquery,Html,Forms,Jsp,我有一个HTML表单，但使用display:none选项将其结构化为多个选项卡并且每个选项卡都有几个部分，这些部分将根据以前的选项卡部分显示block/none 我想在表单提交后出现的确认感谢页面中添加print按钮，该按钮应该只打印整个表单，并使用与HTML页面相同的结构中填充值的字段 <form> <div id="section1"> <input type="text" id="name1"> <inp

我有一个HTML表单，但使用display:none选项将其结构化为多个选项卡

并且每个选项卡都有几个部分，这些部分将根据以前的选项卡部分显示block/none

我想在表单提交后出现的确认感谢页面中添加print按钮，该按钮应该只打印整个表单，并使用与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>

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

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

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

在HTML或视图文件中

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

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

或

您可以在主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

您可以使用Javascript库为所有隐藏和可见选项卡的页面内容构建内容，并打印到PDF->解决方案看起来很棒，我尝试添加了它，但我仍然只能在打印窗口中看到当前的显示内容。无法看到我填写的所有选项卡部分。你有JS小提琴吗？简单的例子就足够了。打印CSS是非常标准的，我已经用标签多次这样做了。确保你的Print.CSS文件也是CSS文件HTML列表中的最后一个。我编辑了我的答案，以包含一个带有打印按钮的JSFIDLE示例。你会看到结果的。你很简单，很棒。根据你的建议，我试过了！重要的是让它在css所在的位置执行。而且效果很好。但有一点不同，在屏幕上，我们有类似柱网的引导程序，有三列布局，但在PDF中，每列显示在不同的行中。我们能做些什么使它像屏幕上的三列一样吗@ClosDesign@Mohan，我相信Bootstrap使用的是显示：内联块或类似的东西。实际上，您只是用打印CSS中的样式覆盖引导的样式表。引导有多种。打印。。。类，如果要将这些类添加到元素中，那么当它们被打印时，它们会根据需要打印。您可以查看引导CSS文件的底部，不过，我相信您也希望使用自己的CSS，我认为“display:inline block”应该满足您在打印CSS中的需要。

 #section1,#section2{display:none;}

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

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