vue+lodop实现web端打印功能

lodop官网下载地址:http://www.c-lodop.com/download.html

1、下载插件(如果只是想实现打印功能,下载红框里的即可)

2、解压缩,然后根据自己的操作系统安装控件

32位系统安装:install_lodop32.exe;

64位系统安装:install_lodop64.exe;

然后安装云打印插件:CLodop_Setup_for_Win32NT.exe;

3、 测试打印功能

安装包中的html文件为打印实例,点击其中一个用浏览器打开,点击红框如果出现下图弹窗,说明插件安装成功了。

4、 打开安装包把LodopFuncs.js放到项目中

 5、页面引入并使用
<el-button type="primary" @click="btnClickPrint">打印</el-button>

import { getLodop } from '@/utils/LodopFuncs';

// 打印快递单
    btnClickPrint() {
      const LODOP = getLodop(); // 调用getLodop获取LODOP对象
      LODOP.PRINT_INIT('');
      LODOP.SET_PRINT_PAGESIZE(1, '70mm', '50mm', '');
      LODOP.ADD_PRINT_TEXT(
        20,
        10,
        250,
        20,
        `${this.tempInfo[0].label}:${this.tempInfo[0].value}`
      );
      LODOP.ADD_PRINT_TEXT(
        50,
        10,
        250,
        20,
        `${this.deliveryInfo[0].label}:${this.deliveryInfo[0].value}`
      ); // // 设置打印内容
      LODOP.ADD_PRINT_TEXT(
        80,
        10,
        250,
        20,
        `${this.deliveryInfo[1].label}:${this.deliveryInfo[1].value}`
      ); // // 设置打印内容
      LODOP.ADD_PRINT_TEXT(
        110,
        10,
        250,
        20,
        `${this.deliveryInfo[2].label}:${this.deliveryInfo[2].value}`
      ); // // 设置打印内容
      LODOP.PREVIEW();
    },

LODOP.PREVIEW();  打印并预览

LODOP.PRINT(); 直接打印

  • 6
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
控件功能强大,却简单易用,所有调用如同JavaScript扩展语句, 主要接口函数如下: PRINT_INIT 打印初始化 SET_PRINT_PAGESIZE 设定纸张大小 ADD_PRINT_HTM 增加超文本项 ADD_PRINT_TEXT 增加纯文本项 ADD_PRINT_TABLE 增加表格项 ADD_PRINT_SHAPE 画图形 SET_PRINT_STYLE 设置对象风格 PREVIEW 打印预览 PRINT 直接打印 PRINT_SETUP 打印维护 PRINT_DESIGN 打印设计 ... 样例清单 1.如何在页面内嵌入控件见样例一 2.如何选材打印当前页面内容见样例二 3.如何用代码生成打印页见样例三 4.如何打印设计和定位套打见样例四 5.如何控制纸张大小和连续打印见样例五 6.如何输出多页长文档及双面打印见样例六 7.如何定向输出见样例七 8.如何打印图片见样例八 9.如何用程序加载打印维护背景图见样例九 10.如何控制打印样式(STYLE)见样例十 11.如何直接打印条形码见样例十一 12.如何读写本地文件见样例十二 13.如何打印旋转内容见样例十三 14.如何按URL打印见样例十四 15.如何打印表格的页头页尾见样例十五 16.如何设置预览窗口大小见样例十六 17.如何发打印机指令或直接读写口见样例十七 18.如何打印幅面高度不固定的票据见样例十八 19.如何内嵌显示及预览时包含背景图见样例十九 20.如何强制分页并预览多页卡片见样例二十 21.如何控制打印维护的功能权限见样例二十一 22.如何构建自己的纯WEB打印预览见样例二十二 23.如何居中打印超文本见样例二十三 24.如何选择界面皮肤见样例二十四 25.如何指定输出到哪页或仅预览见样例二十五 26.如何提高多页打印的性能见样例二十六 27.如何导出数据到Excel文件见样例二十七 28.如何快速读取客户系统信息见样例二十八 29.如何使用其它长度单位见样例二十九 30.如何分页输出页面内容见样例三十 31.如何打印表格的分页小计或合计见样例三十一 32.如何实现清晰的图表打印见样例三十二 33.如何实现甘特图等的图表打印见样例三十三 34.如何使用百分比%和满页打印见样例三十四 35.如何获得打印结果和程序代码见样例三十五 36.如何在设计过程中用js编辑内容见样例三十六 37.如何打印公章效果图见样例三十七 38.如何用BASE64编码输出图片见样例三十八 39.如何打印田字格、上划线等文本见样例三十九 40.如何进行数据格式转换见样例四十 41.如何把内容关联后按顺序打印见样例四十一 42.如何把整页内容缩放打印见样例四十二 43.如何分页打印综合表格见样例四十三 44.如何缩放打印单个超文本内容见样例四十四 45.如何获得打印状态及最终结果见样例四十五 46.如何设置右边距和下边距见样例四十六
要在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插件已正确安装和引入,并且在使用时可以根据实际情况设置打印内容和样式。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值