前言
本次介绍的是我在日常开发中比较常用的到打印插件lodop.js
1.lodop.js是什么呢？
有人说她是Web打印控件，因为她能打印、在浏览器中以插件的形式出现，用简单一行语句就把整个网页打印出来。 我使用的是其中的打印预览功能，通过html及css代码设计出打印的样式模板，比较常用到的就有条码打印、表格打印等。
优点：提供多种打印模式，运用方便。
缺点：调试麻烦，无法实时更新，容易出现打印页面塌陷。
2.相关安装包下载
地址:www.c-lodop.com/download.ht… 根据个人情况进行相对应版本的下载。
3.多种打印样式示例
（1）表格打印 组件代码
<div class="page">
<table cellspacing="0" cellpadding="0" class="table">
<thead>
<tr class="col_design">
<td style="width: 9mm" />
<td style="width: 25mm" />
<td style="width: 40mm" />
</tr>
<tr>
<td colspan="9" class="main-title">
表格单据
<span class="top-right">编号:1111</span>
<div ref="qrcode11111" class="qrcodestyle" />
</td>
</tr>
<tr class="td-title">
<td colspan="1" style="border-bottom: none !important">序号</td>
<td colspan="1" style="border-bottom: none !important">物料编号</td>
<td colspan="1" style="border-bottom: none !important">物料名称</td>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in data" :key="index">
<td style="text-align: center">{{ index + 1 }}</td>
<td>{{ item.materialID }}</td>
<td>{{ item.materialDesc }}</td>
</tr>
</tbody>
<tfoot>
<tr class="tb-footer1">
<td colspan="10"><span tdata="pageNO">第##页</span>，<span tdata="pageCount">共##页</span></td>
</tr>
</tfoot>
</table>
</div>
</template>
<script>
export default {
name: 'PrintReceipt',
props: {
data: { type: Array, default: () => [] },
page: { type: Number, default: 1 },
currentPage: { type: Number, default: 1 },
thead: { type: Object, default: () => {} }
},
computed: {},
mounted() {},
methods: {}
</script>
<style scoped>
/* 需与打印样式同步 */
html,
body {
padding: 0;
margin: 0;
}
。。。。。。。。。
</style>
方法调用
首先需要在运用页面引入getlodop方法：import { getLodop } from '@/utils/lodop'
if (LODOP.statusHtml) {
this.$alert(LODOP.statusHtml, '打印提示', {
dangerouslyUseHTMLString: true,
showClose: false,
showConfirmButton: false
})
} else {
this.printBegin = true
this.printData = this.multipleData
let strStyle = '<style>'
strStyle += 'html,body {padding: 0;margin: 0;}'
。。。。。。。
strStyle += '</style>'
this.$nextTick(() => {
let strHtml = document.getElementById('CustomerReturn').innerHTML
LODOP.PRINT_INIT('表格单据打印')
LODOP.SET_PRINT_PAGESIZE(1, xx, xx, '') // 1纵向、2横向，纸宽，纸高，A4规格
// LODOP.SET_SHOW_MODE('LANDSCAPE_DEFROTATED', 1)
let printTemplate = strStyle + '<body>' + strHtml + '</body>'
LODOP.ADD_PRINT_TABLE('xx', 'xx', 'xx', 'xx', printTemplate) // Top,Left,Width,Height
LODOP.NewPageA() // 强制分页，前面的自动分页，后面的页面会在自动分页的后面添加新页面。
LODOP.PREVIEW()
this.printBeginCustomerReturn = false
})
}
特别注意：
1.两个地方的css样式必须保持一致，因为一个是预览，一个是真实打印效果，必须保持一致，才能保证最后的打印无误
2.如果是打印表格需要页尾，最好使用这段尾页代码，不用自己去写，之前我自己就是自己去计算行数去计算页码及总页数，导致总会出现过页塌陷或者页码显示到第二页去的现象。
<td ><span tdata="pageNO">第##页</span>，<span tdata="pageCount">共##页</span></td>
3.使用LODOP.NewPageA()对表格的主数据进行强制的分页，效果就是当底部的高度不足以容下最后一行表格数据及页尾时候会自动进行跳页显示，不会导致页面的塌陷。
4.在进行表格打印时，最好使用LODOP.ADD_PRINT_TABLE（）与LODOP.NewPageA()进行表格主体的强制换行分页，使用LODOP.ADD_PRINT_HTML（）会出现页面塌陷的问题。
（2）条码打印
我进行条码打印其实也是运用的表格的布局方式进行的，所以和上面的代码大差不大。
但是要注意的是比如生成二维码的打印要注意下异步的问题，当批量打印预览时，会出现二维码已生成但是插件后调用导致当预览组件打开时候报错二维码未生成的问题。
let qrcode = new QRCode(this.$refs.qrcode, {
width: 130,
height: 130,
render: 'canvas',
correctLevel: QRCode.CorrectLevel.H
})
qrcode.makeCode(this.data[0].barcode)
let canvas = document.querySelector('canvas')
var strDataURI = canvas.toDataURL('image/png')
canvas.outerHTML = '<img alt="Scan me!" src=' + strDataURI + '>'
qrcode.clear()
this.$emit('change', true)
}
可以对生成的二维码进行监听生成即可。
先更新这部分，后续如有需要，在更新其他样式的打印模板！！！
