精华内容
下载资源
问答
  • 前端实现自动打印
    万次阅读
    2019-08-23 11:09:06

    前端实现打印功能的方法有很多
    方法一:window.print()
    window.print()默认打印的body的内容
    如果想实现局部打印,就要重新给body的内容赋值,后续执行完了打印再将内容还原回去。

        //根据div标签ID拿到div中的局部内容
        bdhtml=window.document.body.innerHTML; 
        var jubuData = document.getElementById("printcontent").innerHTML;
        //把获取的 局部div内容赋给body标签, 相当于重置了 body里的内容
        window.document.body.innerHTML= jubuData; 
        //调用打印功能
        window.print();
        window.document.body.innerHTML=bdhtml;//重新给页面内容赋值;
        return false;
    

    上述方法有个缺点就是在当前也操作,window.document.body的内容重新渲染,打印完会有刷新,影响用户的体验。
    方法二:利用iframe,iframe.contentWindow.print()
    与原生态的print() 区别在于,取消打印页面后可以完整保留当前访问页面的内容
    利用iframe的print()的方法,将要局部打印的内容放在iframe中,缺点是要将内容的样式也需要用JS生成,如果要打印的内容很多,难免不方便

    <iframe width='100%' height='200px' ref='iframe' style='display: none;' id='iframe'></iframe>
    JS:
          let doc = this.$refs.reconciliationWrapper.innerHTML
          this.$refs.iframe.contentWindow.document.write('<html><head><style media="print">@page { margin: 0mm 10mm; }body{margin-top: 50px; text-align: center;}</style></head><body><div>'+ doc +'</div></body></html>')
          this.$refs.iframe.contentWindow.print()
    

    这里的样式也是需要在JS中去生成的,如果样式很复杂,那么写样式也是个大工程,如何解决这个问题?将要打印的内容生成一个图片然后放在iframe中。
    利用html2canvas 生成截图

        // 打印账单
        printBill () {
          this.printDisabled = true  // 点击打印按钮禁止重复点击
          setTimeout(_ => {      // 按钮显示为禁止了再去执行截图功能
            html2canvas(this.$refs.reconciliationWrapper, {
              backgroundColor: null,
              scale: 1.3
            }).then((canvas) => {
              let dataURL = canvas.toDataURL('image/png')
              this.$refs.iframe.contentWindow.document.body.innerHTML = ''  // 清空上一次打印的内容
              this.$refs.iframe.contentWindow.document.write('<html><head><style media="print">@page { margin: 0mm 10mm; }body{margin-top: 50px; text-align: center;}</style></head><body><img src=' + dataURL + '></body></html>')
              setTimeout(_ => {
                this.$refs.iframe.contentWindow.print()
              }, 0)
              this.printDisabled = false
            })
          }, 100)
        }
    

    然后将截图放在iframe中的img打印,截图一般会有些模糊,调整html2canvas的参数scale,放大缩小的比例,要根据实际情况调整。

    更多相关内容
  • 前端实现自动打印 批量打印

    千次阅读 2021-04-20 11:18:01
    众所周知,前端打印的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 等你探索!

    转载于:https://blog.csdn.net/weixin_45115705/article/details/102717637

    展开全文
  • web前端实现多页打印

    2020-11-19 13:46:28
    web前端实现打印功能,并且可多页打印
  • js打印,将数据读取到打印页面,用js截取,从而实现打印指定模块!打印的时候如果页面数据过多,打印机可以自动分页打印!我的是hp的打印机,下载的朋友可以试试!注意,本人声明:这个并不是针对于打印分页而写,...
  • 本文介绍JQuery插件Jqprint实现网页打印,不懂的同学正可借此机会学习下,以备不时之需,话不多说,切入主题
  • 1、首先需要安装 print-js 插件 npm install print-js --save 2、在需要用的组件中引用 import print from 'print-js' 3、在需要打印内容的地方设置id ...5、函数具体实现 const ok = () => {.

    1、首先需要安装 print-js 插件

    npm install print-js --save

    2、在需要用的组件中引用

    import print from 'print-js'

     3、在需要打印内容的地方设置id

    4、 定义一个函数 点击打印时触发此函数

    <Button loading={this.confirmLoading} onClick={this.ok}>打印凭证</Button>

    5、函数具体实现

    const ok = () => {
          confirmLoading.value = true;   //loading 效果开启
          print({
            printable: "printVoucherDetail",  //指定打印区域
            type: "html",  //type:可以是 html 、pdf、 json 等
            targetStyles: ["*"],   // 这样设置继承了页面要打印元素原有的css属性
               //传入自定义样式的字符串,使用在要打印的html页面 也就是纸上的样子。
            style: "@page{size:auto;margin:1cm 1cm 0cm 1cm;}@media print{font-size: 28px;}",
          })
            //设置定时器5秒后关闭loading
          setTimeout(() => { 
            confirmLoading.value = false
          }, 5000)
        }

    print其他设置属性

    printable:要打印的id。

    type:可以是 html 、pdf、 json 等。

    properties:是打印json时所需要的数据属性。

    gridHeaderStyle和gridStyle都是打印json时可选的样式。

    repeatTableHeader:在打印JSON数据时使用。设置为时false,数据表标题将仅在第一页显示。

    scanStyles:设置为false时,库将不处理应用于正在打印的html的样式。使用css参数时很有用。

    targetStyles: [’*’],这样设置继承了页面要打印元素原有的css属性。

    style:传入自定义样式的字符串,使用在要打印的html页面 也就是纸上的样子。

    ignoreElements:传入要打印的div中的子元素id,使其不打印。非常好用
     

    展开全文
  • js前端打印s分页实现共几页和第几页功能,触底自动换页,并每页表头新增固定部分,包括金额大写转换和当前时间获取
  • vue项目 前端实现打印功能

    千次阅读 2021-02-07 14:40:23
    vue项目 前端实现打印功能 vue已经帮我们封装好了使用非常方便的安装包,安装了依赖包之后可以很简单地就实现打印功能。 使用步骤如下: 1.下载安装包 npm install vue-print-nb --save 2.在main.js文件中引入...

    vue项目 前端实现打印功能

    vue已经帮我们封装好了使用非常方便的安装包,安装了依赖包之后可以很简单地就实现打印功能。

    使用步骤如下:

    1.下载安装包

    npm install vue-print-nb --save
    

    2.在main.js文件中引入安装包并注册组件

    import Print from 'vue-print-nb'
    Vue.use(Print);
    

    3.使用Print

    3.1 给要打印的dom标签(要打印的内容部分)绑定一个id
    3.2 给button按钮绑定v-print指令,值是上面绑定的那个id,要加 # 哦,类似于选择器的写法
    示例:

    <el-button type="primary" v-print="'#print_content'">打印</el-button>
     
    <div  id="print_content" >
    	<table>
    		 <tr>
                  <th colspan="2"></th>
                  <th class="table_head">固定资产投资</th>
                  <th class="table_head">股权投资</th>
                  <th class="table_head">房地产投资</th>
                  <th class="table_head" style=" ">合计</th>
                </tr>
                <tr>
                  <td colspan="2">计划总额(万元)</td>
                  <td>{{upload['固定资产投资']['总额']}}</td>
                  <td>{{upload['股权投资']['总额']}}</td>
                  <td>{{upload['房地产投资']['总额']}}</td>
                  <td>{{upload['合计']['总额']}}</td>
                </tr>
                <tr>
                  <td rowspan="2">按投资方向(万元)</td>
                  <td>主业</td>
                  <td>{{upload['固定资产投资']['主业']}}</td>
                  <td>{{upload['股权投资']['主业']}}</td>
                  <td>{{upload['房地产投资']['主业']}}</td>
                  <td>{{upload['合计']['主业']}}</td>
                </tr>
                <tr>
                  <td>非主业</td>
                  <td>{{upload['固定资产投资']['非主业']}}</td>
                  <td>{{upload['股权投资']['非主业']}}</td>
                  <td>{{upload['房地产投资']['非主业']}}</td>
                  <td>{{upload['合计']['非主业']}}</td>
                </tr>
    	</table>
    </div>
    
    展开全文
  • 主要介绍了JavaScript 实现打印,打印预览,打印设置的方法及示例分享,需要的朋友可以参考下
  • Vue前端实现打印

    2021-07-12 14:44:10
    Vue前端实现打印 项目中遇到需要打印的需求,摸索的两种方法 1.使用vue+iframe iframe结构 <!-- :src="httpUrl + iframeUrl" iframe链接的地址 --> <div ref="print" id="print" > <iframe id=...
  • window.print() 前端实现网页打印详解

    千次阅读 2020-08-21 15:41:10
    print作为浏览已经比较成熟的技术可以经常被用来打印页面的部分内容,我们可以在MDN上查看到相关的简单介绍。 一、print()方法 print() 方法用于打印当前窗口的内容。调用 print() 方法会产生一个打印预览弹框,让...
  • 前端 打印 分页显示

    千次阅读 2022-03-22 17:14:44
    charset=UTF-8"> 打印title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <style> h4 { font-size: 23px;...
  • 采用JQuery实现打印HTML表格自动按多少行分页,打印时分页
  • Print.js 官方文档:https://printjs.crabbly.com/ 前言:近来项目有个需求,很简单的打印功能,但是需要纯前端实现。 需求:一个分页表格,点击打印的时候,需要把所有的页面的数据一次性全部打印出来。 前端打印...
  • vue前端工程自动

    2021-11-22 11:15:19
    这几天再忙着 几天没有更新了 今天给大家总结一下前端工程自动化吧 首先 先理解一下什么是自动化 我自己理解的就是 好比一个机器 你设定好程序 无论你怎么操作 都不影响流程和结果 就按照你设定好的程序走 先思考...
  • 在浏览器中点击打印按钮(自定义),不需要每次点击chrome的打印预览框,直接开始打印,从而实现可以批量打印。 打开chrome浏览器Url输入框输入chrome://flags/ 设置 将Enable New Print Preview UI layout设置...
  • 1. 分类原生打印,window.print() 实现插件实现,很多种,我这里选择的是 jquery.print.js优缺点原生打印的好处就不多说了,简单方便,全屏打印,如果对打印功能没有什么特殊要求可以直接使用即可;使用插件的好处...
  • 前端vue项目实现批量打印功能

    千次阅读 2021-01-27 03:17:15
    在项目中遇到一个问题需要实现单页打印和批量打印功能,研究了测试了一番解决了,把相关的功能记录下,方便自己以后查阅,本项目vue cli3环境下的,其他的前端框架也是类似的:一、单页打印vue-print-nb插件:这是...
  • 一、通过ref方式获取元素进行打印 1.封装一个js文件 // 打印类属性、方法定义 /* eslint-disable */ const Print = function (dom, options) { if (!(this instanceof Print)) return new Print(dom, options); ...
  • js实现打印局部页面

    2014-08-30 00:03:03
    利用js代码实现文档部分打印功能 文档中除了doPrint 函数外 还有其它有用函数
  • 2. 前端使用vue+vant的uploader组件实现,使用yarn进行包管理 3. 后端使用.net core 实现。 4. 文件类型限制需在前端页面中直接修改 accept属性。 5. 使用时先yarn run build ,然后发布.net core 后端,然后将生成...
  • 遇到的问题: 打印预览的时候表格被分割了,就是一共两页而其中一行显示在不同的两个页面。如下图:
  • 或者在某些快餐店吃饭时经常听到“您有新的订单,请及时处理”然后就听见打印机吱吱吱的将订单自动打印出来了。 当然如果你接入了美团、饿了么等平台,他们会帮你推荐一整套的软、硬件设备,但每单的利润也会分走你...
  • 随着devops的发展,前端部署变得越来越简单,可控性也越来越高,本文基于docker+nginx+jenkins+gitee来实现前端自动化部署流程,具体实现效果为开发人员在本地开发,开发push提交代码到指定分支,自动触发jenkins...
  • 1. 需求背景前段时间公司项目需要在商户电脑上调用商户自己的热敏打印机打印商户的客户的购物小票(如下图),但FE的纯js显然不能实现该功能,因此采用nw来实现。当时的项目已有一个web页面,因此在nw里将已有的html...
  • 1、首先电脑需要安装TSCActiveX控件;TSCActiveX.dll,TSCLIB.dll放入系统盘里(32和64)(我的打印机型号是TSC TTP-244 Pro);...4、实现打印二维码、条码的功能的代码: <!DOCTYPE html> <html lang="en"
  • vue实现打印功能

    千次阅读 2022-03-09 11:11:55
    打印功能可以自己使用原生js(window.print())实现,其次就是使用插件,介绍两个打印插件 一、vue-print-nb:这个插件使用起来便捷,用法如下 1.安装 npm install vue-print-nb --save 2.在main.js文件中注册使用 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 51,954
精华内容 20,781
热门标签
关键字:

前端实现自动打印