結合 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;
