Vue使用lodop实现打印小结

var head = document.head || document.getElementsByTagName('head')[0] || document.documentElement
var oscript = document.createElement('script')
// 让本机的浏览器打印(更优先一点)：
oscript = document.createElement('script')
oscript.src = 'http://localhost:8000/CLodopfuncs.js?priority=2'
head.insertBefore(oscript, head.firstChild)
// 加载双端口(8000和18000）避免其中某个端口被占用：
oscript = document.createElement('script')
oscript.src = 'http://localhost:18000/CLodopfuncs.js?priority=1'
head.insertBefore(oscript, head.firstChild)

// 下载loadLodop
function loadLodop() {
window.open('../../static/Lodop/CLodop_Setup_for_Win32NT.exe')
}

// ====获取LODOP对象的主过程：====
function getLodop() {
var LODOP
try {
LODOP = getCLodop()
if (!LODOP && document.readyState !== 'complete') {
MessageBox.alert('C-Lodop打印控件还没准备好，请稍后再试！')
return
}
return LODOP
} catch (err) {
MessageBox({
title: '温馨提示',
type: 'warning',
showCancelButton: true,
message: '您还未安装打印控件，点击确定下载打印控件，安装成功后刷新页面即可进行打印',
callback: res => {
if (res === 'confirm') {
loadLodop()
}
}
})
}
}

export default getLodop

<template>
 <div class="umess table-dialog">
 <!-- 表格组 -->
 <div class="umess table-main">
  <div class="title">{{ tabName }}</div>
  <!-- 导入导出 -->
  <div class="btn-top-list">
  <el-button type="primary" plain @click="exportReport">导出报表</el-button>
  <el-button type="primary" plain @click="printReport">打印报表</el-button>
  </div>
  <!-- 表格组 -->
  <div id="tableId" class="table-box">
  <table class="utable">
   <caption><b><font face="黑体" size="3">{{ tabName }}</font></b></caption>
   <thead>
   <tr v-for="(tr,index) in tableHead" :key="index">
    <td v-for="(item,i) in tr" :key="i" :colspan="item.cols" :rowspan="item.rows" :min-width="item.width">{{ item.value }}</td>
   </tr>
   </thead>
   <tbody>
   <tr v-for="(item,index) in tableBody" :key="index">
    <td v-for="(td, i) in item" :key="i" :colspan="td.cols" :rowspan="td.rows">
    <div class="td1">{{ td.value }}</div>
    </td>
   </tr>
   </tbody>
  </table>
  </div>
 </div>
 <!-- end -->
 </div>
</template>
<script>
import { tableHead, tableResolve } from '../excelTem/reportOne.js'
import getLodop from '@/api/lodop'								 
 2/3   首页 上一页 1 2 3 下一页 尾页