angular 打印 lodop 引入css样式

官网地址
http://www.lodop.net/LodopDemo.html

本机需要安装lodap综合版
http://www.lodop.net/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就是我要打印的样式
打印样式

const partTimePrintStyle = `
.lawFirm {position: relative;padding-top: 19px;text-align: center;background-color: #fff;
}.relative {position: absolute;z-index: 2;top: 204px;font-size: 16px;}.relative-tac {position: absolute;z-index: 2;width: 220px;top: 204px;text-align: center;font-size: 16px;}.position-one {left: 80px;top: 90px}.position-two {left: 80px;top: 150px;}.position-third {left: 80px;top: 215px;}
`export {partTimePrintStyle
}

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

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 + “”
**
这样基本就没什么问题了剩下的就是一些官网的基础属性自己去看看自己需要的就好了

angular 打印 lodop 引入css样式相关推荐

css样式引入形式php,引入css样式表的四种方式介绍
一.使用STYLE属性: 将STYLE属性直接加在个别的元件标签里. 这种用法的优点是可灵巧应用样式於各标签中,但是缺点则是没有整篇文件的『统一性』. 二.使用STYLE标签: 将样式规则写在标签之 ...
网页设计的css样式,网页设计引入CSS样式的五种方式_css
一.使用STYLE属性将STYLE属性直接加在个别的元件标签里,<元件(标签) STYLE="性质(属性)1: 设定值1; 性质(属性)2: 设定值2; -} 例如: <TD ...
外链式样式表_引入CSS样式表（书写位置）
CSS初识 CSS(Cascading Style Sheets) 美化样式 CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体.大小.对齐方式等).图片 ...
require.js引入css文件,[DikeJS]RequireJS引入CSS样式文件（五）
在实际开发组件时,我们常常需要关注组件的样式,样式如何定义,以及样式如何引用,我关注此问题时也纠结了一小下,不过还好,RequireJS周边给我们提供了丰富的插件,我们可以直接使用css.js,具体的 ...
html5内嵌式格式,如何使用内嵌式引入css样式表
引入方法:将CSS代码集中写在HTML文档的" "头部标签中,并且用"". 本教程操作环境:windows7系统.CSS3&&HTML5版.De ...
在html中加入外部css样式,如何引入CSS样式表？
CSS用于修饰网页样式,但是,如果希望CSS修饰的样式起作用,就必须在html档中引入CSS样式表.引入样式表的常用方式有三种,即行内式.内嵌式.外链式,具体介绍如下. 1.行内式行内式也称内联样式 ...
引入CSS样式表的三种方式
引入CSS样式表的三种方式行内样式通过标签的style属性来设置元素的样式,其基本语法格式如下: <h1 style="color:red;">style属性的应用 ...
html中引入CSS样式表的3种方式
1. 引入CSS样式表(书写位置) 1.1 三种样式表总结(位置) 样式表优点缺点使用情况控制范围行内样式表书写方便,权重高没有实现样式和结构相分离较少控制一个标签(少) 内部样式表 ...
HTML外部样式表如何引入CSS样式
HTML外部样式表如何引入CSS样式链入式是把所有的样式放在一个或多个外部样式表文件中,这个文件是以 css 为扩展名的,通过 link 标签,将外部样式表(css命名的外部样式文件)链接到 ...

angular 打印 lodop 引入css样式

angular 打印 lodop 引入css样式相关推荐

最新文章

热门文章