c-lodop打印功能

在需要的页面引入

<a-button style="margin: 0px 5px" :loading="loading" @click="printPdf">
打印
</a-button>

import { getLodop } from '@/common/LodopFuncs'; //引入js
import { getPrintList } from '@/api/print/print'; //调用后台接口返回的数据

在点击事件中这样写

printPdf() {
            // this.CreateOneFormPage();

            getPrintList().then(res => {
                console.log(res);
                LODOP.PRINT_INIT(''); // 初始化
                LODOP.ADD_PRINT_HTM('5mm', 34, 'RightMargin:0.9cm', 'BottomMargin:9mm', (document.documentElement.innerHTML = res.data)); // 获取后台html页面替换当前页
                LODOP.PREVIEW(); // 打印预览
                //    LODOP.PRINT(); // 此处为直接打印
            });
            console.log(LODOP);
        },
        // CreateOneFormPage(strPName, strJJRXM, strJJRDW, strJJRDZ, strSJRXM, strSJRDW, strSJRDZ, strNJPM, strNJSL, strJJRDH, strSJRDH) {
        //     LODOP = getLodop();
        //     LODOP.PRINT_INITA(14, 11, 800, 600, strPName); // 打印任务名
        //     LODOP.SET_PRINT_PAGESIZE(1, '209mm', '113mm', ''); // 设置纸张高度
        //     LODOP.ADD_PRINT_TEXT(95, 95, 75, 20, strJJRXM); // 寄件人姓名
        //     LODOP.ADD_PRINT_TEXT(123, 148, 194, 20, strJJRDW); // 寄件人单位名称
        //     LODOP.ADD_PRINT_TEXT(158, 101, 238, 35, strJJRDZ); // 寄件人的详细地址
        //     LODOP.ADD_PRINT_TEXT(92, 446, 75, 20, strSJRXM); // 收件人姓名
        //     LODOP.ADD_PRINT_TEXT(122, 496, 208, 20, strSJRDW); // 收件人单位名称
        //     LODOP.ADD_PRINT_TEXT(160, 460, 244, 35, strSJRDZ); // 收件人详细地址
        //     LODOP.ADD_PRINT_TEXT(289, 47, 178, 22, strNJPM); //内件品名
        //     LODOP.ADD_PRINT_TEXT(290, 258, 100, 20, strNJSL); //内件数量
        //     LODOP.ADD_PRINT_TEXT(92, 245, 100, 20, strJJRDH); //寄件人电话
        //     LODOP.ADD_PRINT_TEXT(90, 608, 75, 20, strSJRDH); //收件人电话
        // LODOP.ADD_PRINT_HTM(10,55,"100%","100%", document.getElementById('form1').innerHTML);
        // },
以上代码是在vue中如何插入打印功能的代码,后边的参数变量如果可以取到行内数据的话直接写行内数据就完事了,具体的设计麻烦请看官方文档http://www.lodop.net/
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一. Java基础部分.................................................
    wy_sure阅读 9,239评论 0 11
  • 1. Java基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语...
    子非鱼_t_阅读 31,906评论 18 399
  • 一、Web端 https://www.nowcoder.com/discuss/588372 1.float如何清...
    陈一季阅读 9,974评论 2 18
  • 1. React简介 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScrip...
    王蕾_fd49阅读 3,034评论 0 0
  • 一、props 这个应该非常属性,就是父传子的属性; props 值可以是一个数组或对象; //数组:不建议使用p...
    魂斗罗小黑阅读 3,808评论 0 1