• Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Native H5 scenario

  1. Method one:window.print()

    window.print(); Will pop up the print dialog box, printing is the window. The document. The body. The contents of the innerHTML, if want to print the local page content, would have to hide don’t need to print the contents of the first, or intercept the content of the need to print to cover the entire page.

    • Hide content that does not need to be printed:
    <body> <p class="non-print">no print1</p> <h1> </h1> </p> <button class="non-print" type="button" Onclick ="doPrint()"> print </button> <p class="non-print">no print2</p> </body> <script> function doPrint() {let nonPrints =  document.getElementsByClassName('non-print'); for(let i = 0; i < nonPrints.length; i++){ nonPrints[i].style.display = 'none' } window.print(); } </script>Copy the code
    • Intercept the content to print and cover the entire page: 
      <body> <p>no print1</p> <! -- startPrint --> <h1> Print title </h1> <p> Print content ~~</p> <! --endprint--> <button type="button" onclick="doPrint()" </button> <p>no print2</p> </body> <script> function doPrint()  { bodyhtml=window.document.body.innerHTML; startprint="<! --startprint-->"; endprint="<! --endprint-->"; printhtml=bodyhtml.substr(bodyhtml.indexOf(startprint)+17); printhtml=printhtml.substring(0,printhtml.indexOf(endprint)); window.document.body.innerHTML=printhtml; window.print(); } </script>Copy the code
  • Method 2: Using JQuery plug-in: you can quickly select a selector for printing, or exclude unnecessary selectors from printing

    • Plugin 1: jquery.print.js

      • Can quickly print according to the selector
      • Example code: Used in vUE
      <script SRC ="/js/ jquery.print.min.js "></script> // print.vue <template> <div Id ="print-details"> <div id="prints" > // print contents /div> <div @click="printBtn" > print </div> </template> <script> //... methods: { printBtn(){ let _this = this; setTimeout(()=>{ $("#prints").print({ /*options*/ globalStyles: true, mediaPrint: false, stylesheet: null, noPrintSelector: ".no-print", iframe: true, append: null, prepend: null, manuallyCopyFormValues: true, timeout: 750, title: null, doctype: '<! doctype html>', deferred: $.Deferred().done(function(){ // window.onbeforeprint(); // window.onafterprint(); _this.goback (); })// Callback function}); }, 300)},} //...... </script> <style lang=" SCSS "> /* Style will only apply to print */ @media print {. Content-title {width: 100%; display: flex; justify-content: space-between; padding: 0 8px; } .content-bar-name{ display: flex; justify-content: space-between; background: #FFF; padding: 0 10px; font-size: 16px; } } </style>Copy the code

    • Plugin 2: jquery.print-preview.js

      • Can quickly print according to the selector
      • Provides preview function before printing
      • Note: The browser print event cannot listen for whether a print confirm or cancel event is executed

        The following onbeforePrint and onAfterPrint do not achieve the desired event differentiation effect; both events are executed whether printed or not

      var beforePrint = function() { console.log('Functionality to run before printing.'); }; var afterPrint = function() { console.log('Functionality to run after printing'); }; if (window.matchMedia) { var mediaQueryList = window.matchMedia('print'); mediaQueryList.addListener(function(mql) { if (mql.matches) { beforePrint(); } else { afterPrint(); }}); } window.onbeforeprint = beforePrint; window.onafterprint = afterPrint;Copy the code

Vue scene

  • Plug-in 1: vue-print-nb
  • Plug-in 2: vuePlugs_printjs

Batch print

Principle: It is not different from single printing. It also displays the single traversal of printing in the printing area. What needs to be paid attention to is the printing style, which is fine-tuned by @Media Print