前端页面打印

  • 需要插件jQuery.print.js
 // Default options
 var defaults = {
 globalStyles: true,
 mediaPrint: false,
 stylesheet: null,
 noPrintSelector: ".no-print",
 iframe: true,
 append: null,
 prepend: null,
 manuallyCopyFormValues: true,
 deferred: $.Deferred(),
 timeout: 750,
 title: null,
 doctype: '<!doctype html>'
 };

globalStyles:true,//是否包含父文档的样式,默认为true
mediaPrint:false,//是否包含media=’print’的链接标签。会被globalStyles选项覆盖,默认为false
stylesheet:null,//外部样式表的URL地址,默认为null
noPrintSelector:”.no-print”,//不想打印的元素的jQuery选择器,默认为”.no-print”
iframe:true,//是否使用一个iframe来替代打印表单的弹出窗口,true为在本页面进行打印,false就是说新开一个页面打印,默认为true
append:null,//将内容添加到打印内容的后面
prepend:null,//将内容添加到打印内容的前面,可以用来作为要打印内容

其中要注意css样式
 @page{
     size:a4;/*打印时的页面大小*/
     margin:30.0pt40.0pt72.0pt30.0pt;/*页边距*/
 }
 @media print{
     /*打印内容的样式,注意单位为pt*/
     /*分页*/
     if(需要元素前分页){
        元素{
            page-break-befor:always;
        }
      } else{
        元素{
            page-break-after:always;
           }
    }
}

(42 Posts)