Vue.js——使用LODOP打印表格文件

用到的打印工具是LODOP。

项目环境是vue-cli搭建的，组件库是ant design vue。

1、在需要打印的页面引入插件。

<script>
 import { getLodop } from '@/utils/LodopFuncs'
</script>

 

2、绘制要打印的表格内容

此处不要用组件库的<a-table>去写，用原生的<table><caption><tr><th><td>等标签去写。

举个栗子：

<table border="1" id=”box“>
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

　　

 

？ ：写的时候遇到了一个问题，<caption>标签写完后显示在<table>下方，而不是上方，因为antd的样式覆盖了，所以需要修改一下。

<caption style="caption-side: top;">table标题</caption>

3、打印事件

LODOP有专门打印表格的方法。文档地址

使用打印HTML内容的方法：ADD_PRINT_TABLE(intTop,intLeft,intWidth,intheight,strHTML);用超文本打印

举个栗子：

exportTable(){
　　const LODOP = getLodop()
　　LODOP.PRINT_INIT('打印table表格')
　　LODOP.ADD_PRINT_TABLE(20, 0, '80%', '100%', document.getElementById('box').innerHTML)
 　 LODOP.PREVIEW()
}

以上，就可以打印表格内容啦。

 LODOP.PREVIEW()这个方法可以预览打印效果，选择打印机，方便调试。