结合 layui。
弹出框内容样式如下： 红框表示，左右的内边距。

图一

打印预览的样式如下：红框表示，左右的内边距。

图二

要根据图二的左右内边距，去修改图一的左右内边距。不然会影响正文内容高度的判断。

封装自定义lodop打印函数的时候，可以使用 ：

function print() {

    //引入LodopFuncs.js 为前提

    let LODOP = getLodop();

    $.get('../css/custom.css', function(res) {

         let style = `<link href="../css文件路径" rel="stylesheet" />`   //可多个 ，比如像 print.css。

         let html = $('#所需要打印的父div').innerHTML;

         //如有需要，可以进行高度判断，进行分页

         let htmlHeight = $('#所需要打印的父div').outerHeight(true);

         //拼接 style 和 html

         let strFormHtml = `${style}<body> ${html} </body>`

         // 调用自带的api

         LODOP.ADD_PRINT_HTM(60, 0, "100%", "90%", strFormHtml);

　 }

}　　

　　===================================分割线===================================

针对 page-break-before：always，失效

本来是已经调试完毕了的。但是突然又出现了Bug。最后查出是因为 z-index的问题所影响了。

解决办法：

　　给有position:relative的父元素设置 z-index: 1;

　　而设置为position: absolute的签章标签 移除 z-index;

采坑 - LODOP，打印预览的更多相关文章

  1. 基于Metronic的Bootstrap开发框架经验总结（9）--实现Web页面内容的打印预览和保存操作

    在前面介绍了很多篇相关的<Bootstrap开发框架>的系列文章,这些内容基本上覆盖到了我这个Bootstrap框架的各个主要方面的内容,总体来说基本达到了一个稳定的状态,随着时间的推移可 ...

  2. LODOP中预览界面查看打印机的可打区域具体值

    LODOP在打印预览的时候,如果选择的打印机是真实打印机,会发现可能会有虚线,不同打印机虚线的位置不同,这个虚线是打印机的可打区域,Lodop无法控制. 可打区域,顾名思义,就是打印机可以打印的区域, ...

  3. （转）基于Metronic的Bootstrap开发框架经验总结（9）--实现Web页面内容的打印预览和保存操作

    http://www.cnblogs.com/wuhuacong/p/5147368.html 在前面介绍了很多篇相关的<Bootstrap开发框架>的系列文章,这些内容基本上覆盖到了我这 ...

  4. 怎么在MindManager中查看打印预览

    在MindManager2016思维导图中打印导图之前,可以先进行预览,MindManager和其他很多应用程序一样都带有打印预览功能,该功能提供了再次检查的机会,避免打印出错,MindManager ...

  5. 关闭rdlc报表打印预览后，关闭客户端，抛出异常“发生了应用程序级的异常 将退出”

    问题:关闭rdlc报表打印预览后,关闭客户端,抛出异常“发生了应用程序级的异常 将退出” 办法:在容纳ReportViewer的窗体后台代码中,添加如下代码即可 protected override ...

  6. .NET网页打印以及使用打印需要注意的事项(可能会引起VS崩溃的现象、打印预览后关闭功能不管用)

    这两天进行给网页添加打印.打印预览.页面设置的功能.遇到了以下几个问题 [1]在网上查找了一些打印方法,一开始还可以用,后来不知道动到了哪里,点击vs中拆分或者切换到另一个设计和源代码显示方式,就会引 ...

  7. QNDataSet打印预览自动关闭问题

    问题:打印预览后,数据集自动关闭 解决: TQNDataSet = class(TFDMemTable) private protected procedure PSReset; override; ...

  8. JS 打印功能代码可实现打印预览、打印设置等

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or ...

  9. CVE-2013-3908 Internet Explorer打印预览功能可导致信息泄露

    原文:http://masatokinugawa.l0.cm/2014/11/ie-printpreview-infoleak.html 问题1: 在IE9和以前的版本当中进行打印预览操作时,IE会取 ...

随机推荐

  1. Nginx安装及配置反向代理

    本片博客记录在ubuntu16下安装nginx,以及如何实现负载均衡 安装nginx 如果是新机器,安装相关依赖环境 sudo apt install build-essential sudo apt ...

  2. 100本Python机器学习、深度学习电子书，免费送！

    此套电子书收集于网络,如有侵权请联系删除!!! 此套电子书仅用于个人学习,请勿用于商业获利,造成后果自负!!! 这套电子书包括:机器学习.深度学习.数据科学入门.神经网络等 获取资源地址:链接: ht ...

  3. 文件批量生成IO流读写

    /// <summary> /// 生成文件的 /// </summary> /// <param name="calssName"></ ...

  4. PhantomJS抓取中文文档乱码

    使用PhantomJs抓取百度标题乱码 var url="http://www.baidu.com" var page=require('webpage').create() pa ...

  5. SSH框架之Hibernate第四篇

    Hibernate中有两套实现数据库数据操作的方式 : hibernate前3天讲解的都是 : hibernate自己的操作方式(纯XML配置文件的方式) 另一种方式是基于JPA的操作方式(通过注解的 ...

  6. 【Angular】父组件监听子组件事件(传参)

    Angular官方文档Demo地址:>component-interaction#parent-listens-for-child-event 举一个自己在写的项目

  7. [转]Outlook 2016 will not display Web linked images

    本文转自:https://community.spiceworks.com/topic/1952626-outlook-2016-will-not-display-web-linked-images ...

  8. Zookeeper学习(一)

    shell角度 API角度 Zookeeper可单节点,可分布式 作用: distributed coordination(分布式协调) 同一时间只有一个对外提供服务,另外的就是standy. 当ac ...

  9. 43-安装 Docker Machine

    前面我们的实验环境中只有一个 docker host,所有的容器都是运行在这一个 host 上的.但在真正的环境中会有多个 host,容器在这些 host 中启动.运行.停止和销毁,相关容器会通过网络 ...

  10. Shell—常见报错问题

    bash:$'\r': command not found 造成这个问题的原因是Windows环境下换行的“\r”到了Linux环境下不能够识别了,因为Linux环境下默认的换行符为“\n”,我们只需 ...