结合 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. 【UR #5】怎样更有力气

    Problem Description 大力水手问禅师:"大师,很多事情都需要用很大力气才能完成,而我在吃了菠菜之后力气很大,于是就导致我现在非常依赖菠菜.我很讨厌我的现状,有没有办法少吃点 ...

  2. ASP.NET MVC教程二：ASP.NET MVC应用程序结构详解

    在上一篇文章中,讲解了一些MVC的概念,并且创建了第一个ASP.NET MVC项目,这篇文章将讲解ASP.NET MVC程序中的代码解构,新创建的MVC应用程序解构如下图所示: 一.App_Data ...

  3. WPF TreeView 虚拟化-设置滚动到选中项

    前言 列表滚动到具体的数据项? ListBox提供了简易快捷的滚动定位函数ScrollIntoView. TreeView树状结构列表,则没有此类方法,无法与ListBox一样,直接设置滚动到具体的数 ...

  4. (转)深入解析TensorFlow中滑动平均模型与代码实现

    本文链接:https://blog.csdn.net/m0_38106113/article/details/81542863 指数加权平均算法的原理 TensorFlow中的滑动平均模型使用的是滑动 ...

  5. maven仓库之第二篇

    1. 什么是maven? 它是一个软件开发的管理工具,主要管理的工作是:依赖管理,项目构建. 2. 使用maven的好处? 能够集中管理jar包,提供一键构建. 3. maven的安装及配置 配置:M ...

  6. Web 安全总结

    同源策略 如果两个 URL 的协议.域名和端口都相同,我们就称这两个 URL 同源. 同源策略限制了来自不同源的 JavaScript 脚本对当前 DOM 对象读和写的操作. 同源策略限制了不同源的站 ...

  7. vue $emit $on 从子组件传递数据给父组件

    原理是: 子组件使用$emit发送数据,父组件使用$on,或者v-on绑定, 来监听子组件发送的数据. 子组件: <button @click="sendChildData" ...

  8. 高性能go服务之高效内存分配

    高性能go服务之高效内存分配 手动内存管理真的很坑爹(如C C++),好在我们有强大的自动化系统能够管理内存分配和生命周期,从而解放我们的双手. 但是呢,如果你想通过调整JVM垃圾回收器参数或者是优化 ...

  9. Spring 事务 属性 详细

    学习东西要知行合一,如果只是知道理论而没实践过,那么掌握的也不会特别扎实,估计过几天就会忘记,接下来我们一起实践来学习Spring事务的传播属性. 传播属性 传播属性定义的是当一个事务方法碰到另一个事 ...

  10. mtu测试

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/jeromezmzx007/article ...