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

蔚落 2022-12-13 14:27 347阅读 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 条评论，347人围观）

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

相关阅读

相关 LODOP 打印

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

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

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

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

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

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

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

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

相关 WEB打印Lodop，JSP

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

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

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

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

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

相关 javaScript使用Lodop实现网页表格套打功能

一、引入Lodop的js <script language="javascript" src="LodopFuncs.js"></script>

太过爱你忘了你带给我的痛/ 2022年06月18日 11:54/ 0 赞/ 782 阅读

相关 lodop实现打印的功能(上)

哎.编辑起来太烦了.重新写一个吧.详情优化版见lodop实现打印的功能(下) 奶茶店杯子上的标签使用的是lodop的一个前端插件吧... head头中引入标签打印的js

r囧r小猫/ 2022年06月02日 09:59/ 0 赞/ 283 阅读

相关 lodop实现打印的功能(下)

下文都是重点,先码代码,再讲原因: jsp页面引入lodopfuncs.js文件 <%--添加打印lodop.js--%> <script src=

- 日理万妓/ 2022年06月01日 02:53/ 0 赞/ 554 阅读

相关 Lodop打印参数方法参考

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

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

相关 Web打印--Lodop API

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

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