首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

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

作者：牛奶香橙 | 来源：互联网 | 2023-09-18 15:29
用到的打印工具是LODOP。项目环境是vue-cli搭建的，组件库是antdesignvue。1、在需要打印的页面引入插件。import{get

用到的打印工具是LODOP。

项目环境是vue-cli搭建的&＃xff0c;组件库是ant design vue。

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

<script>import { getLodop } from &＃39;&＃64;/utils/LodopFuncs&＃39;
</script>

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

此处不要用组件库的去写&＃xff0c;用原生的

等标签去写。

举个栗子&＃xff1a;

<table border&＃61;"1" id&＃61;”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>

&＃xff1f;
&＃xff1a;写的时候遇到了一个问题&＃xff0c;

标签写完后显示在下方&＃xff0c;而不是上方&＃xff0c;因为antd的样式覆盖了&＃xff0c;所以需要修改一下。



3、打印事件

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

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

举个栗子&＃xff1a;

exportTable(){const LODOP &＃61; getLodop()LODOP.PRINT_INIT(&＃39;打印table表格&＃39;)LODOP.ADD_PRINT_TABLE(20, 0, &＃39;80%&＃39;, &＃39;100%&＃39;, document.getElementById(&＃39;box&＃39;).innerHTML)LODOP.PREVIEW()
}

以上&＃xff0c;就可以打印表格内容啦。

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


推荐阅读
  • int

    android listview OnItemClickListener失效原因

    android listview OnItemClickListener失效原因
    最近在做listview时发现OnItemClickListener失效的问题，经过查找发现是因为button的原因。不仅listitem中存在button会影响OnItemClickListener事件的失效，还会导致单击后listview每个item的背景改变，使得item中的所有有关焦点的事件都失效。本文给出了一个范例来说明这种情况，并提供了解决方法。 ... [详细]
  • process

    Express App如何提供不需要的静态文件？

    本文介绍了如何使用Express App提供静态文件，同时提到了一些不需要使用的文件，如package.json和/.ssh/known_hosts，并解释了为什么app.get('*')无法捕获所有请求以及为什么app.use(express.static(__dirname))可能会提供不需要的文件。 ... [详细]
  • less

    在类中定义数组时出错 - Error on defining arrays in class

    Iamtryingtomakeaclassthatwillreadatextfileofnamesintoanarray,thenreturnthatarra ... [详细]
  • int

    Android开发笔记：使用Picasso加载网络图片等比例缩放

    在Android开发中，使用Picasso库可以实现对网络图片的等比例缩放。本文介绍了使用Picasso库进行图片缩放的方法，并提供了具体的代码实现。通过获取图片的宽高，计算目标宽度和高度，并创建新图实现等比例缩放。 ... [详细]
  • int

    Nginx使用（server参数配置）

    Nginx使用（server参数配置）
    本文介绍了Nginx的使用，重点讲解了server参数配置，包括端口号、主机名、根目录等内容。同时，还介绍了Nginx的反向代理功能。 ... [详细]
  • stream

    向QTextEdit拖放文件的方法及实现步骤

    向QTextEdit拖放文件的方法及实现步骤
    本文介绍了在使用QTextEdit时如何实现拖放文件的功能，包括相关的方法和实现步骤。通过重写dragEnterEvent和dropEvent函数，并结合QMimeData和QUrl等类，可以轻松实现向QTextEdit拖放文件的功能。详细的代码实现和说明可以参考本文提供的示例代码。 ... [详细]
  • import

    Linux重启网络命令实例及关机和重启示例教程

    Linux重启网络命令实例及关机和重启示例教程
    本文介绍了Linux系统中重启网络命令的实例，以及使用不同方式关机和重启系统的示例教程。包括使用图形界面和控制台访问系统的方法，以及使用shutdown命令进行系统关机和重启的句法和用法。 ... [详细]
  • less

    Webpack5内置处理图片资源的配置方法

    Webpack5内置处理图片资源的配置方法
    本文介绍了在Webpack5中处理图片资源的配置方法。在Webpack4中，我们需要使用file-loader和url-loader来处理图片资源，但是在Webpack5中，这两个Loader的功能已经被内置到Webpack中，我们只需要简单配置即可实现图片资源的处理。本文还介绍了一些常用的配置方法，如匹配不同类型的图片文件、设置输出路径等。通过本文的学习，读者可以快速掌握Webpack5处理图片资源的方法。 ... [详细]
  • less

    SpringBoot yml 配置 多配置文件,开发环境,生产环境配置文件分开

    原文地址:https:www.cnblogs.combaoyipSpringBoot_YML.html1.在springboot中，有两种配置文件，一种 ... [详细]
  • less

    Hibernate基础映射

    在说Hibernate映射前，我们先来了解下对象关系映射ORM。ORM的实现思想就是将关系数据库中表的数据映射成对象，以对象的形式展现。这样开发人员就可以把对数据库的操作转化为对 ... [详细]
  • default

    关于cuowu类的错误提示和使用AdjustmentListener的问题

    本文讨论了一个关于cuowu类的问题，作者在使用cuowu类时遇到了错误提示和使用AdjustmentListener的问题。文章提供了16个解决方案，并给出了两个可能导致错误的原因。 ... [详细]
  • int

    Linux下Perl的安装及第一个程序运行

    本文介绍了在Linux下安装Perl的步骤，并提供了一个简单的Perl程序示例。同时，还展示了运行该程序的结果。 ... [详细]
  • int

    Linux环境变量函数getenv、putenv、setenv和unsetenv详解

    Linux环境变量函数getenv、putenv、setenv和unsetenv详解
    本文详细解释了Linux中的环境变量函数getenv、putenv、setenv和unsetenv的用法和功能。通过使用这些函数，可以获取、设置和删除环境变量的值。同时给出了相应的函数原型、参数说明和返回值。通过示例代码演示了如何使用getenv函数获取环境变量的值，并打印出来。 ... [详细]
  • process

    clone的fork与pthread_create创建线程有何不同

    本文讨论了clone的fork与pthread_create创建线程的不同之处。进程是一个指令执行流及其执行环境，其执行环境是一个系统资源的集合。在调用系统调用fork创建一个进程时，子进程只是完全复制父进程的资源，这样得到的子进程独立于父进程，具有良好的并发性。但是二者之间的通讯需要通过专门的通讯机制，另外通过fork创建子进程系统开销很大。因此，在某些情况下，使用clone或pthread_create创建线程可能更加高效。 ... [详细]
  • default

    手机移动端HTML5和JavaScript如何实现视频上传和压缩视频质量？

    本文讨论了在手机移动端如何使用HTML5和JavaScript实现视频上传并压缩视频质量，或者降低手机摄像头拍摄质量的问题。作者指出HTML5和JavaScript无法直接压缩视频，只能通过将视频传送到服务器端由后端进行压缩。对于控制相机拍摄质量，只有使用JAVA编写Android客户端才能实现压缩。此外，作者还解释了在交作业时使用zip格式压缩包导致CSS文件和图片音乐丢失的原因，并提供了解决方法。最后，作者还介绍了一个用于处理图片的类，可以实现图片剪裁处理和生成缩略图的功能。 ... [详细]
author-avatar
牛奶香橙
这个家伙很懒，什么也没留下！
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有
     
"caption-side: top;">table标题