Vue 中Lodop 实现批量打印

已于 2022-11-08 14:16:13 修改
阅读量947 收藏 1
点赞数 2
分类专栏： vue 文章标签： vue.js 前端 javascript
于 2022-11-07 17:54:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_58671311/article/details/127736081
版权

打印初始化放到for循环外，遍历的数组长度有多少就打印多少，

for循环里面还是 this.LODOP = getLodop(); 这些，只是把初始化提到外面，打印预览也提到for循环外

 

汪汪队出击
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue使用lodop实现打印小结
10-16
主要介绍了Vue使用lodop打印小结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue实现lodop打印功能的示例
01-18
3.vue部分实现 　3.1将lodopDuncs.js文件放入工程中，具体操作可见：http://www.lodop.net/faq/pp35.html 3.2 编写代码 <button class=print-btn v-on:click=btnClickPrint> <span>{{ msg }} </...
利用lodop打印控件轻松实现批量打印
weixin_30510153的博客
10-20 602
最近在做一个打印程序，要实现批量打印功能，在网上找了很多天，也在tp官网咨询大牛们，对大家的的提议我一一进行了研究，总结如下：要实现批量打印可以有两个办法：一是利用专业的报表程序，能实现十分复杂的需求，但学习报表也是很痛苦的一件事，我专心研究了一天都没啥进展，也许我实在太菜了。这种方法推荐锐浪报表，免费还好用。二是利用js插件实现，也在网上找了很多，最后感谢hunduncn，他建议我使用lodop...
如何设置打印的时候不加上页面链接_Word技巧之制卷指南｜试卷打印那些事儿...
weixin_39952502的博客
11-30 215
Word制卷指南小然将和大家一起梳理那些Word制作试卷的实用方法以及小技巧……试卷打印的时候你遇到过哪些问题？公式、图片打印不出来双面打印、单面打印、试卷正反面颠倒A4的页面如何打印到B4或A3纸上面……试卷打印的设置涉及内容：显示设置打印设置——“缩放”、“每版打印?页”短边与长边翻转First我们来解决打印不出来的问题公式、图片甚至是背景打印不出来的话，多半是因为Word程序设置出现了问题。...
vue + Lodop 制作可视化设计页面 实现打印设计功能（二）
最新发布
Qiyandays的博客
06-27 609
vue3 + Lodop 制作可视化设计页面 实现打印设计功能
Lodop-批量逐个打印返回状态
Bruce__taotao的博客
01-19 1595
前面写过Lodop的相关文章 ：《Lodop打印控件常用指令记录》《Vue3+hooks快速接入Lodop打印插件》今天版本迭代，之前打印状态判断依据是否推送到打印队列来判断是否成功，这次要优化下以上就是今天的内容了。主要介绍了使用Lodop 打印插件，在循环打印的时候实现串行打印，并且获取打印结果（首先获取job，接着判断是否在打印队列中来判断是否打印成功）。
使用vue进行Lodop打印的一些方法
字节叔叔
06-11 7351
一个基于 Vue、ElementUi、C-Lodop 的打印模板设计器。实现打印模板的设计、预览和打印功能。示例。
lodop转到其他html页面,vue项目中使用Lodop实现批量打印html页面和pdf文件
weixin_35128928的博客
06-05 1069
1.Lodop是什么？Lodop(标音:劳道谱,俗称:露肚皮)是专业WEB控件,用它既可裁剪输出页面内容，又可用程序代码直接实现复杂打印。控件功能强大,却简单易用,所有调用如同JavaScript扩展语句,主要接口函数如下：●PRINT_INIT(strPrintTaskName)打印初始化●SET_PRINT_PAGESIZE(intOrient,intPageWidth,intPageHeig...
Vue中使用Lodop插件实现打印功能的简单方法
10-15
在Vue项目中实现打印功能，Lodop插件是一个实用的选择。Lodop是一款云打印服务，能够方便地集成到Web应用中，提供便捷的打印API。以下将详细介绍如何在Vue中使用Lodop插件。 首先，我们需要了解Lodop的基本使用方法...
详解如何在vue项目中使用lodop打印插件
12-12
项目中使用到打印的功能。领导推荐使用Lodop Lodop是什么东东，反正就是可以定制打印的插件。。。 既然是插件，vue的渐进式开发。完全可以拿来化为己用。 如何使用那？先大概看了下开发文档，就是一堆demo，一个js...
web页面批量打印
01-31
批量打印 HTML：打印页面预览，跳转到打印那边使其 分页（使每个报告单占据一页）
reportdesign基于lodop的vue简单打印设计工具
08-10
本项目"reportdesign基于lodop的vue简单打印设计工具"正是为了解决这一问题，它结合了Vue.js前端框架与LODOP打印服务，为用户提供了一种在Web环境中进行打印设计的解决方案。 Vue.js是一种轻量级的前端框架，以其...
在vue中使用的打印插件
11-16
在Vue项目中，有时我们需要实现打印功能，例如批量打印和分页打印。为了实现这些需求，我们可以利用特定的打印插件。本文将详细介绍如何在Vue中集成和使用打印插件。 1. **选择合适的打印插件** 在Vue中，常用的...
vue+element实现批量删除功能的示例
08-27
"Vue+Element实现批量删除功能的示例" Vue是一个基于JavaScript的渐进式框架，Element是一个基于Vue的UI库，两者结合可以快速开发出高质量的Web应用程序。本文将展示如何使用Vue+Element实现批量删除功能的示例。 ...
vue+element+Java实现批量删除功能
10-17
主要介绍了vue+element+Java实现批量删除功能,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
vue 实现打印与批量分页打印功能
weixin_47092531的博客
07-18 4766
vue 实现打印与批量分页打印功能
lodop web打印 vue项目 无预览直接打印
Sensation_cyq的博客
07-11 3337
封装 LodopFuncs.js var CreatedOKLodop7766=null; //====判断是否需要安装CLodop云打印服务器:==== export function needCLodop(){ try{ var ua=navigator.userAgent; if (ua.match(/Windows\sPhone/i) !=nu...
Lodop实现web套打
weixin_30876945的博客
02-03 522
WEB套打可选方案不多，理想的更少，利用免费控件Lodop+JavaScript实现精确套打，算是较为经典的选择。这种方案其实比较简单，利用一个htm文件就可以实现模板设计过程，几乎是“空手套”式的开发，但理解这几个步骤还是需要点时间，下面一步步详细演示说明： 第一步：建立一个空白的模板设计文件 把以下超文本代码复制到一个本地htm文件中： <htm...
vue lodop实现多页打印
07-11
要在Vue中实现多页打印，你可以使用Lodop插件。Lodop是一个用于浏览器打印的第三方插件，可以提供丰富的打印功能。 以下是在Vue中使用Lodop实现多页打印的基本步骤： 1. 首先，你需要从Lodop官网下载Lodop插件并进行安装。 2. 在Vue项目中引入Lodop插件。你可以在`public/index.html`文件中添加以下代码： ```html <script src="http://localhost:8000/CLodopfuncs.js"></script> ``` 这里的`http://localhost:8000/CLodopfuncs.js`是Lodop插件的访问路径，请根据你的实际情况进行修改。 3. 在Vue组件中，你可以使用`this.$nextTick()`来确保Lodop插件已经加载完毕，然后在回调函数中进行打印操作。 例如，假设你有一个名为`printMultiPage`的方法来处理多页打印： ```javascript methods: { printMultiPage() { this.$nextTick(() => { // 使用Lodop插件进行打印操作 LODOP.PRINT_INIT("多页打印"); LODOP.SET_PRINT_PAGESIZE(1, 'A4', 0, 0); // 循环添加需要打印的内容，可以根据需要进行调整 for (let i = 0; i < 3; i++) { LODOP.NewPage(); LODOP.ADD_PRINT_TEXT(50, 50, 200, 30, `第 ${i+1} 页内容`); } LODOP.PREVIEW(); // 预览打印 // 可以使用其他方法进行打印，如LODOP.PRINT()直接打印等 }); } } ``` 4. 在Vue模板中添加一个触发多页打印的元素，例如一个按钮： ```html <button @click="printMultiPage">多页打印</button> ``` 现在，当用户点击"多页打印"按钮时，Lodop插件会根据你的设置进行多页打印操作。 请注意，以上代码仅为示例，你需要根据自己的需求进行适当的调整和修改。确保Lodop插件已正确安装和引入，并且在使用时可以根据实际情况设置打印内容和样式。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值