结合 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. mysql中concat函数的使用相关总结

    concat(str1,str2) 返回结果为连接参数产生的字符串.如有任何一个参数为NULL ,则返回值为 NULL. mysql> select concat('11','22','33') ...

  2. css基础,css选择器

    07.29自我总结 css基础 一.什么是CSS CSS是级联样式表 CSS术语标记语言,没有逻辑 CSS作用 完成网页内容的样式与布局 二.CSS的三种引入方式 1. 内联式 书写位置:在 head ...

  3. JS基础语法---总结

    JS是一门什么样的语言? 是一门解释性的语言 是一门脚本语言 是一门弱类型语言,声明变量都用var 是一门基于对象的语言 是一门动态类型的语言:            1. 代码(变量)只有执行到这个 ...

  4. [转]UiPath： How to Capture a Mouse Event on Hover Menus?

    本文转自:https://www.uipath.com/kb-articles/how-to-capture-mouse-event-on-hover-menus he Knowledgebase a ...

  5. 如何制作gif图片？教你把gif图片缩小100倍大小的妙招!

    移动互联网是短视频的时代,5G的到来更是让短视频蓬勃发展,视频的发展让人们看到了动态的机会,图片也需要动起来,图片动起来应该是比较早的,gif图片很早就有,我们常见的动态表情,现在用的比较多的是视频的 ...

  6. Export Receives The Errors ORA-1555 ORA-22924 ORA-1578 ORA-22922 (Doc ID 787004.1)

    Export Receives The Errors ORA-1555 ORA-22924 ORA-1578 ORA-22922 (Doc ID 787004.1) APPLIES TO: Oracl ...

  7. 前端常用的css代码

    1.垂直居中对齐 .vc{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); } .vc{ position: ...

  8. deepin系统右键刷新-解决增删改文件没有变化

    deepin 新建/删除/修改-->文件/文件夹后 目录不刷新解决方案 方法1: F5键刷新 方法2: 通过修改配置文件-->调整最大文件监控数量(建议使用这种方式) sudo vim / ...

  9. C# 二维数组 转换成 DataTable

    C# 数据转换 Overview C# 窗体操作中,有些比较特别的操作.但是为了方便我们不得不使用一些比较特别的手段. C#中二维数组转DataTable 首先,我们看一下我对二维数组的数据处理.这次 ...

  10. 05-Django模型（2）

    1.特殊查询 F和Q查询: 之前的查询都是模型对象的属性与常量值比较,两个属性怎么比较呢?使用F查询. F查询语法: from django.db.models import F F('属性名称') ...