打印如下表格(含图片)
1.在vue项目中,创建一个js文件,引入以下代码
var CreatedOKLodop7766= null
export function needCLodop ( ) {
try {
var ua= navigator. userAgent
if ( ua. match ( / Windows\sPhone / i ) != null ) return true
if ( ua. match ( / iPhone|iPod / i ) != null ) return true
if ( ua. match ( / Android / i ) != null ) return true
if ( ua. match ( / Edge\D?\d+ / i ) != null ) return true
var verTrident= ua. match ( / Trident\D?\d+ / i )
var verIE= ua. match ( / MSIE\D?\d+ / i )
var verOPR= ua. match ( / OPR\D?\d+ / i )
var verFF= ua. match ( / Firefox\D?\d+ / i )
var x64= ua. match ( / x64 / i )
if ( ( verTrident== null ) && ( verIE== null ) && ( x64!== null ) )
return true
else if ( verFF !== null ) {
verFF = verFF[ 0 ] . match ( / \d+ / )
if ( ( verFF[ 0 ] >= 42 ) || ( x64!== null ) ) return true
} else if ( verOPR !== null ) {
verOPR = verOPR[ 0 ] . match ( / \d+ / )
if ( verOPR[ 0 ] >= 32 ) return true
} else if ( ( verTrident== null ) && ( verIE== null ) ) {
var verChrome= ua. match ( / Chrome\D?\d+ / i )
if ( verChrome !== null ) {
verChrome = verChrome[ 0 ] . match ( / \d+ / )
if ( verChrome[ 0 ] >= 42 ) return true
}
}
return false
} catch ( err) { return true }
}
if ( needCLodop ( ) ) {
var head = document. head || document. getElementsByTagName ( "head" ) [ 0 ] || document. documentElement
var oscript = document. createElement ( "script" )
oscript. src = "http://localhost:8000/CLodopfuncs.js?priority=1"
head. insertBefore ( oscript, head. firstChild )
oscript = document. createElement ( "script" )
oscript. src = "http://localhost:18000/CLodopfuncs.js?priority=0"
head. insertBefore ( oscript, head. firstChild )
}
export function getLodop ( oOBJECT, oEMBED) {
var strHtmInstall= "<br><font color='#FF00FF'>打印控件未安装!点击这里<a href='install_lodop32.exe' target='_self'>执行安装</a>,安装后请刷新页面或重新进入。</font>"
var strHtmUpdate= "<br><font color='#FF00FF'>打印控件需要升级!点击这里<a href='install_lodop32.exe' target='_self'>执行升级</a>,升级后请重新进入。</font>"
var strHtm64_Install= "<br><font color='#FF00FF'>打印控件未安装!点击这里<a href='install_lodop64.exe' target='_self'>执行安装</a>,安装后请刷新页面或重新进入。</font>"
var strHtm64_Update= "<br><font color='#FF00FF'>打印控件需要升级!点击这里<a href='install_lodop64.exe' target='_self'>执行升级</a>,升级后请重新进入。</font>"
var strHtmFireFox= "<br><br><font color='#FF00FF'>(注意:如曾安装过Lodop旧版附件npActiveXPLugin,请在【工具】->【附加组件】->【扩展】中先卸它)</font>"
var strHtmChrome= "<br><br><font color='#FF00FF'>(如果此前正常,仅因浏览器升级或重安装而出问题,需重新执行以上安装)</font>"
var strCLodopInstall= "<br><font color='#FF00FF'>CLodop云打印服务(localhost本地)未安装启动!点击这里<a href='http://www.c-lodop.com/download/CLodop_Setup_for_Win32NT_https_3.008Extend.zip' target='_self'>执行安装</a>,安装后请刷新页面。</font>"
var strCLodopUpdate= "<br><font color='#FF00FF'>CLodop云打印服务需升级!点击这里<a href='CLodop_Setup_for_Win32NT.exe' target='_self'>执行升级</a>,升级后请刷新页面。</font>"
var LODOP
try {
var isIE = ( navigator. userAgent. indexOf ( 'MSIE' ) >= 0 ) || ( navigator. userAgent. indexOf ( 'Trident' ) >= 0 )
if ( needCLodop ( ) ) {
try { LODOP = getCLodop ( ) } catch ( err) { }
if ( ! LODOP && document. readyState!== "complete" ) {
alert ( "C-Lodop没准备好,请稍后再试!" )
return
}
if ( ! LODOP ) {
} else {
if ( CLODOP . CVERSION < "3.0.0.2" ) {
if ( isIE) document. write ( strCLodopUpdate)
else document. documentElement. innerHTML= strCLodopUpdate+ document. documentElement. innerHTML
}
if ( oEMBED && oEMBED. parentNode) oEMBED. parentNode. removeChild ( oEMBED)
if ( oOBJECT && oOBJECT. parentNode) oOBJECT. parentNode. removeChild ( oOBJECT)
}
} else {
var is64IE = isIE && ( navigator. userAgent. indexOf ( 'x64' ) >= 0 )
if ( oOBJECT!= undefined || oEMBED!= undefined ) {
if ( isIE) LODOP = oOBJECT
else LODOP = oEMBED
} else if ( CreatedOKLodop7766== null ) {
LODOP = document. createElement ( "object" )
LODOP . setAttribute ( "width" , 0 )
LODOP . setAttribute ( "height" , 0 )
LODOP . setAttribute ( "style" , "position:absoluteleft:0pxtop:-100pxwidth:0pxheight:0px" )
if ( isIE) LODOP . setAttribute ( "classid" , "clsid:2105C259-1E0C-4534-8141-A753534CB4CA" )
else LODOP . setAttribute ( "type" , "application/x-print-lodop" )
document. documentElement. appendChild ( LODOP )
CreatedOKLodop7766= LODOP
} else LODOP = CreatedOKLodop7766
if ( ( LODOP == null ) || ( typeof ( LODOP . VERSION ) == "undefined" ) ) {
if ( navigator. userAgent. indexOf ( 'Chrome' ) >= 0 )
document. documentElement. innerHTML= strHtmChrome+ document. documentElement. innerHTML
if ( navigator. userAgent. indexOf ( 'Firefox' ) >= 0 )
document. documentElement. innerHTML= strHtmFireFox+ document. documentElement. innerHTML
if ( is64IE) document. write ( strHtm64_Install)
else if ( isIE) document. write ( strHtmInstall)
else document. documentElement. innerHTML= strHtmInstall+ document. documentElement. innerHTML
return LODOP
}
}
if ( LODOP . VERSION < "6.0" ) {
if ( ! needCLodop ( ) ) {
if ( is64IE) document. write ( strHtm64_Update)
else if ( isIE) document. write ( strHtmUpdate)
else document. documentElement. innerHTML= strHtmUpdate+ document. documentElement. innerHTML
}
return LODOP
}
return LODOP
} catch ( err) { alert ( "getLodop出错:" + err) }
}
2.在组件中引入上步骤的js文件,{ getLodop } 是上述代码中的一个方法
3.实例化打印对象
this.LODOP = getLodop( ) // 创建一个LODOP对象
let counter = this.LODOP.GET_PRINTER_COUNT( ) // 获取打印机个数
for ( let i = 0 ; i < counter; i++) {
this.printerList.push( { // 将打印机存入printerList数组中
name: this.LODOP.GET_PRINTER_NAME( i) ,
value: i
} )
}
即可得到打印机列表 如下:
4.准备好要打印的html,我这里是根据后端传回的数据动态生成的HTML
var html = ''
for ( let d = 0 ; d < this.orderDocuments.length; d++) {
html += `
< h4 style = "text-align: center;" > 发货单< /h4 >
< div style = "margin-top: 16px;display: flex;align-items: center;justify-content: space-around;" >
< div> 订单编号:${ this.orderDocuments[ d] .order_sn} < /div>
< div> 成团时间:${ this.orderDocuments[ d] .pay_time} < /div>
< div> 收件人:${ this.orderDocuments[ d] .receiver_phone} < /div>
< div> 收件电话:${ this.orderDocuments[ d] .receiver_phone} < /div>
< /div>
< table role = "table" style = "float:left;margin:0;padding:0px;width:100%;border:1px solid #000;" >
< thead>
< tr>
< th style = "border: 1px solid black" rowspan = "1" type = "header" name = "goods_name" > 商品名称< /th>
< th style = "border: 1px solid black" rowspan = "1" type = "header" name = "goods_spec" > 规格< /th>
< th style = "border: 1px solid black" rowspan = "1" type = "header" name = "goods_price" > 单价( 元) < /th>
< th style = "border: 1px solid black" rowspan = "1" type = "header" name = "goods_count" > 数量< /th>
< th style = "border: 1px solid black" rowspan = "1" type = "header" name = "goods_money" > 金额< /th>
< /tr>
< /thead>
< tbody class = "chris-table-body" >
${ this.orderDocuments[ d] .goods.map( i = > {
return ` < tr class = "chris-table-row first last" role = "row" >
< td style = "border: 1px solid black" type = "body" name = "goods_name" > ${i.goods_name} < /td>
< td style = "border: 1px solid black" type = "body" name = "goods_spec" > ${i.goods_spec} < /td>
< td style = "border: 1px solid black" type = "body" name = "goods_price" > ${i.goods_price} < /td>
< td style = "border: 1px solid black" type = "body" name = "goods_count" > ${i.goods_count} < /td>
< td style = "border: 1px solid black" type = "body" name = "goods_money" > ${i.goods_money} < /td>
< /tr> `
} ) }
< /tbody>
< /table>
< div style = "margin: 8px; text-align: center" class = "border" >
< img :src= "${this.orderDocuments[ d] .wpcode} " style = "width: 100px;height: 100px;" alt = "" >
< /div>
`
}
var body = '<body>' + html + '</body>'
5.生成好数据后进行打印项配置,并打印
_this.LODOP.PRINT_INIT( '打印发货单' ) //打印初始化
_this.LODOP.SET_PRINTER_INDEX( _this.printer) //选择的打印机类型(注意这里是打印机下标,0开始的)
_this.LODOP.SET_PRINT_STYLE( 'FontSize' , 18 ) //设置对象风格
// this.LODOP.ADD_PRINT_TEXT( 50 , 521 , 130 , 39 , this.description) //增加纯文本项
_this.LODOP.SET_PRINT_PAGESIZE( 2 , 0 , 0 , 'A4' ) //设定纸张大小
_this.LODOP.SET_PRINT_MODE( 'PRINT_PAGE_PERCENT' , '55%' ) //设置缩放
_this.LODOP.SET_PREVIEW_WINDOW( 2 , 2 , 0 , 0 , 0 , '' ) //设置窗口
_this.LODOP.ADD_PRINT_HTM( 88 , 20 , 2000 , 2000 , body) // 增加超文本项(打印内容即为body内容)
// _this.LODOP.PREVIEW( ) // 设置预览(如果使用预览,每次打印前会弹出预览窗口,根据需要决定是否使用)
_this.LODOP.PRINT( )
6.打印效果如下
至此,一个简单的clodop就完成了,如有补充,请留言~~