zoukankan      html  css  js  c++  java
  • 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()这个方法可以预览打印效果,选择打印机,方便调试。
  • 相关阅读:
    爬虫框架scrapy(1)持久化存储的多种方式及多页爬取数据
    爬虫之selenium
    redis相关
    爬虫之数据解析
    爬虫之requests模块2
    爬虫之requests模块
    HTTP和HTTPS协议
    Pymongo使用
    MongoDB
    python网络编程之黏包问题
  • 原文地址:https://www.cnblogs.com/xiaoyui/p/13803569.html
Copyright © 2011-2022 走看看