关于前端打印知识分享

常见前端打印处理思路
提起浏览器打印，不得不说一下前端打印常见的几种处理方式，由于直接调用window.print()调用浏览器打印功能，对于没有换页，内容不复杂的页面，是完全可以做到的，但是，对于要求比较苛刻的场景下就有点差强人意了，打印效果只能呵呵了。因此，为了方便大家以后使用打印功能，特别总结一下比较好的打印方式，和一些稍微差点的打印方法，并把他们优缺点总结如下。

1、通过id值获取当前页面中需要打印的DOM元素，通过打开新窗口来实现打印功能，这样做的优点是不影响现在页面的逻辑，缺点是目前大多数浏览器会屏蔽掉open方法弹出来的窗口，并且不能自动引入样式，打印效果差，因此，不太让人满意。

2、通过id值获取当前页面中需要打印的DOM元素，通过将现在页面中body中的innerHTML替换成需要打印的DOM元素内容。缺点是，破坏现有页面的逻辑操作，如果用户打印后，还要在原来操作基础上进行逻辑处理，显然是不可能了。优点是，打印预览效果和页面中效果一致，自动引入样式，打印效果良好。

3、通过id值获取当前页面中需要打印的DOM元素，将获取到的DOM元素，插入到iframe中，这样页面内容保持不变，不会破坏当前页面逻辑，打印后还可以在现有基础上进行逻辑处理后再打印，也不会弹出多余页面。
4、使用jsPdf插件生成pdf后打印，这种方式也是比较好的，但是如果对数据实时性要求比较高的话，就不太适合了。
当然了，转成pdf方式不止一种，也可以使用第三种方式进入打印预览界面，点击生成pdf。

下面就是实现第三种iframe方法实现打印：

（1）封装自己的打印函数，在需要打印处理的时候调用此函数。


function print(){

      const el = document.getElementById('需要打印的内容id值');

      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("</head><body>");

      doc.write(el.innerHTML);

      doc.write("</body></html>");

      var ys="html,body{height:100%}h2{color:red}";

      var style=document.createElement("style");

      style.innerText=ys;

      doc.getElementsByTagName("head")[0].appendChild(style);

      doc.close();

      // 获取iframe的焦点，从iframe开始打印

      iframe.contentWindow.focus();

      iframe.contentWindow.print();

      iframe.contentWindow.close();

      if (navigator.userAgent.indexOf("MSIE") > 0)

      {

          document.body.removeChild(iframe);

      }

    }

（2）上边获取样式有些问题，因此，要在上边的基础上，封装自己的获取样式函数

function getStyle() {
    let str = "";
    let styles = document.querySelectorAll('style,link');
    for (var i = 0; i < styles.length; i++) {
      str += styles[i].outerHTML;
    }
    return str;
  }

在写入样式的时候，调用此函数即可，将变量ys改为

var ys=getStyle()，就会将所有内联样式，外联样式，行内样式（通过dom操作获取打印内容时连同DOM一起引入）引入进来。这样点击打印，进入打印预览界面才像回事。

注意：如果你的打印预览界面，只有一页内容，那就是在设置打印样式的时候把height写死了。

换页

做好上边步骤还远远不够，如果，要在特定的地方加入换页，那又该怎么办？

有人会说：将打印内容获取到后，进入打印预览界面看看，如果在业务需要换页的地方刚好换了页，就不用处理了，如果没有换页，看看差多少距离，手动添加空内容将他换页。那么问题来了，如果打印相同的内容100份，总不能点一点慢慢调试吧。

针对上述问题，解决方法如下：

在页面样式的less文件中加入如下内容

@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;
  }
}
.page{
  page-break-before:always !important;
}

如果在某个地方前边换页，只需要在该标签中加入className={style.page}(react中，根据环境而定)。
又有人说了，如果我想在某个地方的前边和后边通过时换页呢？

此时只需要将page样式做出如下修改：

.page{
  page-break-before:always !important;
  page-break-after:always !important;
}

打印前后事件

有些需求需要在打印后做一些逻辑处理，比如：告诉后端打印了多少等。此时需要使用打印前或者打印后事件。

（1）打印后事件，会在点击打印预览界面中确定或者取消时候触发，因此不能确定是点击的确定或者取消，使用的时候需要注意。

window.onafterprint = (event) => {
  console.log('After print');
};
或者
window.addEventListener('afterprint', ()=> {
  console.log('点击打印或点击取消');
});

（2）打印前事件，在调用windwo.print()后就会触发，进入打印预览页前被触发。

window.onbeforeprint = (event) => {
  console.log('before print');
};
或者
window.addEventListener('beforeprint', ()=> {
  console.log('调用打印预览');
});

打印二维码

如果在react项目中使用二维码，可以安装qrcode.react插件,使用的时候如下

<QRCode
  value={`扫码内容`}
  size={100} //二维码的宽高尺寸
  fgColor="#000"  //二维码的颜色
  renderAs='svg'
  level='L'
/>

由于二维码默认renderAs属性值为canvas，浏览器打印页面会自动忽略背景图，因此，在页面上有二维码，进入打印预览界面就失踪了，将renderAs属性值改为svg即可解决。

留在最后的彩蛋

如果你在打印预览界面看到页头或者页脚有网址或者当前网页标题，这不是你想要的，此时可以在样式中加入如下内容解决：

@page {
  size: auto;
  margin: 0mm; 
}

还没结束，彩蛋继续

附录：封装的打印函数

export default function Print(dom, options) {
  if (!(this instanceof Print)) return new Print(dom, options);

  this.options = this.extend(
    {
      noPrint: '.no-print',
      onStart() {},
      onEnd() {},
    },
    options
  );

  if (typeof dom === 'string') {
    this.dom = document.querySelector(dom);
  } else {
    this.dom = dom;
  }

  this.init();
}
Print.prototype = {
  init() {
    const content = this.getStyle() + this.getHtml();
    this.writeIframe(content);
  },
  extend(obj, obj2) {
    for (const k in obj2) {
      obj[k] = obj2[k];
    }
    return obj;
  },

  getStyle() {
    let str = '';
    const styles = document.querySelectorAll('style,link');
    for (let 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() {
    const inputs = document.querySelectorAll('input');
    const textareas = document.querySelectorAll('textarea');
    const selects = document.querySelectorAll('select');

    for (const 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 (const k2 in textareas) {
      if (textareas[k2].type == 'textarea') {
        textareas[k2].innerHTML = textareas[k2].value;
      }
    }

    for (const k3 in selects) {
      if (selects[k3].type == 'select-one') {
        const child = selects[k3].children;
        for (const 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(content) {
    let w;


let doc;


const iframe = document.createElement('iframe');


const 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(w, cb) {
    const _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;

使用的时候在项目中引进来，将需要打印部分最外层DOM节点放进来就可以了。
Print("#billDetail");

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 199,830评论 5赞 468
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 83,992评论 2赞 376
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 146,875评论 0赞 331
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 53,837评论 1赞 271
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 62,734评论 5赞 360
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,091评论 1赞 277
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,550评论 3赞 390
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,217评论 0赞 254
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,368评论 1赞 294
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,298评论 2赞 317
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,350评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,027评论 3赞 315
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,623评论 3赞 303
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,706评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,940评论 1赞 255
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,349评论 2赞 346
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 41,936评论 2赞 341