1500字范文 > angular 打印 lodop 引入css样式

angular 打印 lodop 引入css样式

时间：2022-03-31 23:44:39

官网地址

/LodopDemo.html

本机需要安装lodap综合版

/download.html

下载的压缩包内部会有一个名叫LodopFuncs.js的文件

自己找个位置引入

修改内部代码改为导出

angular中打印lodop里面传入css不能像 vue 一样可以直接引入css这里就要用到ts内部定义一个样式导出传入这是下面我写的一个例子

html

<div class="lawFirm"><div id="form1" #form1><span class="relative position-one">{{dateList.$displays.practiceOrg}}</span><span class="relative position-two">{{dateList.properties.qualificationNumber}}</span><span class="relative position-third">{{dateList.$displays.practiceType}}</span></div><div class="print-button"><button class="btn" nz-button nzType="primary" (click)='printCertificate("form1")'>打印</button></div></div>

简单的举个例子这里的样式是scss 里面的样式只要你不写成行内式就无法打印出来

lodop只能打印行内样式或者引入的样式

这是我内部的分级打印样式跟页面样式区分开

style.ts就是我要打印的样式

打印样式

单独导出就可以这里样式控制的只是打印样式跟页面显示无关可以放心大胆改

js页面

别忘了引入这两个文件

import {getLodop } from '../../../../assets/lib/LodopFuncs.js'import {partTimePrintStyle } from './style.js'; createOneFormPage(name) {this.LODOP = getLodop();this.LODOP.PRINT_INIT('打印');this.LODOP.SET_PRINT_STYLE('FontSize', 18);// this.LODOP.SET_PRINT_STYLE('FontColo', "red");this.LODOP.SET_PRINT_PAGESIZE(1, 200, 150, '');// this.LODOP.SET_PRINT_STYLE('Bold', 1);this.LODOP.ADD_PRINT_TEXT(50, 231, 260, 39, '打印页面部分内容');var styleHtml = "<html><head><style>" + partTimePrintStyle + "</style>" + "<head><body>" + document.getElementById(name).innerHTML + "</body></html>"this.LODOP.ADD_PRINT_HTML("0%", "0%", "100%", "100%", styleHtml);}printCertificate(name) {this.createOneFormPage(name);this.LODOP.PRINT(); //打印// this.LODOP.PREVIEW(); //预览}

样式拼接起来**var styleHtml = “” + “” + document.getElementById(name).innerHTML + “”

这样基本就没什么问题了剩下的就是一些官网的基础属性自己去看看自己需要的就好了

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。