结合 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. 架构组件：基于Shard-Jdbc分库分表，数据库扩容方案

    本文源码:GitHub·点这里 || GitEE·点这里 一.数据库扩容 1.业务场景 互联网项目中有很多"数据量大,业务复杂度高,需要分库分表"的业务场景. 这样分层的架构 (1 ...

  2. （五十七）c#Winform自定义控件-传送带（工业）-HZHControls

    官网 http://www.hzhcontrols.com 前提 入行已经7,8年了,一直想做一套漂亮点的自定义控件,于是就有了本系列文章. GitHub:https://github.com/kww ...

  3. dataTable 表插入新行

    DataRow dr = dt.NewRow();//定义新行            dr["sumPrice"] = sumPrice;//对应字段赋值            d ...

  4. 松软科技web课堂:SQLServer之LEN() 函数

    LEN() 函数 LEN 函数返回文本字段中值的长度. SQL LEN() 语法 SELECT LEN(column_name) FROM table_name SQL LEN() 实例 我们拥有下面 ...

  5. 测试环境部署之填坑记录-Expected one result (or null) to be returned by selectOne(), but found: 2

    最近在部署性能测试环境的时候,环境 部署好以后,部分功能出现接口查询异常,问题现象: 拿到错误,肯定要先判断是前端还是后端代码的问题,最简单的方式是抓包查看: 以上是报错页面捕获的接口报错,很明显的接 ...

  6. go语言设计模式之bridge

    著名的桥接模式罗.. bridge.go package bridge import ( "errors" "fmt" "io" ) typ ...

  7. angular路由事件

    Angular 4检测路由变化,可以使用router.events来监听: 支持的事件类型: NavigationStart:导航开始 NavigationEnd:导航结束 NavigationCan ...

  8. STL pair类型的介绍

    pair标准库类型它定义在头文件utility中. 一个pair保存两个数据成员.类似容器,pair是一个用来生成特定类型的模板.当创建一个pair时,我们必须提供两个类型名,pair的数据成员将具有 ...

  9. CSP-S 2019初赛前后小记

    Preface 做完了初赛前的最后一场模拟赛,虽然这场做的挺好.但由于之前的一场难度很高,再加上自己犯了一些ZZ错误因此对初赛也有了一些不安之情 想起去年自己对于初赛的态度,实在是愧疚虽然去年文化课弃 ...

  10. Luogu P2570 [ZJOI2010]贪吃的老鼠

    Luogu P2570 [ZJOI2010]贪吃的老鼠 题目描述 奶酪店里最近出现了\(m\)只老鼠!它们的目标就是把生产出来的所有奶酪都吃掉.奶酪店中一天会生产\(n\)块奶酪,其中第\(i\)块的 ...