结合 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. 使用Redis实现延时任务(二)

    前提 前一篇文章通过Redis的有序集合Sorted Set和调度框架Quartz实例一版简单的延时任务,但是有两个相对重要的问题没有解决: 分片. 监控. 这篇文章的内容就是要完善这两个方面的功能. ...

  2. C/C++ 中的宏/Macro

    宏(Macro)本质上就是代码片段,通过别名来使用.在编译前的预处理中,宏会被替换为真实所指代的代码片段,即下图中 Preprocessor 处理的部分. C/C++ 代码编译过程 - 图片来自 nt ...

  3. webpack + typescript + babel打包*.min.js文件的环境配置

    将多个*.ts文件打包成一个*.min.js文件的开发配置 1.初始化 npm init 新建以下文件目录: 2.安装依赖: "devDependencies": { " ...

  4. 在做nav-bar部分点击路由跳转相同地址时，控制台报错问题。

    报错信息: Uncaught (in promise) NavigationDuplicated {_name: "NavigationDuplicated", name: &qu ...

  5. linux下unzip解压报错“symlink error: File name too long”怎么办？提供解决方案。

    点击上方↑↑↑蓝字[协议分析与还原]关注我们 " 分享unzip工具的一个bug." 最近在研究菠菜站,中间用到了Spidermonkey,碰到一些小波折,在这里分享出来,以便大家 ...

  6. 三大免费开源的php语言cms系统 用好它们让你一天建好一个网站

    php语言只所以在web开发领域占据半壁江山,是因为它有太多的生态,成熟的框架体系,广泛的开源cms系统.建设网站的时候,都想提升开发效率,效率就是成本,如果你用原生php语言开发一个项目,既要设计数 ...

  7. iOS与JS交互-WKWebView

    iOS移动端应用中,一般都会嵌入网页,在网页中处理的结果需要反馈给iOS让移动端做出相应的处理(例如页面跳转), 1.webview的配置 2.代理方法中拿到事件进行处理 二.JS中的配套出发事件 当 ...

  8. Android 媒体格式

    音频格式和编解码器 格式/编解码器 编码器 解码器 细节 支持的文件类型/容器格式 AAC LC • • 支持单声道/立体声/ 5.0 / 5.1内容,标准采样率为8至48 kHz. •3GPP(.3 ...

  9. Octave中的一些常用操作

    >> 5+6ans = 11>> 1~=2ans = 1 %1表示true,0表示false>> 1~=1    %1不等于1ans = 0>> a=2 ...

  10. JUC-0-JUC简介

    Java JUC  简介   在 Java 5.0 提供了 java.util.concurrent (简称 JUC )包,在此包中增加了在并发编程中很常用 的实用工具类,用于定义类似于线程的自定义子 ...