js调用windows打印机 JavaScript 如何调用浏览器的打印功能

　　js调用windows打印机，JavaScript是一种广泛应用于web开发的编程语言，它可以通过调用浏览器内置的API，实现各种功能。其中调用浏览器的打印功能是很常见的一种应用。通过JavaScript调用浏览器的打印功能，可以方便地将网页内容输出到打印机上，进行打印输出。接下来我们就来看一看，如何使用JavaScript来调用浏览器的打印功能。

JavaScript 如何调用浏览器的打印功能

......

window.print()

js 调用打印机的两种方式

这种方式的缺点在于会操作原始页面的 DOM，影响原始页面的展现，而且当局部打印时样式可能会与预期不一致。

<!--startprint-->
<div class="print-content">
  content...
</div>
<!--endprint-->

<script>
function doPrint() { 
    const html = window.document.body.innerHTML; 
    const start = "<!--startprint-->"; //开始打印标识字符串有17个字符
    const end = "<!--endprint-->"; //结束打印标识字符串
    let printHtml= html.substring(html.indexOf(start) + 17); //从开始打印标识之后的内容
    printHtml = printHtml.substring(0, printHtml.indexOf(end)); //截取开始标识和结束标识之间的内容
    window.document.body.innerHTML = printHtml; //把需要打印的指定内容赋给body.innerHTML
    window.print(); //调用浏览器的打印功能打印指定区域
    window.document.body.innerHTML = html;//重新给页面内容赋值；
}
</script>

这种方式不会影响原始页面的展现，但是同样可能会出现样式不一致的问题

局部打印时，打印内容的样式可能会由于全局样式的丢失而失真，有以下方式可以解决：

const globalCss = '<style src="./main.css"></style>'
function doPrint() {
    // pre...
    printHtml = globalCss + printHtml
    window.document.body.innerHTML = printHtml; //把需要打印的指定内容赋给body.innerHTML
    // next...
}

计算当前样式：

function getStyleObj(dom) {
  return dom ? window.getComputedStyle(dom) : {}
}

节点元素 stringify:

function stringifyNode(el) {
  if (el.nodeName === '#text') return el.nodeValue || ''

  const styleStr = stringifyStyle(getStyleObj(el))
  const attrs = stringifyAttrs(el, { style: styleStr })
  const tagName = el.nodeName.toLowerCase()
  if (['br', 'hr', 'input', 'img'].includes(tagName)) {
    return `<${tagName} ${attrs}/>`
  }
  const children = Array.prototype.reduce.call(
    el.childNodes,
    (pre: any, node: any) => pre + stringifyNode(node),
    '',
  ) as string
  return `<${tagName} ${attrs}>${children}</${tagName}>`
}

关于 call-printer 的使用：

import { callPrinter } from 'call-printer'
 
// 打印 html 字符串。可用于单独打印图片，文字等等，注意写内联样式
callPrinter('<img src="./sample.jpeg" >')
 
// 打印 dom 元素，打印页面的局部
const content = document.getElementById('content')
callPrinter(content)

刘志平 - livelybone

github - 个人组件库 - Demo

　　综上所述，JS调用浏览器的打印功能非常简单，并且非常实用。我们可以通过简单的几行代码来实现页面的打印，方便用户进行文档的保存和分享。未来，在Web应用中，打印功能绝对是必不可少的一部分。