精华内容
下载资源
问答
  • web打印的最佳方案 万次阅读 热门讨论
    2018-11-10 02:03:21

    web打印的痛点

    winform打印的方案比较多,实现也比较容易,而且效果也非常炫;但现在越来越多的系统是web系统,甚至是移动端。网上也有非常的web打印方案,但各式各样的问题非常多,比如js兼容性,稳定性等一直缠绕着众多的程序员,或者就是web 打印需要浏览器安装 ActiveX 组件,ActiveX安装不容易成功等等问题。Lodop等插件还是收费的。

    新的解决方案

    对各种方案分析之后,对web在重业务场景的打印需求(比如直接打印,无预览直接打印,特定格式打印)梳理之后,确定了一个生产环节最佳的WEB打印方案,纯JS通过post提交数据到打印伺服器的方案。

    1. js可以脱离语言环境更通用,不管你是java,还是php,甚至只是个前端都毫无障碍;
    2. 使用http协议 psot模式更简单,门槛更低,几行代码搞定;其实使用webSocket协议也可以,但是在不需要长连接的情况下没有必要。

    方案web页面实现源代码,源码

    <html>
    <head>
    <title>宇田web打印demo</title>
    <meta http-equiv="content-Type" content="text/html;charset=UTF-8"/>
    </head>
    <body>
    <script>
    function webprint(){ 
    	var key1=document.getElementById('key1').value;
    	var key2=document.getElementById('key2').value;
    	var params = {"key1":key1,"key2":key2}; 
    	httpPost("http://127.0.0.1:6555",params); 
    }
    function httpPost(URL,PARAMS) { 
    	var temp = document.createElement("form"); 
    	temp.action = URL; 
    	temp.method = "post"; 
    	temp.style.display = "none"; 
    	for (var x in PARAMS) { 
    		var opt = document.createElement("textarea"); 
    		opt.name = x; 
    		opt.value = PARAMS[x]; 
    		temp.appendChild(opt); 
    		} 
    		document.body.appendChild(temp); 
    		temp.submit(); 
    		return temp; 
    	}
    </script>
    宇田web打印demo<br>
    webprint demo
    <input  style="width:160px" id="key1">
    <input style="width:160px" id="key2" >
    <input type="button" id="button" value="打印" onclick="webprint()" />
    </body>
    </html>
    

    打印伺服器demo及原理

    打印伺服器demo下载
    打印伺服器只需要监听上面代码中的端口6555,然后解析出打印参数就可以和桌面软件一样方便灵活可定制打印

    在这里插入图片描述

    更多相关内容
  • Web系统页面打印技术实现与分析V1.0.pdf
  • 基于Web的网上书店系统的设计与实现.pdf
  • 专为WEB打印而生 使用webSocket协议,脱离语言环境限制,主流浏览器即可支持! 精准打印 毫米精度,轻松实现POS小票,发票套打等. 多种语言 支持ASP, ASP.NET, PHP, JSP等开发语言. 超强兼容 独立运行,B/S、C/S兼容,...
  • javaweb实现打印功能

    2018-02-07 10:43:22
    javaweb jsp界面实现打印功能。引入js后再引入相应方法即可实现。
  • web页面调用的打印,包含可实现整页打印,区域打印,选择打印三种方法,直接复制可用(缺点:格式不好控制,建议使用插件打印或PDF打印,详见本人其他分享)
  • web打印三种实现方式

    千次阅读 2021-04-09 16:26:23
    web打印的方式可以分为3种:1、window.print()直接调用浏览器;2、利用js插件调用浏览器打印;3、利用第三方插件直接调用打印机。3种方式各有不同的使用场景和灵活度,接下来进行探讨比较

    web打印的方式可分为三种:

    1. 直接调用浏览器打印
    2. 通过javascript插件调用浏览器打印
    3. 通过第三方程序直接调用打印机

    一、直接调用浏览器打印

    通过在javascript代码中调用window.print()函数实现,浏览器会自动获取当前页面内容,并打开浏览器的打印预览页面。

    使用场景:刚好当前页面的全部内容需要打印。

    优点:兼容性好

    缺点:适用场景狭窄;仅能识别内联样式,无法识别行内样式和外部样式

    不推荐

    二、利用第三方js库

    比较推荐的是Print.js,目前GitHub上star最多的js打印控件,支持ES6,npm引入。

    使用场景:只要没有直接打印的需求的场景,都可以使用这款插件

    优点:

    1. 支持打印的类型多:PDF、HTML、IMAGE、JSON
    2. 支持行内样式与外联样式,再也不用在DOM元素上写满样式了
    3. 兼容性好,除了IE不支持PDF和IMAGE打印外,其余主流浏览器全部支持

    缺点:

    1. 可能出现的样式异常
    2. 无法直接打印/静默打印,因为是调用chrome打印,还是会弹出打印预览页面

    使用方法:  

    1. 安装,npm方式:
    npm install print-js --save

    yarn方式: 

    yarn add print-js

     2. 在需要使用的文件中引入:

    import print from 'print-js'

     3. 调用打印,以打印html为例,调用打印方法后浏览器会弹出打印预览页面:

    import * as medicalStyle from '@/assets/style/eye/medical/standard.css'
    import print from 'print-js'
    ...
    /**
     * 打印方法
     */
    printMedical () {
     // 调用打印插件,配置项参考官网:https://printjs.crabbly.com/
     print ({
            // printable为需要打印的DOM的id
            printable: 'standard',
            // type为需要打印的类型
            type: 'html',
            // css为样式文件或者直接css样式,支持导入整个css文件,或者css文件数组
            css: medicalStyle,
            // 可选项,这样配置意味着应用所有导入的css文件
            targetStyles: ['*']
          })
    }

    三、利用第三方插件LODOP

    LODOP是老牌打印插件了,功能十分强大,同时也在与时俱进,原先老版本是以插件形式提供打印服务,目前官方也发现随着浏览器不断更新,兼容性有问题,开发了新的C-Lodop程序,解决了浏览器的兼容问题,

    适用场景:对打印有较多配置要求,尤其需要直接打印的场景

    优点:

    1. 支持直接打印
    2. 支持打印类型丰富:HTML、TABLE、URL、TEXT、文档模板
    3. 配置项十分丰富,大到是否显示打印预览,小到分页设置、边框设置等等
    4. 兼容性好,除了兼容各类浏览器外,甚至还有LINUX版本

    缺点:

    1. 直接打印功能需要付费解锁,但价格不算离谱,210RMB起
    2. 需要单独下载exe安装到电脑上,不过也没办法,能实现如此强大的打印功能,只有此途径
    3. 只支持内联样式,样式只能卸载DOM元素上

    使用方法(window操作系统):

    1. 下载插件

    建议只安装红圈中云打印程序。更详细的区别请看官网的介绍文档

       2. 将LodopFuncs.js拷贝至项目目录下,例如我是放在src/asserts/printPlugin目录下,在文件底部添加导出语句

       3. 在页面中使用:

    ...
    // 导入打印插件
    import { getLodop } from '@/assets/printPlugin/LodopFuncs'
    ...
    // 打印方法
    printMedical () {
          // 获取打印对象
          const LODOP = getLodop()
          // 打印初始化
          LODOP.PRINT_INIT('打印任务名')
          // 设定纸张大小,指定需要打印的DOM元素
          LODOP.ADD_PRINT_HTM(0, 0, '100%', '100%', document.getElementById('standard').innerHTML)
          // 执行打印-直接打印
          LODOP.PRINT()
        }

    以上是最简打印配置,有其他需要可以参考官方文档

    展开全文
  • 做过很多的Web项目,大多数在打印页面内容的时候,采用的都是通过Javascript调用系统内置的打印方法进行打印,也就是调用PrintControl.ExecWB(?,?)实现直接打印打印预览功能。打印的效果及控制性虽然不是很好,...
  • 实现WEB打印的几种方法

    千次阅读 2020-08-09 23:37:40
    实现WEB打印的几种方法 当前WEB应用开发非常流行,主要原因是WEB应用客户端的规则很简单,容易学习,容易维护,容易发布,降低了开发难度。但是,WEB应用的打印一直以来却是一个难题,特别是在应用中完成标签打印...

    实现WEB打印的几种方法

    当前WEB应用开发非常流行,主要原因是WEB应用客户端的规则很简单,容易学习,容易维护,容易发布,降低了开发难度。但是,WEB应用的打印一直以来却是一个难题,特别是在应用中完成标签打印(如包裹面单、货运标签等)、票据打印(如零售小票)难度较大,其难度在于如何将需要打印的内容,精确套打到标签、票据中,精确控制分页,并实现高速连续打印。

    对于WEB打印,当前有几种常见的方法,下面分别介绍,希望对大家有所帮助。

    一、直接使用浏览器的打印功能

    使用打印菜单或windows.print()的即可。这种方案的优势是不需要对浏览器作任何扩充,是最简单的办法,但问题也最多,如:

    不能精确分页。浏览器一般是根据用户设置的页面大小,web页面的内容多少,来自行决定分页位置,程序员很难控制。
    会有页脚页眉干扰。
    不能准确对齐边边距及打印文字。
    不能解决连续打印。比如,不是仅打印一张票据,而是连续一次打印若干个票据。
    打印时一般会出现弹窗提示,影响用户体验。

    二、使用print css

    这种方法是直接使用浏览器打印功能的增强版本。该方案通过在html文档中,嵌入打印相关的css样式,来实现对html文档输出打印的控制,比如设置纸张大小,纸张纵横方向,打印边距,分页等。使用该方案的优点是,成本小,不需要下载任何插件,而且跨平台性非常好。但是目前的问题是:

    print css 厂商的支持度较差。
    没有解决打印时会出现弹窗提示的问题,连续打印是效率较差。用户体验较差
    打印小幅面的标签时不太适合
    打印一维码,二维码不太方便
    必须使用windows的驱动程序,对于斑马等公司提供的采用ZPL协议的专业标签打印机,支持不太好。

    三、使用PDF文件

    用这种方式,就是从服务器端下载一个pdf文件流,在浏览器中用adobe插件打开,然后用adobe的打印菜单进行打印。该方案能实现精确套打,但需要下载adobe插件。同时,该方案一般更适合报表的打印,打印标签/票据并不十分合适。

    四、采用ActiveX

    该方案在IE时代非常流行。这种方案就是下载一个控件,票据的数据不再以html方式呈现,而是呈现在ActiveX中。这种方案的优点是打印的精确度高,分页的可控性好。但缺点也是很明显的,就是ActiveX控件的只能在IE浏览器下使用,在当前Firefox, Chrome, Edge成为主流的情况下,其适用范围大大减少。

    五、打印精灵采用的技术方案

    打印精灵设计目标支持网页打印、移动设备打印、嵌入式设备打印,满足多种场景下的打印需求,为软件开发者、系统集成商降低开发难度加快产品研发速度提供一个工具,设计打印精灵时,我们提出了如下目标:

    提供简单的JS API,通过API直接控制打印机。
    支持IE9+、Firefox、Chrome、Safari等主流浏览器,支持手机浏览器
    专注标签打印,打印小票、商标、吊牌、物流面单,支持一维码,二维码打印。
    超高速打印支持专业标签打印机,无须Windows打印驱动,直接使用业界标准的ZPL/CPCL打印指令,确保全速打印
    提供WYSWYG所见即所得的模板编辑器,分离模板设计和模板打印,方便标签设计。
    同时支持WEB打印,移动设备打印,嵌入式设备打印。
    根据上述目标,我们提出了打印精灵的技术实现方案,方案以打印模板为核心,分别实现WEB打印,移动设备打印,嵌入式设备打印的驱动。本文重点介绍,WEB驱动的实现技术,移动设备/嵌入式设备的处理方案,我们将在其他文章里陆续介绍。

    在这里插入图片描述
    前面介绍的常规WEB打印技术,各有各的问题,无法实现上述目标。比如:要实现跨浏览器支持就不能使用ActiveX技术; 同时支持WEB打印、移动设备打印、嵌入式设备打印就不能采用print css技术等等。通过反复研究、比较、权衡,我们设计了本地打印代理的模式。

    本地打印代理本质上是一个在本地启动miniWeb服务器,通过客户浏览器与miniWeb服务器的通讯,完成打印。由于miniWeb服务器在独立的进程中运行,可以开发各种复杂的功能,而不会影响浏览器,是一个非常稳定的、可靠、可兼容各种浏览器的方案。该方案的难点是设计合理的通讯协议,解决跨域访问等技术问题。
    在这里插入图片描述

    实现上,我们采用了跨平台的golang作为开发语言,开发了一个可以开机自启动的miniWebSvr程序,可以在windwos, linux等系统上使用。golang的性能较高,最终程序的体积较小,运行速度快。需要的同学可以到这里下载。

    为了简化打印操作,我们对底层协议进行了封装,提供了便于操作的API的。详见JS API使用指南

    转自http://www.printspirit.cn/blog/web_print.md

    展开全文
  • 为了业务系统与Internet的互联,WEB服务器和数据库系统均托管在IDC(互联网数据中心),因而需要从托管在 IDC的服务器上提取业务数据在本地打印输出。在客户端浏览器只能打印简单的HTML页面的情况下,要求更为强大...
  • 为了业务系统与Internet的互联,WEB服务器和数据库系统均托管在IDC(互联网数据中心),因而需要从托管在 IDC的服务器上提取业务数据在本地打印输出。在客户端浏览器只能打印简单的HTML页面的情况下,要求更为强大...
  • Lodop实现Web打印控件实例

    热门讨论 2011-01-06 16:37:43
    1.系统采用visual studio2008+sqlserver2000; 2.数据库使用系统数据库Northwind,数据备份文件放于App_Data目录下; 3.使用该Lodop前,需先进行安装,若为安装在调用时会给出安装提示,可根据安装提示进行安装,安装...
  • 完美地解决了不用ActiveX但获得与C/S系统一样的打印能力,B/S应用系统的报表打印,本打印系统不需要在浏览器安装任何插件,只需通过JavaScript即可实现
  • 针对目前B/S模式系统中报表开发的难点,提出一种B/S模式系统下基于Web服务的远程报表解决方案。文中给出了系统设计原理,概述了Web服务及其相关技术,最后给出基于Web服务的远程报表打印系统具体实现的关键技术。
  • web打印web打印控件的三种实现方法 zz 做管理系统的时候,打印一直是个棘手的问题,做B/S的系统这个问题就更加突出了!下面举出三种常用的web打印处理方式
  • B/S应用系统的报表打印一直以来都是一个难题,以前常规的...本打印系统不需要在浏览器安装任何插件,只需通过JavaScript即可实现报表精确打印以及打印过程免人工介入。 压缩文件中附Odoo(一个开源ERP系统)8调用例子。
  • Java web 打印,Java pdf打印,Java 打印

    热门讨论 2009-12-07 16:30:04
    该项目是Java 实现web打印的源码,非IE打印,而是通过Java调用pdf打印。该项目是用MyEclipse写的。
  • 系统采用access数据库和asp.net开发,实现了信息统计,打印信息,等功能
  • 前端实现自动打印 批量打印

    万次阅读 多人点赞 2019-10-24 10:25:40
    众所周知,前端打印的API只有window.print(),而我们要实现自动打印和批量打印,甚至连获取本地电脑的打印机有哪些都无法获取到。难道,前端对此真的无能为力吗?答案是 否定 ! Lodop 由此诞生,有人说她是Web打印...

    欢迎关注微信公众号:【 全栈攻略 】

    众所周知,前端打印的API只有window.print(),而我们要实现自动打印和批量打印,甚至连获取本地电脑的打印机有哪些都无法获取到。难道,前端对此真的无能为力吗?答案是 否定

    Lodop 由此诞生,有人说她是Web打印控件的“终结者”,因为接触“她”后再不想别的“她”。 那我们就来揭开这神秘都面纱!

    一,首先我们要改造Lodpo的源代码文件为适合Vue/React/Angular等框架如下:

    LodopFuncs.js

    var CreatedOKLodop7766 = null, CLodopIsLocal;
    
    //====判断是否需要 Web打印服务CLodop:===
    //===(不支持插件的浏览器版本需要用它)===
    export function needCLodop() {
        try {
            var ua = navigator.userAgent;
            if (ua.match(/Windows\sPhone/i))
                return true;
            if (ua.match(/iPhone|iPod|iPad/i))
                return true;
            if (ua.match(/Android/i))
                return true;
            if (ua.match(/Edge\D?\d+/i))
                return true;
    
            var verTrident = ua.match(/Trident\D?\d+/i);
            var verIE = ua.match(/MSIE\D?\d+/i);
            var verOPR = ua.match(/OPR\D?\d+/i);
            var verFF = ua.match(/Firefox\D?\d+/i);
            var x64 = ua.match(/x64/i);
            if ((!verTrident) && (!verIE) && (x64))
                return true;
            else if (verFF) {
                verFF = verFF[0].match(/\d+/);
                if ((verFF[0] >= 41) || (x64))
                    return true;
            } else if (verOPR) {
                verOPR = verOPR[0].match(/\d+/);
                if (verOPR[0] >= 32)
                    return true;
            } else if ((!verTrident) && (!verIE)) {
                var verChrome = ua.match(/Chrome\D?\d+/i);
                if (verChrome) {
                    verChrome = verChrome[0].match(/\d+/);
                    if (verChrome[0] >= 41)
                        return true;
                }
            }
            return false;
        } catch (err) {
            return true;
        }
    }
    
    //====页面引用CLodop云打印必须的JS文件,用双端口(8000和18000)避免其中某个被占用:====
    if (needCLodop()) {
        var src1 = "http://localhost:8000/CLodopfuncs.js?priority=1";
        var src2 = "http://localhost:18000/CLodopfuncs.js?priority=0";
    
        var head = document.head || document.getElementsByTagName("head")[0] || document.documentElement;
        var oscript = document.createElement("script");
        oscript.src = src1;
        head.insertBefore(oscript, head.firstChild);
        oscript = document.createElement("script");
        oscript.src = src2;
        head.insertBefore(oscript, head.firstChild);
        CLodopIsLocal = !!((src1 + src2).match(/\/\/localho|\/\/127.0.0./i));
    }
    
    //====获取LODOP对象的主过程:====
    export function getLodop(oOBJECT, oEMBED) {
        var strHtmInstall = "<br><font color='#FF00FF'>打印控件未安装!点击这里<a href='install_lodop32.exe' target='_self'>执行安装</a>,安装后请刷新页面或重新进入。</font>";
        var strHtmUpdate = "<br><font color='#FF00FF'>打印控件需要升级!点击这里<a href='install_lodop32.exe' target='_self'>执行升级</a>,升级后请重新进入。</font>";
        var strHtm64_Install = "<br><font color='#FF00FF'>打印控件未安装!点击这里<a href='install_lodop64.exe' target='_self'>执行安装</a>,安装后请刷新页面或重新进入。</font>";
        var strHtm64_Update = "<br><font color='#FF00FF'>打印控件需要升级!点击这里<a href='install_lodop64.exe' target='_self'>执行升级</a>,升级后请重新进入。</font>";
        var strHtmFireFox = "<br><br><font color='#FF00FF'>(注意:如曾安装过Lodop旧版附件npActiveXPLugin,请在【工具】->【附加组件】->【扩展】中先卸它)</font>";
        var strHtmChrome = "<br><br><font color='#FF00FF'>(如果此前正常,仅因浏览器升级或重安装而出问题,需重新执行以上安装)</font>";
        var strCLodopInstall_1 = "<br><font color='#FF00FF'>Web打印服务CLodop未安装启动,点击这里<a href='CLodop_Setup_for_Win32NT.exe' target='_self'>下载执行安装</a>";
        var strCLodopInstall_2 = "<br>(若此前已安装过,可<a href='CLodop.protocol:setup' target='_self'>点这里直接再次启动</a>)";
        var strCLodopInstall_3 = ",成功后请刷新本页面。</font>";
        var strCLodopUpdate = "<br><font color='#FF00FF'>Web打印服务CLodop需升级!点击这里<a href='CLodop_Setup_for_Win32NT.exe' target='_self'>执行升级</a>,升级后请刷新页面。</font>";
        var LODOP;
        try {
            var ua = navigator.userAgent;
            var isIE = !!(ua.match(/MSIE/i)) || !!(ua.match(/Trident/i));
            if (needCLodop()) {
                try {
                    LODOP = getCLodop();
                } catch (err) {}
                if (!LODOP && document.readyState !== "complete") {
                    alert("网页还没下载完毕,请稍等一下再操作.");
                    return;
                }
                if (!LODOP) {
                    //document.body.innerHTML = strCLodopInstall_1 + (CLodopIsLocal ? strCLodopInstall_2 : "") + strCLodopInstall_3 + document.body.innerHTML;                
                    return;
                } else {
                    if (CLODOP.CVERSION < "3.0.8.3") {
                        document.body.innerHTML = strCLodopUpdate + document.body.innerHTML;
                    }
                    if (oEMBED && oEMBED.parentNode)
                        oEMBED.parentNode.removeChild(oEMBED);
                    if (oOBJECT && oOBJECT.parentNode)
                        oOBJECT.parentNode.removeChild(oOBJECT);
                }
            } else {
                var is64IE = isIE && !!(ua.match(/x64/i));
                //=====如果页面有Lodop就直接使用,没有则新建:==========
                if (oOBJECT || oEMBED) {
                    if (isIE)
                        LODOP = oOBJECT;
                    else
                        LODOP = oEMBED;
                } else if (!CreatedOKLodop7766) {
                    LODOP = document.createElement("object");
                    LODOP.setAttribute("width", 0);
                    LODOP.setAttribute("height", 0);
                    LODOP.setAttribute("style", "position:absolute;left:0px;top:-100px;width:0px;height:0px;");
                    if (isIE)
                        LODOP.setAttribute("classid", "clsid:2105C259-1E0C-4534-8141-A753534CB4CA");
                    else
                        LODOP.setAttribute("type", "application/x-print-lodop");
                    document.documentElement.appendChild(LODOP);
                    CreatedOKLodop7766 = LODOP;
                } else
                    LODOP = CreatedOKLodop7766;
                //=====Lodop插件未安装时提示下载地址:==========
                if ((!LODOP) || (!LODOP.VERSION)) {
                    if (ua.indexOf('Chrome') >= 0)
                        document.body.innerHTML = strHtmChrome + document.body.innerHTML;
                    if (ua.indexOf('Firefox') >= 0)
                        document.body.innerHTML = strHtmFireFox + document.body.innerHTML;
                    document.body.innerHTML = (is64IE ? strHtm64_Install : strHtmInstall) + document.body.innerHTML;
                    return LODOP;
                }
            }
            if (LODOP.VERSION < "6.2.2.6") {
                if (!needCLodop())
                    document.body.innerHTML = (is64IE ? strHtm64_Update : strHtmUpdate) + document.body.innerHTML;
            }
            //===如下空白位置适合调用统一功能(如注册语句、语言选择等):==
    
     	// 添加注册码,打印就不会出现 “本页由lodop试用版输出 ”    
        LODOP.SET_LICENSES("","XXXXX","XXXX","");
    
        //=======================================================
            return LODOP;
        } catch (err) {
            alert("getLodop出错:" + err);
        }
    }
    
    

    二,获取本地电脑连接都有哪些打印机

    先上效果图:

    在这里插入图片描述
    代码如下:

     // 先导入getLodop方法
    import { getLodop } from "plugin/LodopFuncs.js";
     // 获取打印机列表
     getPrintList() {
         let LODOP = getLodop();
         if (!LODOP)return
         // 获取打印机个数
         let count = LODOP.GET_PRINTER_COUNT()
         let printValue = LODOP.GET_PRINTER_NAME(-1) //获取默认打印机
         this.printList = Array(count).fill(null).map((...args) => {
             if (printValue === LODOP.GET_PRINTER_NAME(args[1])){
                 this.printDefault = args[1]
             }
             return {
                 value: args[1], // args[1]为数组索引
                 label: LODOP.GET_PRINTER_NAME(args[1]) // 获取打印机名称
             }
         })
    
     },
    

    三,实现自动打印和批量打印

    自动打印没法上效果图了,自己试一下就可以了 ^ _ ^

    不过可以上,我们仓储系统的场景图:
    在这里插入图片描述

    代码如下:

     // 多选
        handleSelectionChange(val) {
          this.multipleSelection = val;
        },
        // 批量打印
        async batchPrint() {
          if(!this.multipleSelection.length){
            this.$utils.commonUtils.tip('请选择','warning')
            return
          }
          for await(const key of this.multipleSelection) {
            this.getPrintData(key.printUrl)
          }
        },
        // 打印
        handleReview(index, row) {
          this.getPrintData(row.printUrl)
        },
       // 获取面单信息数组数据
        async getPrintData(url) {
          if(url) {
           this.printUrlList = url.split(';')
           this.printInfo()
          }
        },
        // 打印面单 
        async printInfo() {
          for await (const item of this.printUrlList) {
            this.printEveryItem(item)
          }
        },
        // 打印每项
        printEveryItem(item) {
          let self = this;
          let LODOP = getLodop(); //调用getLodop获取LODOP对象
          return new Promise(function (resolve) {
            setTimeout(() => {
             LODOP.PRINT_INIT("");
             let strStyleCSS = `<style type='text/css' rel='stylesheet'>.img1{display:block;margin:10px;width:360;height:360}</style>`
             let html = `<head>${strStyleCSS}</head><body><div class='print-card'>
                    <img src=${item} class='img1' />
                </div><body>`
             LODOP.ADD_PRINT_HTM(0,0,380,380,html);
             LODOP.SET_PRINT_PAGESIZE(1,1000,1000,"");   
             LODOP.PRINT();
            }, 1000);
          });
        }  
      
    

    单个打印和批量打印实现了,自动打印就简单了,满足条件调用打印方法即可,如仓储系统实际业务需求,当播种完成自动打印

    至此,前端实现了自动打印 批量打印功能,更多功能可自行扩展,Lodop 等你探索!

    PS:未来的你,一定会感谢今天拼命努力的自己!
    展开全文
  • Web页面分页打印小结-简单实现

    万次阅读 2016-11-30 14:42:37
    最近开发单位内部系统中的档案管理时,档案管理员提出需求,希望在打印档案盒中卷内目录,分页打印,因为目前的打印针对超过一页的档案记录,在第二页中无法显 示表头,还会出现表格断开不连续如图: 档案...
  • 一、系统介绍 1.开发环境 2.技术选型 3.系统功能 4.数据库 5.工程截图 二、系统展示 1.登录界面 2.主页面 3.系统信息管理-添加角色信息 4.系统信息管理-管理角色信息 5.系统信息管理-添加用户信息 6....
  • 做ERP的时候遇到个报表设计以及打印功能实现,客户的需求大致是:客户端电脑可以直接修改报表模板,点击打印按钮直接调用默认打印机打出报表。免去预览以及打印机设置如设置纸张大小,页眉之类。。。因为客户需要...
  • 系统请求参数和响应参数,进行输出打印。支持表单提交及json提交。 二、过滤器与拦截器  首先,了解一下过滤器和拦截器。两者功能很类似,但具体技术实现,相去甚远。对比两者的区别前,先理解一下AOP,AOP不是...
  • web应用票据打印实现(一)

    千次阅读 2015-03-06 10:11:47
    web应用浏览器端票据打印实现 许多web应用的开发中都会涉及到票据打印的功能。常用的Web打印实现的方式有: 1.浏览器打印接口 调用window.print()方法,调用打印机功能打印当前窗口的内容,与单击浏览器的打印...
  • Web打印插件 Lodop

    2014-04-02 13:57:18
    Lodop设计者对WEB下的打印开发任务进行了分类汇总,高度抽象,设计出仅用几个功能函数,就可实现复杂的打印任务,尽量减少使用者的知识累赘。控件发布包有3个系统文件组成,全部功能用几个控件参数和2组功能函数来...
  • C#打印大全(WinForm+Web+ASP.NET)

    热门讨论 2009-07-31 14:32:37
    这是我自己根据日常工作上和学习上收藏的关于C#的打印资料!之前在网上搜了很久都没有找的合适的!...里面包括C#里面的Winform打印开发和ASP.NET的打印开发、还有开发BS系统时的打印都有! 虽然是贵了点!但绝对值得!
  • 系统采用B/S模式实现,管理员,教师,学生均可以通过浏览器访问本系统。 来完成,学生成绩的输入,管理和查询,教师教学质量的评价和分数查询,课程的查询,课程表的打印,以及系统内部信息的发布。 系统数据大量都...
  • 兼容所有浏览器的Web打印控件的设计方案 ...在需要打印的客户端电脑(操作系统为:Windows系统,XP需要先安装.NET Framework 3.5,其它版本的Windows不需要安装)上下载安装打印的客户端软件。检...
  • Lodop6.0web打印控件及技术手册

    热门讨论 2011-10-09 17:04:03
    Lodop设计者对WEB下的打印开发任务进行了分类汇总,高度抽象,设计出仅用几个功能函数,就可实现复杂的打印任务,尽量减少使用者的知识累赘。控件发布包有3个系统文件组成,全部功能用几个控件参数和2组功能函数来...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 160,256
精华内容 64,102
关键字:

web系统实现打印