Vue使用lodop实现打印小结

2020-06-12 21:23:57易采站长站整理

export default {
data() {
return {
tabId: '',
tabName: '',
tableHead: tableHead,
tableBody: [] }
},
mounted() {

},
methods: {
// 打印报表
printReport() {
const LODOP = getLodop()
if (LODOP) {
var strBodyStyle = '<style>'
strBodyStyle += 'table { border-top: 1 solid #000000; border-left: 1 solid #000000; border-collapse:collapse; border-spacing:0;}'
strBodyStyle += 'caption { line-height:2em; }'
strBodyStyle += 'td { border-right: 1 solid #000000; border-bottom: 1 solid #000000; text-align:center; padding:2px 3px; font-size:11px;}'
strBodyStyle += '</style>' //设置打印样式
var strFormHtml = strBodyStyle + '<body>' + document.getElementById('tableId').innerHTML + '</body>' //获取打印内容
LODOP.PRINT_INIT('') //初始化
LODOP.SET_PRINT_PAGESIZE(2, 0, 0, 'A4') //设置横向
LODOP.ADD_PRINT_HTM('1%', '1%', '98%', '98%', strFormHtml) //设置打印内容
LODOP.SET_PREVIEW_WINDOW(2, 0, 0, 800, 600, '') //设置预览窗口模式和大小
LODOP.PREVIEW()
}
}
}
}
</script>