推荐一款免费的网页打印控件

2021年12月16日 22:44 • JavaScript, 前端开发 • 阅读 102

做过网页打印的应该都清楚，如果想使用js直接调用本地打印机进行打印任务都需要基于打印控件，因为js不能直接调用打印机，即使是google浏览器也是内置的打印控件。

网页打印控件比较出名的露肚皮(lodop)，不过要收费，虽然可以免费用但是有不定期的弹提示和打免费水印，对于小作坊来说成本太高了，这里推荐一款github上的免费打印控件（目前没有看到收费），它的实现原理是通过html2canvas将html的dom节点转成base64的图片数据，再使用POST（打印控件内部做了跨域处理）将数据发送给打印控件（在本地运行一个http服务【只支持windows】来接收打印任务，通过控件来调用本地打印机进行打印）。

git地址：https://github.com/xuejike/web_print_service

打印控件启动文件：printWin.exe

jquery使用git上有demo，这里不做说明；

以下是在vue中使用说明：

依赖安装

// 安装html2canvas
# npm install --save html2canvas
// 或
# yarn add html2canvas

// 安装axios
# npm install axios

// 代码中引入
import html2canvas from 'html2canvas'
import axios from 'axios'

完整示例

<template>
  <div>
    <div ref="PrintMain">
      这里是打印内容，可以用CSS控制位置
    </div>
    <button @click="print">打印</button>
  </div>
</template>

<script>
import axios from 'axios'
import html2canvas from 'html2canvas'
export default {
  methods: {
    print() {
      // 使用html2canvas将html转换为canvas画布
      html2canvas(this.$refs.PrintMain).then((canvas) => {
        // 画布转成图片的Base64格式数据
        let dataURL = canvas.toDataURL('image/png')
        // 纸张宽度
        const paperWidth = this.width
        // 纸张高度
        const paperHeight = this.height
        // 打印机名称
        const printerName = ''
        // 打印控件服务地址
        const url = `http://127.0.0.1:19999/?paperWidth=${paperWidth}&paperHeight=${paperHeight}&printerName=${printerName}`
        // 发送POST请求给打印控件服务
        axios({
          method: 'POST',
          url: url,
          data: dataURL,
          headers: {
            Accept: 'text/plain',
            'Content-Type': 'text/plain',
          },
        }).then((res) => {
           if (res.data.startsWith('success')) {
            // 打印任务已正确提交给打印控件服务
          } else {
            // 控件返回异常
          }
        }).catch(() => {
          // 未启动打印控件
        })
      })
    },
  },
}
</script>