css - 将 CSS 打印媒体与 Xporability/css-to-pdf 结合使用

标签 css css-to-pdf

我正在使用 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 和分页符无效。

最佳答案

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

关于css - 将 CSS 打印媒体与 Xporability/css-to-pdf 结合使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26961205/

相关文章:

.net - IE8 CSS Right Float Breaking Parent 到左边

jquery-plugins - xep.cloudformatter.com : HTML to PDF. 如何更改 Content-Desposition header 响应的文件名?

javascript - 莫里斯图导出为 PDF?

html - 如何水平和垂直居中导航栏?

javascript - 将 d3 SVG 元素 float 到右上角 CSS

javascript - IE(或可能是 Javascript 库)两次添加 SVG 命名空间

javascript - css 到 PDF 使用 css2pdf@cloudformatter

javascript - onclick背景颜色变化

javascript - 悬停在 Firefox 中不起作用