精华内容
下载资源
问答
  • chrome实现直接打印 预览页自动点击打印 准备工作: 电脑连接打印机,并设置一个默认打印机 --kiosk-printing (chrome启动加该参数,这是在预览页自动点击打印按钮的) 在chrome的快捷方式这里加上该...

    chrome实现直接打印

    预览页自动点击打印

    准备工作:

    1. 电脑连接打印机,并设置一个默认打印机

    2. --kiosk-printing (chrome启动加该参数,这是在预览页自动点击打印按钮的)

    在chrome的快捷方式这里加上该参数,重启chrome

     

    function dayin(){
    	var newWindow=window.open('','_blank','width=1,height=1,top=10000,left=10000');
    	var html = "";// 这里的html可由别处传参,也可自己去接口获取
    	newWindow.document.write(html);
    	newWindow.document.close();
    	newWindow.print();
    	newWindow.close();
    }
    

    这样在chrome中调用这段js打印内容时,就可以实现直接打印。

    window.open的方式有个缺陷,就是会弹出新窗口,虽然设置其位置不可见了,但是有的用户chrome的设置在弹出新窗口时会拦截,可以用iframe来解决。

                        var iframe = document.createElement('IFRAME');
                        iframe.setAttribute('style', 'position:absolute;width:0px;height:0px;left:-500px;top:-500px;');
                        document.body.appendChild(iframe);
                        var doc = iframe.contentWindow.document;
                        // 实践证明 doc.innerHTML = '要打印的html内容';这种写法是不行的
                        // doc.innerHTML = '要打印的html内容';
                        // 需要用
                        doc.write('要打印的html内容');
                        iframe.contentWindow.focus();
                        iframe.contentWindow.print();
                        document.body.removeChild(iframe);

    r

    展开全文
  • 调用浏览器打印局部内容 //打印 $scope.print = function() { var bdhtml=window.document.body.innerHTML; var sprnstr=""; //开始打印标识字符串有17个字符 var eprnstr=""; //结束打印标识字符串 var ...

    调用浏览器打印局部内容

    在这里插入图片描述

    //打印
    $scope.print = function() {
    var bdhtml=window.document.body.innerHTML;
    var sprnstr=" "; //开始打印标识字符串有17个字符
    var eprnstr=" "; //结束打印标识字符串
    var prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17); //从开始打印标识之后的内容
    prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr)); //截取开始标识和结束标识之间的内容
    prnhtml= prnhtml.replace(‘300px’,‘1000px’);
    var f = document.getElementById(‘printf’);
    f.contentDocument.write(prnhtml); //写入到新的iframe窗口
    f.contentDocument.close();
    f.contentWindow.print();
    };

    需要在页面定义一个printf,startprint代表开始,endprint代表结束

    在这里插入图片描述

    展开全文
  • 局部打印内容

    2017-06-30 17:07:49
    客户要求需要使用打印功能。之前使用window对象浏览器内置打印功能可以实现简单打印功能 但是输入框 选择框中的值并没有打印上去。宝宝心里苦啊。。。。。 接着找 终于找一个插件 jQuery自带插件 printArea.js 区域...

    客户要求需要使用打印功能。之前使用window对象浏览器内置打印功能可以实现简单打印功能 但是输入框 选择框中的值并没有打印上去。宝宝心里苦啊。。。。。

    接着找 终于找一个插件 jQuery自带插件 printArea.js 区域打印插件 简单粗暴。。

    第一步 引入jQuery 相关js  printArea.js 

    第二步使用  $(selector).printArea();

    完事 收工!!!(附件可以去官网下,有相关的demo 提供下载,同时支持修改打印的样式详细可以从demo中获取)

    demo:下载传送门http://plugins.jquery.com/PrintArea/



    展开全文
  • 接下来我要总结的打印局部div并且带样式方法有两种,分别都是在react项目中使用: 第一种就是简单粗暴的方式: 1、首先在项目中引入Print.js文件: /* * @Author: 张前领 * @Date: 2019-10-14 11:04:37 */ ...

    接下来我要总结的打印局部div并且带样式方法有两种,分别都是在react项目中使用:

    第一种就是简单粗暴的方式:

    1、首先在项目中引入Print.js文件:

    /*
     * @Author: 张前领
     * @Date: 2019-10-14 11:04:37
     */
    
       export default function Print (dom, options) {
        if (!(this instanceof Print)) return new Print(dom, options);
    
        this.options = this.extend({
          noPrint: '.no-print',
          onStart: function () { },
          onEnd: function () { }
        }, options);
    
        if ((typeof dom) === "string") {
          this.dom = document.querySelector(dom);
        } else {
          this.dom = dom;
        }
    
        this.init();
      };
      Print.prototype = {
        init: function () {
          var content = this.getStyle() + this.getHtml();
          this.writeIframe(content);
        },
        extend: function (obj, obj2) {
          for (var k in obj2) {
            obj[k] = obj2[k];
          }
          return obj;
        },
    
        getStyle: function () {
          var str = "",
            styles = document.querySelectorAll('style,link');
          for (var i = 0; i < styles.length; i++) {
            str += styles[i].outerHTML;
          }
          str += "<style>" + (this.options.noPrint ? this.options.noPrint : '.no-print') + "{display:none;}</style>";
    
          return str;
        },
    
        getHtml: function () {
          var inputs = document.querySelectorAll('input');
          var textareas = document.querySelectorAll('textarea');
          var selects = document.querySelectorAll('select');
    
          for (var k in inputs) {
            if (inputs[k].type == "checkbox" || inputs[k].type == "radio") {
              if (inputs[k].checked == true) {
                inputs[k].setAttribute('checked', "checked")
              } else {
                inputs[k].removeAttribute('checked')
              }
            } else if (inputs[k].type == "text") {
              inputs[k].setAttribute('value', inputs[k].value)
            }
          }
    
          for (var k2 in textareas) {
            if (textareas[k2].type == 'textarea') {
              textareas[k2].innerHTML = textareas[k2].value
            }
          }
    
          for (var k3 in selects) {
            if (selects[k3].type == 'select-one') {
              var child = selects[k3].children;
              for (var i in child) {
                if (child[i].tagName == 'OPTION') {
                  if (child[i].selected == true) {
                    child[i].setAttribute('selected', "selected")
                  } else {
                    child[i].removeAttribute('selected')
                  }
                }
              }
            }
          }
    
          return this.dom.outerHTML;
        },
    
        writeIframe: function (content) {
          var w, doc, iframe = document.createElement('iframe'),
            f = document.body.appendChild(iframe);
          iframe.id = "myIframe";
          iframe.style = "position:absolute;width:0;height:0;top:-10px;left:-10px;";
    
          w = f.contentWindow || f.contentDocument;
          doc = f.contentDocument || f.contentWindow.document;
          doc.open();
          doc.write(content);
          doc.close();
          this.toPrint(w, function () {
            document.body.removeChild(iframe)
          });
        },
    
        toPrint: function (w, cb) {
          var _this = this;
          w.onload = function () {
            try {
              setTimeout(function () {
                w.focus();
                typeof _this.options.onStart === 'function' && _this.options.onStart();
                if (!w.document.execCommand('print', false, null)) {
                  w.print();
                }
                typeof _this.options.onEnd === 'function' && _this.options.onEnd();
                w.close();
                cb && cb()
              });
            } catch (err) {
              console.log('err', err);
            }
          }
        }
      };
      window.Print = Print;

    在需要打印的地方执行该函数:

    例如:

    import Print from './Print.js'

    function handlePrint() {
      Print("#billDetail");
    }

    其中Print()函数内部传递的参数为需要打印的div标签的div,这样就可以实现了。

     

    第二种打印方式是通过自己封装获取打印样式,然后调用此函数即可:

    //引入样式
     function getStyle() {
      var str = "",
        styles = document.querySelectorAll('style,link');
      for (var i = 0; i < styles.length; i++) {
        str += styles[i].outerHTML;
      }
      return str;
    }
    //调用打印
    print=()=>{
      const el = document.getElementById('printRef');
      const iframe = document.createElement('iframe');
      let doc = null;
      iframe.setAttribute('style', 'position:absolute;width:0px;height:0px;left:500px;top:500px;background:blue');
      document.body.appendChild(iframe);
      doc = iframe.contentWindow.document;
      // 引入打印的专有CSS样式
      doc.write("<html><head>");
      doc.write(`<link rel='stylesheet' href='../index.less' />`);
      doc.write("</head><body>");
      doc.write(el.innerHTML);
      doc.write("</body></html>"); 
      console.log(iframe.contentWindow.document);
      var appendStyle=document.createElement("style");
      appendStyle.innerText=getStyle();
      doc.getElementsByTagName("head")[0].appendChild(appendStyle);
      doc.close();
      // 获取iframe的焦点,从iframe开始打印
      iframe.contentWindow.focus();
      iframe.contentWindow.print();
      if (navigator.userAgent.indexOf("MSIE") > 0)
      {
          document.body.removeChild(iframe);
      }
    }

    点击打印按钮就会触发此函数,这样打印样式和打印内容都会在打印预览中展现出来。

    记得有一个比较坑的地方,在写样式的时候,一定加上如下内容:

    @page {
      size: A4;
      margin:20px auto;
    }
    @media print {
      html, body {
          min-width: 0;
          width: 210mm; 
          height: auto;
          text-align: center!important;
      }
      .print-hide {
          visibility: hidden!important;
          display: none!important;
      }
    }

    如果还有需求,需要在特定地方换页,剩余内容不管本页有没有地方都打印在下一页,此时,需要在换页地方加上一个样式

    style={{page-break-before:'always'}}

    展开全文
  • 前言本文主要介绍了关于angular实现页面打印局部功能的相关内容,分享出来供大家参考,下面话不多说了,来一起看看详细的介绍吧。场景在页面显示的时候是分页现实的,当前页面只有10条数据,但是打印需要打印完整的...
  • js 打印页面局部内容

    2012-07-04 17:45:26
    ///打印指定区域页面 ///说明:obj–通过getElementById或其它方式获取标签标识,打印此obj内的文字 ///开发:王洪剑 ///日期:2009-8-7 function startPrint(obj) {  var oWin=window.open("",...
  • window.print()打印网页局部内容

    千次阅读 2014-07-18 09:46:22
    用window.print()打印指定div里面的内容 今天客户让添加个打印证照功能,直接用window.print()打印的是整个页面,而用以下方法就可以只打印证明了   window.print可以打印网页,但有时候我们只希望打印...
  • js或jquery实现页面打印局部打印js或jquery实现页面打印(局部打印)1、js实现(可实现局部打印)js打印.noprint{display : none }不需要打印的地方function preview(oper){if (oper < 10){bdhtml=window.document....
  • JS 打印网页局部内容

    2009-10-26 14:03:00
    HTML: ........ JS: function doPrint() { bdhtml=window.document.body.innerHTML; sprnstr="<ABC>"; eprnstr="</ABC>";...以上为打印标记<ABC></ABC>之间的内容; 执行 doPrint() 函数
  • js打印局部页面

    2019-03-28 03:56:21
    效果说明 原页面: ...因为 window.print() 只能打印整张页面,所以想要实现打印局部页面的效果,必须要在打印的时候,页面中只显示你想打印的那部分内容。 也就是说,要去掉其他内容。 有下面两种...
  • 使用js打印网页局部图片(内容

    万次阅读 2018-07-30 21:20:36
    //定义打印区域起始字符,根据这个截取网页局部内容 sprnstr= "<!--startprint-->" ; //打印区域开始的标记 eprnstr= "<!--endprint-->" ; //打印区域结束的标记 prnhtml=bdhtml.substr(bdhtml.indexOf...
  • 打印局部页面 Asp.net 打印局部页面

    千次阅读 2010-04-20 09:40:00
    打印局部页面 1. window.print(); 打印Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->input class="NOPRINT" type="b
  • 主要介绍了JS选择打印内容,主要是把自己要打印的东西用一个DIV层抱起来,需要的朋友可以参考下
  • 如何打印局部页面

    2020-12-01 10:15:03
    经常会有需要打印页面的情况,常规的打印方案,web报表平台使用第三方插件或者控件 Activex 控件,虽然打印很完美,能够完美的支持各种纸张,但是却只能打印整个报表, 不能进行局部打印,所以需要进行局部打印,...
  • Html局部打印

    千次阅读 2018-07-26 15:44:43
    通常在浏览网页的时候,网页上总是出现一些和内容无关的内容,在打印的时候,要是把整个网页都打印下来,总会有些不方便。。。所以在有需要打印的网页上稍微设置一下打印页是很有必要的。。。 首先在head里面加入...
  • 批量打印之jquery局部打印

    千次阅读 2017-10-12 10:49:20
    上个月弄了个批量打印的功能,觉得以后可能用得着,就写...这里先说jQuery的局部打印功能(个人觉得jqprint和PrintArea就打印功能这块大同小异,所以就说简单点的PrintArea)   1、导Jquery库:想用Jquery的功能...
  • 封装好了的js可以打印画面的局部内容,但是遇到画布(canvas)时,画面的内容就不能被正常打印出来,解决这个问题的方法是,调用打印之前,先创建一个img的元素,把img宽度和高度设置成跟画布一样的值,调用画布...
  • 在Web前端开发中,常有仅需要打印页面局部内容的要求。总的来说,有两种方法可以实现此目标: 一、使用css方式 示例代码:  .selector1 { ... }  .selector2 { ... }  .selector3 { ... } /* 为打印...
  • 打印局部页面

    2008-05-18 21:16:00
    always } 第一个在不需要打印的标签上添加(子标签也将不被打印),第二个在需要换行的标签处添加(该标签所表示的内容将在当前打印的一页内)接下来通过调用最基本的js语句window.print()就可实现页面局部打印
  • JS打印当前页面或打印局部div

    万次阅读 2016-10-19 16:40:14
    /** * Created by Administrator on 2016/10/19. *//** * 打印当前页面 */ function printpage() { ... * 打印局部 * 此js函数用于解决打印指定div的问题 */ function printdiv(printpage) { var headhtml =
  • php项目中所展示的页面需要做打印功能 不废话 直接看 ...先下载插件不然都是白扯:Jquery打印插件下载地址 Ps:粘的时候路径改成自己的每个人的路径都不一样,很...选择要打印局部Div <div class="ant-card"> ...
  • 另外几种js局部打印的方法: 移花接木: 打印的时候,把需要打印内容替换成整个body内容(用户会在打印的时候看到变化,客户体验不太好) 代码如下: function preview(oper) ……{ if (oper < 10)……{ bdhtml...
  • js局部打印

    2017-08-18 14:01:00
    局部打印的原理:1、将局部的div等元素的outHTML的值赋给一个新的页面。2、结果发现局部元素的css样式没有引用过来,导致页面混乱。需要将css一同引用过来。3、调用window.print()进行打印的时候,发现html字符串中...
  • js或jquery实现页面打印(局部打印) 1、js实现(可实现局部打印) 代码如下: <html> <title>js打印</title> <head></head><body> <input id=”btnPrint” type=”button” ...
  • jQuery网页局部打印代码,此代码可打印页面部分内容
  • vue打印局部区域样式CSS错乱不生效vue打印局部区域样式CSS错乱不生效最近vue项目要实现打印网页中局部区域的要求,但是用下列方式的时候显得样式全部都没有作用上printContent(){let subOutputRankPrint = document....
  • 本文主要介绍了关于angular实现页面打印局部功能的相关内容,分享出来供大家参考,下面话不多说了,来一起看看详细的介绍吧。 场景 在页面显示的时候是分页现实的,当前页面只有10条数据,但是打印需要打印完整的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 109,532
精华内容 43,812
关键字:

怎样打印局部内容