网页打印必须基于打印控件，以便使用js直接调用本地打印机来执行打印作业。因为js不能直接调用打印机。谷歌浏览器也是内置的打印控件。

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

git地址：

打印控件启动文件：

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.$re).then((canvas) => { // 画布转成图片的Base64格式数据 let dataURL = canvas.toDataURL('image/png') // 纸张宽度 const paperWidth = // 纸张高度 const paperHeight = // 打印机名称 const printerName = '' // 打印控件服务地址 const url = `${paperWidth}&paperHeight=${paperHeight}&printerName=${printerName}` // 发送POST请求给打印控件服务 axios({ method: 'POST', url: url, data: dataURL, headers: { Accept: 'text/plain', 'Content-Type': 'text/plain', }, }).then((res) => { if ('success')) { // 打印任务已正确提交给打印控件服务 } else { // 控件返回异常 } }).catch(() => { // 未启动打印控件 }) }) }, }, } </script> 如果您有更好的web打印控件分享可以留言评论。

1.《关于打印机控件怎么设置，你需要知道这些推荐一款免费的网页打印控件》援引自互联网，旨在传递更多网络信息知识，仅代表作者本人观点，与本网站无关，侵删请联系页脚下方联系方式。

2.《关于打印机控件怎么设置，你需要知道这些推荐一款免费的网页打印控件》仅供读者参考，本网站未对该内容进行证实，对其原创性、真实性、完整性、及时性不作任何保证。

3.文章转载时请保留本站内容来源地址，https://www.lu-xu.com/why/3189228.html