使用带有 Xporability/css-to-pdf 的 CSS 打印媒体答案

【问题标题】：Using CSS print media with Xporability/css-to-pdf使用带有 Xporability/css-to-pdf 的 CSS 打印媒体
【发布时间】：2015-01-13 16:29:13
【问题描述】：

我正在使用https://github.com/Xportability/css-to-pdf 将 HTML 表格加载到 PDF 中。除了能够在表格之间插入分页符外，一切正常。使用此代码：

<!doctype html>
<html lang="us">
<head>
   <meta charset="utf-8">
   <title>XEPjqPlugin</title> 
   <style>
       @media print {
           .noprint {display:none;}
           .print {width:100%; display:table-header-group;}
           body, article {width: 100%; margin: 0; padding: 0; font-size: 10pt; font-family:'Times New Roman',Times,serif;}
           table { page-break-after: always;}
       }
   </style>
   <script src="js/jquery-1.11.1.min.js"></script>
   <script src="js/xepOnline.jqPlugin.js"></script>
</head>
<body>
    <div class="report">
        <div id="tablePage">
           <input class="noprint" name="tablepage" type="checkbox">
               <a class="noprint nodec" id="printit" href="#"
                   onclick="return xepOnline.Formatter.Format('tablePage',{pageMargin:'0.5in'});"
                   ><img src="css/Images/button-print.png" />
           <div>
                <table id="table1" border="1">
                   <tr>
                        <th>Column 1</th>
                        <th>Column 2</th>
                        <th>Column 3</th>
                   </tr>
                   <tr>
                        <td rowspan="2">Row 1 Cell 1</td>
                        <td>Row 1 Cell 2</td><td>Row 1 Cell 3</td>
                   </tr>
                   <tr>
                        <td>Row 2 Cell 2</td>
                        <td>Row 2 Cell 3</td>
                   </tr>
                   <tr>
                        <td colspan="3">Row 3 Cell 1</td>
                   </tr>
               </table>
           </div>
           <div>
                <table id="table2" border="1">
                   <tr>
                        <th>Column 1</th>
                        <th>Column 2</th>
                        <th>Column 3</th>
                   </tr>
                   <tr>
                        <td rowspan="2">Row 1 Cell 1</td>
                        <td>Row 1 Cell 2</td><td>Row 1 Cell 3</td>
                   </tr>
                   <tr>
                        <td>Row 2 Cell 2</td>
                        <td>Row 2 Cell 3</td>
                   </tr>
                   <tr>
                        <td colspan="3">Row 3 Cell 1</td>
                   </tr>
               </table>
           </div>
        </div>
    </div>   
</body>
</html>

@media 打印样式没有任何效果。 .noprint 和分页符无效。

【问题讨论】：

您可以发布您的示例的链接吗？我做了一些不同的事情，并在此页面中复制了 HTML：cloudformatter.com/CSS2Pdf.Demos.TestSummerNote 并在第二个 div 上添加了“page-break-before”，它工作正常。
我已经设法重现了这个问题，并且正在寻找解决方案。作为一种解决方法，将样式表规则移动到外部样式表是可行的。谢谢，我们会跟进。
我尝试将代码编辑成简短的内容，包括所有内容，这可以说明问题，因为我无法提供链接并且不熟悉创建小提琴。实际的应用程序具有外部样式。凯文，你到底做了什么不同的事情来让分页符起作用？
好的，我与用户 kstubs 合作，我们设置了您的示例。我们注意到有问题的 JS 没有处理“样式”标签中的 @media 打印指令。我们修复了 JS 并更新了 GITHUB。请再次测试，因为你说你的样式是外部的，这一直有效。
我注意到您上面没有结束“a”标签，我认为这是问题所在。

标签： css css-to-pdf

【解决方案1】：

已发布源更新。从当前文档中读取嵌入的 @media 样式时存在错误。我已经测试了这个问题，现在已经解决了。对于未来的错误报告，请在 Git 中报告。谢谢。 Git 项目位于：https://github.com/Xportability/css-to-pdf

【讨论】：

我为这个 jsfiddle.net/503rdexa/1 添加了一个小提琴，这个小提琴似乎可以按照你想要的方式工作。
我还应该注意两件事，我不知道哪两个是固定的。我会留给你测试。（1）您的源中有一个“a”标签，您从未关闭过，并且（2）您似乎在正文 div 上有一些冲突/重复的@media 打印规则。我删除了这两个，它工作。我可以回去测试，但我很确定这是未闭合的“a”标签。
还有一个附加说明，虽然我发布了一个“小提琴”，但它并不是测试此类事情的最佳环境。您应该在您的环境中进行测试，因为 fiddle 在所有这些内容中都使用 iframe 来搜索相关内容。整个应用程序的性能以及结果可能会受到页面上所有 iframe 的影响。
@KevinBrown 我需要下载带有下面表格的 SVG
@KevinBrown 我将使用什么 srctype ？