前端pdf打印

白与黑 2022-04-04 19:47:00 1305℃ 24168 0条


前端打印pdf,相对来说比较方便,而且打印出来的效果与页面上表现出来的基本一致;而且可以随时控制需要打印的区域、需要的样式、特殊字符也能完美的打印出来;相对于后端PHP打印PDF来说,还是比较不错

总的来说,打印的核心还是调用浏览自带的打印函数,window.print(),下面总结了主要的几种打印方法,各有优缺点

方法一

window.print();
window.close();

此方法是最原始的方法,可以直接打印当前网页的全部内容,缺点是不能控制需要打印的区域以及打印的样式(可通过link标签的media="print"来专门针对打印时设置不同的样式)

方法二

var iframe = document.createElement('iframe');
// ie下打印时,iframe会在页面中闪一下,所以设置推出屏幕外
iframe.setAttribute('style','position:absolute;width:0px;height:0px;left:-500px;top:-500px;');
document.body.appendChild(iframe);
// str为需要打印的html代码
iframe.contentDocument.write(str);
iframe.contentWindow.print();
iframe.contentDocument.close();
document.body.removeChild(iframe);

此方法需要在当前页面创建一个iframe,有可能会破坏当前页面的布局

方法三

var printWindow = window.open();
printWindow.document.write(str);
printWindow.print();
printWindow.close();

此方法是在新窗口开启打印操作,优点是原网址不影响后续操作,缺点是新窗口可能会被浏览器拦截

方法四

// 打印插件依赖jQuery
<script src="https://libs.baidu.com/jquery/1.7.0/jquery.min.js"></script>
// jQuery Migrate是应用迁移辅助插件,是用于高级版本兼容低级版本辅助插件。
// 例如jQuery版本用的是1.x,计划升级到3.x,就可以在页面删除1.x版本,换成3.x版本,如果有脚本错误,
// 就引入jquery-migrate插件用于兼容低版本,同时也显示低版本方法替换成新版本方法的方案。
<script  src="https://lib.baomitu.com/jquery-migrate/3.4.0/jquery-migrate.min.js"></script>
// 打印插件https://github.com/DoersGuild/jQuery.print
<script src="http://doersguild.github.io/jQuery.print/jQuery.print.js"></script>
<script>
   $(function(){
      $("#myElementId").print({
            globalStyles: true, // 是否使用父级样式
            mediaPrint: false,  // 是否使用media='print'的css样式;会被globalStyles选项覆盖
            stylesheet: null,   // 要包含的外部样式表的URL
            noPrintSelector: ".no-print", // 不想打印的元素的jQuery选择器,默认为".no-print"
            iframe: true, // 是否使用一个iframe来替代打印表单的弹出窗口,true为在本页面进行打印,false新开一个页面打印,可以去掉页眉页脚中不喜欢的标题和网址,默认为true
            append: null, // 将内容添加到打印内容的后面
            prepend: null,// 将内容添加到打印内容的前面,可以用来作为要打印内容
            manuallyCopyFormValues: true,  // 打印时是否更新的表单数据
            deferred: $.Deferred().done(function () {}),// 回调函数
            timeout: 750, // 从iframe或者新窗口加载打印数据的超时时间
            title: null,  // 打印标题
            doctype: '<!doctype html>'
    });
   })
</script>

使用插件打印,只需要传递唯一选择器即可,如果传递的不是唯一的选择器,例如传递的是class选择器,并且该选择器在页面上有多个,则在打印时只会打印第一个class选择器当中的内容

方法四拓展:

方法四打印时需要传递一个选择器,然后通过$(selector)转换为了jQuery对象,既然这样的话,那就可以$(str),str为HTML字符串,这样的话,得到的也是jQuery对象,这样一来,就比较灵活了,该str既可以是后端传递过来的,也可以是通过jQuery获取页面元素得来的:

<script>
  // 通过ajax获取HTML或者$(selector).html()或者前端拼接得到HTML
  var str = '<div>我是打印内容</div>';
  $(str).print(/*options*/);
</script>

页面打印效果相关属性介绍

//@page:    size:landscape 横向打印
//                portrait:纵向打印   
//                A4  portrait: A4纸张,纵向打印
//           margin: 边距,边距过大,会出现空白页;
//                   0:去掉页眉页脚
//                   22px 10px 16px:因处理页眉页脚问题导致自动分页后打印不全的解决方法
//           page-break-after: avoid  页面避免出现空白页
//           -webkit-print-color-adjust:exact;  打印元素背景色,行内样式无需此操作
//           -moz-print-color-adjust:exact;
//           -ms-print-color-adjust:exact;
//            print-color-adjust:exact;
// 表格跨页显示时,若需要表格的表头表尾在每页都显示,thead{display: table-header-group}tfoot{display: table-footer-group;}
//                 若不需要:thead,tfoot{display:table-row-group;}

// 表格分页时,内容不截断table tr,table thead,table tfoot{page-break-inside:avoid;}

// 强制分页,在需要分页的地方,加上如下代码:<div style="page-break-after:always;"></div>
// 表格列表,如果存在样式transform,则可能会导致表头边框样式失效
// orphans设置当元素内部发生分页时必须在页面底部保留的最少行数
// widows设置当元素内部发生分页时必须在页面顶部保留的最少行数

完整实例

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="">
    <style>
        body {margin:0;padding:0;box-sizing: border-box;font-size: 14px;}
        table {width: 100%;border: 1px solid #000;border-collapse: collapse;line-height: 1.5em;}
        thead th {border: 1px solid #000;}
        td {padding: 0.6em 0;text-align: center;border: 1px solid #000;}
        th {font-weight: normal;}

        @media screen { .page-header, .page-footer { display: none; } }
        @media print {
            .print-box { width: 100%; box-sizing: border-box; }
            .print-box .print-table,
            .print-box .print-table > thead,
            .print-box .print-table > tbody,
            .print-box .print-table > tfoot,
            .print-box .print-table > thead > tr,
            .print-box .print-table > tbody > tr,
            .print-box .print-table > tfoot > tr,
            .print-box .print-table > thead > tr > td,
            .print-box .print-table > tbody > tr > td,
            .print-box .print-table > thead > tr > th,
            .print-box .print-table > tfoot > tr > td {
                border: none !important;
                padding:0 !important;
                width: 100% !important;
                overflow: hidden;
            }

            /*页眉页脚,如若不需要页眉页脚,则只需将高度设置为0即可*/
            .print-box .page-header, .print-box .page-footer {
                display: block !important;
                width: 100% !important;
                position: fixed !important;
                height: 22px !important;
                background-color: #aaa !important;
                color: #fff;
                text-align: center !important;
            }
            .print-box .page-header {top: 0 !important;}
            .print-box .page-footer {bottom: 0 !important;}
            .print-box .page-header-space, .print-box .page-footer-space {width: 100% !important;}
            .print-box .page-header-space{margin-top:22px;}
            .print-box .page-footer-space{margin-bottom:22px;}
            /*内容*/
            .content thead, .content tfoot {display: table-row-group !important;}
            .content thead, .content tfoot, .content tr, .content th, .content td {page-break-inside: avoid !important}
            .content tr {page-break-after: auto !important;}
        }
        @page {
            size: A4 landscape; /*portrait*/
            margin: 0 12px;
            page-break-after: avoid;
            -webkit-print-color-adjust: exact;
            -moz-print-color-adjust: exact;
            -ms-print-color-adjust: exact;
            print-color-adjust: exact;
            color-adjust: exact;
        }
    </style>
    <script src="https://libs.baidu.com/jquery/1.7.0/jquery.min.js"></script>
    <script src="./jquery-migrate-1.2.1.min.js"></script>
    <script src="./jQuery.print.js"></script>
    <script>
        $(function () {
            function myPrint(print_html){
                if(!print_html || $(print_html).length<=0){
                    return;
                }

                // 最外层必须含有父盒子
                var str = `<div class="print-box">
                            <div class="page-header">页眉</div>
                            <div class="page-footer">页脚</div>
                            <table class="print-table">
                                <thead><tr><td><div class="page-header-space"></div></td></tr></thead>
                                <tbody>
                                <tr>
                                    <td class="content">`;
                
                str += handleHtml(print_html);
                
                str += `        </td>
                        </tr>
                      </tbody>
                      <tfoot><tr><td><div class="page-footer-space"></div></td></tr></tfoot>
                      </table>
                  </div>`;

                $(str).print({
                    globalStyles: true,// 是否使用父级样式
                    mediaPrint: false, // 是否使用media='print'的css样式;会被globalStyles选项覆盖
                    stylesheet: null,    // 要包含的外部样式表的URL
                    noPrintSelector: null,//不想打印的元素的jQuery选择器,默认为".no-print"
                    iframe: true, //是否使用一个iframe来替代打印表单的弹出窗口,true为在本页面进行打印,false新开一个页面打印,可以去掉页眉页脚中不喜欢的标题和网址,默认为true
                    append: null, //将内容添加到打印内容的后面
                    prepend: null,//将内容添加到打印内容的前面,可以用来作为要打印内容
                    deferred: $.Deferred().done(function () {}),//回调函数
                    timeout: 10000,//从iframe或者新窗口加载打印数据的超时时间
                    title: null,
                    manuallyCopyFormValues: true,//打印时是否更新的表单数据
                    doctype: '<!doctype html>'
                });
            }
            
            // html字符串处理
            function handleHtml(html_str){
                var new_html_str = $('<div />',{html:html_str});
                // jq方式处理:添加类、处理style等
                /*
                new_html_str.find('thead th').each(function(){
                   var transform    = $(this).css('transform');
                   if(transform){
                       $(this).css('transform','none');
                   }
                });
               */
                return new_html_str.html();
            }

            // 打印
            var print_html = $('.print-area').html();
            myPrint(print_html);

        })

    </script>
</head>
<body>
<div class="print-area">
    <table>
        <thead>
            <tr>
                <th>项目</th>
                <th>本月预算</th>
                <th>本月实际发生</th>
                <th>绝对差异(%)</th>
                <th>相对差异(%)</th>
                <th>累计预算</th>
                <th>累计实际发生</th>
                <th>绝对差异(%)</th>
                <th>相对差异(%)</th>
                <th>本月实际占当季预算比例</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>项目</td>
                <td>3000</td>
                <td>2600</td>
                <td>400</td>
                <td>400</td>
                <td>20400</td>
                <td>16900</td>
                <td>16900</td>
                <td>16900</td>
                <td>16900</td>
            </tr>
            <tr>
                <td>项目1</td>
                <td>3000</td>
                <td>2600</td>
                <td>400</td>
                <td>400</td>
                <td>20400</td>
                <td>16900</td>
                <td>16900</td>
                <td>16900</td>
                <td>16900</td>
            </tr>
            <tr>
                <td>项目1</td>
                <td>3000</td>
                <td>2600</td>
                <td>400</td>
                <td>400</td>
                <td>20400</td>
                <td>16900</td>
                <td>16900</td>
                <td>16900</td>
                <td>16900</td>
            </tr>
            <tr>
                <td>项目1</td>
                <td>3000</td>
                <td>2600</td>
                <td>400</td>
                <td>400</td>
                <td>20400</td>
                <td>16900</td>
                <td>16900</td>
                <td>16900</td>
                <td>16900</td>
            </tr>
            <tr>
                <td>项目1</td>
                <td>3000</td>
                <td>2600</td>
                <td>400</td>
                <td>400</td>
                <td>20400</td>
                <td>16900</td>
                <td>16900</td>
                <td>16900</td>
                <td>16900</td>
            </tr>
            <tr>
                <td>项目1</td>
                <td>3000</td>
                <td>2600</td>
                <td>400</td>
                <td>400</td>
                <td>20400</td>
                <td>16900</td>
                <td>16900</td>
                <td>16900</td>
                <td>16900</td>
            </tr>
            <tr>
                <td>项目1</td>
                <td>3000</td>
                <td>2600</td>
                <td>400</td>
                <td>400</td>
                <td>20400</td>
                <td>16900</td>
                <td>16900</td>
                <td>16900</td>
                <td>16900</td>
            </tr>
            <tr>
                <td>项目1</td>
                <td>3000</td>
                <td>2600</td>
                <td>400</td>
                <td>400</td>
                <td>20400</td>
                <td>16900</td>
                <td>16900</td>
                <td>16900</td>
                <td>16900</td>
            </tr>
            <tr>
                <td>项目1</td>
                <td>3000</td>
                <td>2600</td>
                <td>400</td>
                <td>400</td>
                <td>20400</td>
                <td>16900</td>
                <td>16900</td>
                <td>16900</td>
                <td>16900</td>
            </tr>
            <tr>
                <td>项目1</td>
                <td>3000</td>
                <td>2600</td>
                <td>400</td>
                <td>400</td>
                <td>20400</td>
                <td>16900</td>
                <td>16900</td>
                <td>16900</td>
                <td>16900</td>
            </tr>
            <tr>
                <td>项目1</td>
                <td>3000</td>
                <td>2600</td>
                <td>400</td>
                <td>400</td>
                <td>20400</td>
                <td>16900</td>
                <td>16900</td>
                <td>16900</td>
                <td>16900</td>
            </tr>
            <tr>
                <td>项目1</td>
                <td>3000</td>
                <td>2600</td>
                <td>400</td>
                <td>400</td>
                <td>20400</td>
                <td>16900</td>
                <td>16900</td>
                <td>16900</td>
                <td>16900</td>
            </tr>
            <tr>
                <td>项目1</td>
                <td>3000</td>
                <td>2600</td>
                <td>400</td>
                <td>400</td>
                <td>20400</td>
                <td>16900</td>
                <td>16900</td>
                <td>16900</td>
                <td>16900</td>
            </tr>
            <tr>
                <td>项目1</td>
                <td>3000</td>
                <td>2600</td>
                <td>400</td>
                <td>400</td>
                <td>20400</td>
                <td>16900</td>
                <td>16900</td>
                <td>16900</td>
                <td>16900</td>
            </tr>
            <tr>
                <td>项目1</td>
                <td>3000</td>
                <td>2600</td>
                <td>400</td>
                <td>400</td>
                <td>20400</td>
                <td>16900</td>
                <td>16900</td>
                <td>16900</td>
                <td>16900</td>
            </tr>
            <tr>
                <td>项目1</td>
                <td>3000</td>
                <td>2600</td>
                <td>400</td>
                <td>400</td>
                <td>20400</td>
                <td>16900</td>
                <td>16900</td>
                <td>16900</td>
                <td>16900</td>
            </tr>
            <tr>
                <td>项目1</td>
                <td>3000</td>
                <td>2600</td>
                <td>400</td>
                <td>400</td>
                <td>20400</td>
                <td>16900</td>
                <td>16900ddd<br>ewwrewrerew<br>poiiuuyy</td>
                <td>16900</td>
                <td>16900</td>
            </tr>
            <tr>
                <td>项目1</td>
                <td>3000</td>
                <td>2600</td>
                <td>400</td>
                <td>400</td>
                <td>16900ddd<br>ewwrewrerew<br>poiiuuyy</td>
                <td>16900</td>
                <td>16900</td>
                <td>16900</td>
                <td>16900</td>
            </tr>
            <tr>
                <td>项目1</td>
                <td>3000</td>
                <td>2600</td>
                <td>400</td>
                <td>400</td>
                <td>20400</td>
                <td>16900</td>
                <td>16900</td>
                <td>16900</td>
                <td>16900</td>
            </tr>
            <tr>
                <td>项目1</td>
                <td>3000</td>
                <td>2600</td>
                <td>400</td>
                <td>400</td>
                <td>20400</td>
                <td>16900</td>
                <td>16900</td>
                <td>16900</td>
                <td>16900</td>
            </tr>
            <tr>
                <td>项目1</td>
                <td>3000</td>
                <td>2600</td>
                <td>400</td>
                <td>400</td>
                <td>20400</td>
                <td>16900</td>
                <td>16900</td>
                <td>16900</td>
                <td>16900</td>
            </tr>
            <tr>
                <td>项目1</td>
                <td>3000</td>
                <td>2600</td>
                <td>400</td>
                <td>400</td>
                <td>20400</td>
                <td>16900</td>
                <td>16900</td>
                <td>16900</td>
                <td>16900</td>
            </tr>
            <tr>
                <td>项目1</td>
                <td>3000</td>
                <td>2600</td>
                <td>400</td>
                <td>400</td>
                <td>20400</td>
                <td>16900</td>
                <td>16900</td>
                <td>16900ddd<br>ewwrewrerew<br>poiiuuyy</td>
                <td>16900</td>
            </tr>
            <tr>
                <td>项目1</td>
                <td>3000</td>
                <td>2600</td>
                <td>400</td>
                <td>400</td>
                <td>20400</td>
                <td>16900</td>
                <td>16900</td>
                <td>16900</td>
                <td>16900</td>
            </tr>
            <tr>
                <td>项目1</td>
                <td>3000</td>
                <td>2600</td>
                <td>400</td>
                <td>400</td>
                <td>20400</td>
                <td>16900</td>
                <td>16900</td>
                <td>16900</td>
                <td>16900</td>
            </tr>
            <tr>
                <td>项目1</td>
                <td>3000</td>
                <td>2600</td>
                <td>400</td>
                <td>400</td>
                <td>20400</td>
                <td>16900</td>
                <td>16900</td>
                <td>16900</td>
                <td>16900</td>
            </tr>
            <tr>
                <td>项目1</td>
                <td>3000</td>
                <td>2600</td>
                <td>400</td>
                <td>400</td>
                <td>20400</td>
                <td>16900</td>
                <td>16900</td>
                <td>16900</td>
                <td>16900</td>
            </tr>
            <tr>
                <td>项目1</td>
                <td>3000</td>
                <td>2600</td>
                <td>400</td>
                <td>400</td>
                <td>20400</td>
                <td>16900</td>
                <td>16900</td>
                <td>16900</td>
                <td>16900</td>
            </tr>
            <tr>
                <td>项目1</td>
                <td>3000</td>
                <td>2600</td>
                <td>400</td>
                <td>400</td>
                <td>20400</td>
                <td>16900</td>
                <td>16900</td>
                <td>16900</td>
                <td>16900</td>
            </tr>
            <tr>
                <td>项目1</td>
                <td>3000</td>
                <td>2600</td>
                <td>400</td>
                <td>400</td>
                <td>20400</td>
                <td>16900</td>
                <td>16900</td>
                <td>16900</td>
                <td>16900</td>
            </tr>
            <tr>
                <td>项目1</td>
                <td>3000</td>
                <td>2600</td>
                <td>400</td>
                <td>400</td>
                <td>20400</td>
                <td>16900</td>
                <td>16900</td>
                <td>16900</td>
                <td>16900</td>
            </tr>
            <tr>
                <td>项目1</td>
                <td>3000</td>
                <td>2600</td>
                <td>400</td>
                <td>400</td>
                <td>20400</td>
                <td>16900</td>
                <td>16900</td>
                <td>16900</td>
                <td>16900</td>
            </tr>
            <tr>
                <td>项目1</td>
                <td>3000</td>
                <td>2600</td>
                <td>400</td>
                <td>400</td>
                <td>20400</td>
                <td>16900</td>
                <td>16900</td>
                <td>16900</td>
                <td>16900</td>
            </tr>
            <tr>
                <td>项目1</td>
                <td>3000</td>
                <td>2600</td>
                <td>400</td>
                <td>400</td>
                <td>20400</td>
                <td>16900</td>
                <td>16900</td>
                <td>16900</td>
                <td>16900</td>
            </tr>
            <tr>
                <td>项目1</td>
                <td>3000</td>
                <td>2600</td>
                <td>400</td>
                <td>400</td>
                <td>20400</td>
                <td>16900</td>
                <td>16900</td>
                <td>16900</td>
                <td>16900</td>
            </tr>
            <tr>
                <td>项目1</td>
                <td>3000</td>
                <td>2600</td>
                <td>400</td>
                <td>400</td>
                <td>20400</td>
                <td>16900</td>
                <td>16900</td>
                <td>16900</td>
                <td>16900</td>
            </tr>
            <tr>
                <td>项目1</td>
                <td>3000</td>
                <td>2600</td>
                <td>400</td>
                <td>400</td>
                <td>20400</td>
                <td>16900</td>
                <td>16900</td>
                <td>16900</td>
                <td>16900</td>
            </tr>
            <tr>
                <td>项目1</td>
                <td>3000</td>
                <td>2600</td>
                <td>400</td>
                <td>400</td>
                <td>20400</td>
                <td>16900</td>
                <td>16900</td>
                <td>16900</td>
                <td>16900</td>
            </tr>
            <tr>
                <td>项目1</td>
                <td>3000</td>
                <td>2600</td>
                <td>400</td>
                <td>400</td>
                <td>20400</td>
                <td>16900</td>
                <td>16900</td>
                <td>16900</td>
                <td>16900</td>
            </tr>
                        
        </tbody>
        <tfoot>
            <tr style="color:red;font-weight: bold;">
                <td>合计</td>
                <td>3000</td>
                <td>2600</td>
                <td>400</td>
                <td>400</td>
                <td>20400</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
           </tr>
        </tfoot>
    </table>
</div>
</body>

</html>

效果

打印效果

标签: 前端, HTML, JavaScript, Ajax

非特殊说明,本博所有文章均为博主原创。

评论啦~