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

蔚落 2022-12-13 14:27 435阅读 0赞

用到的打印工具是[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有专门打印表格的方法。[文档地址][Link 1]

**使用打印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()这个方法可以预览打印效果，选择打印机，方便调试。

[LODOP]: http://www.lodop.net/LodopDemo.html
[Link 1]: http://www.lodop.net/demolist/PrintSample15.html

发表评论取消回复

表情：

评论列表（有 0 条评论，435人围观）

还没有评论，来说两句吧...

相关阅读

相关 LODOP 打印

[在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4...

叁歲伎倆/ 2024年04月19日 10:36/ 0 赞/ 104 阅读

相关 [亲测]vue使用C-lodop打印总结

*按照我步骤走不迷路** **1.[先来到官方网站][Link 1]** 下图中的1点击下载，下载后安装，傻瓜式安装方式就不再阐述了下图中的2点击下载，下载...

曾经终败给现在/ 2024年04月17日 05:29/ 0 赞/ 86 阅读

相关 HTML中使用Lodop打印

我们在项目中，会需要用到连接打印机进行打印订单数据信息等，本次我使用的是 Lodop 进行打印我们会用到 Lodop 的依赖文件 > 1、安装软件 > CLod

清疚/ 2023年06月28日 08:59/ 0 赞/ 39 阅读

相关畜禽免疫系统使用LODOP打印

<div class="btn_box"> <asp:Button ID="btnPrint" Text="预览并打印" runat="serv

向右看齐/ 2023年06月01日 03:28/ 0 赞/ 34 阅读

相关 vue使用lodop打印控件

1.下载 [http://www.lodop.net/download.html][http_www.lodop.net_download.html] Lodop发行包解压，安

你的名字/ 2023年02月25日 15:23/ 0 赞/ 51 阅读

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

用到的打印工具是[LODOP][]。项目环境是`vue-cli`搭建的，组件库是`ant design vue`。 1、在需要打印的页面引入插件。 <scr

蔚落/ 2022年12月13日 14:27/ 0 赞/ 436 阅读

相关 WEB打印Lodop，JSP

WEB打印Lodop，JSP 例子 http://download.csdn.net/detail/bjl373842798/7697975 资源中带有lodop完

た入场券/ 2022年08月10日 14:48/ 0 赞/ 262 阅读

相关 Web打印 Lodop打印控件 bootstrap框架

贴图 ![这里写图片描述][SouthEast] 知乎：显著提升程序员身心健康和工作效率的装备有哪些？笔记本： 1.[银河舰

偏执的太偏执、/ 2022年08月06日 01:25/ 0 赞/ 262 阅读

相关 Lodop打印参数方法参考

[https://blog.csdn.net/lijj\_html5/article/details/70208206][https_blog.csdn.net_lijj_ht

旧城等待，/ 2022年04月08日 15:53/ 0 赞/ 292 阅读

相关 Web打印--Lodop API

<table style="border-collapse:collapse;border-spacing:0px;font-size:12px;color:333333;fo

青旅半醒/ 2022年04月06日 03:11/ 0 赞/ 422 阅读