vue 项目中使用LodopFuncs （浏览器控制打印机）

最新推荐文章于 2025-05-27 14:35:30 发布

web_hj

最新推荐文章于 2025-05-27 14:35:30 发布

阅读量3.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue Lodop 文章标签： vue

本文链接：https://blog.youkuaiyun.com/web_hj/article/details/112461097

本文介绍了如何在Vue项目中使用LodopFuncs.js来控制浏览器进行打印操作，包括安装c-Lodop插件和引入LodopFuncs.js文件的步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.电脑安装c-Lodop 下载地址 http://www.lodop.net/download.html

安装成功

2. 在要控制打印页面引入 LodopFuncs.js

template:

<el-button @click="onStart">打印</el-button>



script:

onStart: function () {
      let LODOP=getLodop();
      LODOP.PRINT_INIT("");
      LODOP.SET_PRINT_PAGESIZE(1, 750, 1280);
      this.AddPrintContent("10101010101010", "郭德强");
      LODOP.PRINT();
},
AddPrintContent: function (strCode, strName) {
        LODOP.SET_PRINT_STYLE("FontColor", 16711680);
        LODOP.ADD_PRINT_TEXT(15, 70, 157, 25, "交通银行（      ）");
        LODOP.SET_PRINT_STYLEA(2, "FontName", "隶书");
        LODOP.SET_PRINT_STYLEA(2, "FontSize", 11);
        LODOP.SET_PRINT_STYLEA(2, "FontColor", 0);
        LODOP.ADD_PRINT_TEXT(41, 166, 70, 20, "2008年11月9日");
        LODOP.ADD_PRINT_TEXT(55, 166, 70, 20, "个人业务受理书");
        LODOP.SET_PRINT_STYLEA(4, "FontColor", 0);
        LODOP.ADD_PRINT_TEXT(75, 37, 431, 20, "机构:109110 交易代码:010110");
        LODOP.ADD_PRINT_TEXT(102, 37, 431, 20, "个人网银用户签约成功！");
        LODOP.ADD_PRINT_TEXT(129, 37, 431, 20, "网点名称：东城分行营业部");
        LODOP.ADD_PRINT_TEXT(156, 37, 431, 20, "主卡卡号：" + strCode);
        LODOP.ADD_PRINT_TE