结合 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. [Java 开发利器Lombok] 常用注解演示

    在以往的对象模型编码时,我们需要写一大堆的get/set以及不同的构造函数等.Lombok为我们提供了一个非常好的插件形式. 在大多数的项目中,只需要使用到以下集中Annotation就足够了,如果需 ...

  2. Web前端基础(13):JavaScript(七)

    1. BOM JavaScript基础分为三部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for语句等. DOM:文档对象模型,操作网页上的元 ...

  3. IO相关Demo

    这几天复习了IO相关知识 只为记录,好记性不如烂笔头 有误请指正 ありがとうございます. 我的公众号 作者:晨钟暮鼓c个人微信公众号:程序猿的月光宝盒 1.判断存在,存在改名,并延迟删除,不存在新建 ...

  4. css知识笔记:垂直居中(别只看,请实操!!!)

    css实现元素的垂直居中. (尝试采用5W2H方法说明): 别只看,请实操!!! What: 1.这篇文档主要描述元素水平方向居中的几种最常见和最实用的几种方式,并说明优缺点. 2.写这篇文章的目的, ...

  5. ABP入门教程12 - 展示层实现增删改查-脚本

    点这里进入ABP入门教程目录 创建目录 在展示层(即JD.CRS.Web.Mvc)的\wwwroot\view-resources\Views\下新建文件夹Course //用以存放Course相关脚 ...

  6. 2019 DevOps 必备面试题——持续集成篇

    原文地址:https://medium.com/edureka/devops-interview-questions-e91a4e6ecbf3 原文作者:Saurabh Kulshrestha 翻译君 ...

  7. docker 修改镜像和容器的存放路径(最新自己实践了第三种方法)

    docker info :查看docker的存储等相关信息. 将路径修改至挂载磁盘中 前提:磁盘已挂载成功 方法一: 1.停止docker 服务 service docker stop 2.备份数据到 ...

  8. MATLAB实例:对称双随机矩阵

    MATLAB实例:对称双随机矩阵 作者:凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ 双随机矩阵(doubly stochastic matrix):元素属 ...

  9. Day11 - Python基础11 模块学习——optparse

    Python 有两个内建的模块用于处理命令行参数: 一个是 getopt,<Deep in python>一书中也有提到,只能简单处理 命令行参数: 另一个是 optparse,它功能强大 ...

  10. 201871010136-赵艳强《面向对象程序设计(java)》第一周学习总结

    项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/  这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/ ...