JS 调用打印机的库，非常好用

打印多张图片

function printImages() {
  var images = [
    'http://printjs.crabbly.com/images/print-01-highres.jpg',
    'http://printjs.crabbly.com/images/print-02-highres.jpg',
    'http://printjs.crabbly.com/images/print-03-highres.jpg',
  ];

  printJS({
    printable: images,
    type: 'image',
    header: 'PrintJS Images Test', // Optional
    showModal: true, // Optional
    modalMessage: 'Printing Images...', // Optional
    style: 'img { max-width: 400px;}', // Optional
  });
}

document.getElementById('printButton').addEventListener('click', printImages);

这个传 base64 也可以哦

const dataURL = newCanvas.toDataURL('image/png', 1);
onPrint([dataURL]);

function onPrint(images) {
  printJS({
    printable: images,
    type: 'image',
    header: 'PrintJS Images Test', // Optional
    showModal: true, // Optional
    modalMessage: 'Printing Images...', // Optional
    style: 'img { max-width: 400px;}', // Optional
  });
}

document.getElementById('printButton').addEventListener('click', printImages);

弹窗打印

https://stackoverflow.com/questions/2909033/using-javascript-to-print-images

<script>
  function ImagetoPrint(source) {
    return (
      '<html><head><scri' +
      'pt>function step1(){\n' +
      "setTimeout('step2()', 10);}\n" +
      'function step2(){window.print();window.close()}\n' +
      '</scri' +
      "pt></head><body onload='step1()'>\n" +
      "<img src='" +
      source +
      "' /></body></html>"
    );
  }

  function PrintImage(source) {
    var Pagelink = 'about:blank';
    var pwa = window.open(Pagelink, '_new');
    pwa.document.open();
    pwa.document.write(ImagetoPrint(source));
    pwa.document.close();
  }
</script>

<a href="#" onclick="PrintImage('YOUR_IMAGE_PATH_HERE.JPG'); return false;"
  >PRINT</a
>

另外一种打印 base64 的方法

function printTest() {
  fetch("https://printjs.crabbly.com/docs/base64.txt").then(response => {
    response.text().then(base64 => {
      printJS({
        printable: base64,
        type: "pdf",
        base64: true
      });
    });
  });
}

document.getElementById("test-button").addEventListener("click", printTest);

打印页面元素

<div id="myElement">
  <h1>
    Print.js Canvas Test
  </h1>
  <div id="canvasWrapper">
  123
   <!-- Canvas element here -->
  </div>
  <button id="printButton">
    Print
  </button>
</div>

var print = document.createElement('button')
var canvas = document.createElement('canvas')
var ctx = canvas.getContext('2d')

canvas.width = 300;
canvas.height = 100;

ctx.fillStyle = '#000'
ctx.font = '15px sans-serif'
ctx.fillText('Canvas content ... print', 10, 20)

document.getElementById('canvasWrapper').appendChild(canvas)

document.getElementById('printButton').addEventListener('click', function () {
    printJS('canvasWrapper', 'html')
});