網(wǎng)頁打印必須基于打印控件，以便使用js直接調(diào)用本地打印機(jī)來執(zhí)行打印作業(yè)。因?yàn)閖s不能直接調(diào)用打印機(jī)。谷歌瀏覽器也是內(nèi)置的打印控件。

網(wǎng)頁打印控件比較出名的露肚皮(lodop)，不過要收費(fèi)，雖然可以免費(fèi)用但是有不定期的彈提示和打免費(fèi)水印，對于小作坊來說成本太高了，這里推薦一款github上的免費(fèi)打印控件（目前沒有看到收費(fèi)），它的實(shí)現(xiàn)原理是通過html2canvas將html的dom節(jié)點(diǎn)轉(zhuǎn)成base64的圖片數(shù)據(jù)，再使用POST（打印控件內(nèi)部做了跨域處理）將數(shù)據(jù)發(fā)送給打印控件（在本地運(yùn)行一個(gè)http服務(wù)【只支持windows】來接收打印任務(wù)，通過控件來調(diào)用本地打印機(jī)進(jìn)行打?。?。

git地址：

打印控件啟動(dòng)文件：

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"> 這里是打印內(nèi)容，可以用CSS控制位置 </div> <button @click="print">打印</button> </div> </template> <script> import axios from 'axios' import html2canvas from 'html2canvas' export default { methods: { print() { // 使用html2canvas將html轉(zhuǎn)換為canvas畫布 html2canvas(this.$re).then((canvas) => { // 畫布轉(zhuǎn)成圖片的Base64格式數(shù)據(jù) let dataURL = canvas.toDataURL('image/png') // 紙張寬度 const paperWidth = // 紙張高度 const paperHeight = // 打印機(jī)名稱 const printerName = '' // 打印控件服務(wù)地址 const url = `${paperWidth}&paperHeight=${paperHeight}&printerName=${printerName}` // 發(fā)送POST請求給打印控件服務(wù) axios({ method: 'POST', url: url, data: dataURL, headers: { Accept: 'text/plain', 'Content-Type': 'text/plain', }, }).then((res) => { if ('success')) { // 打印任務(wù)已正確提交給打印控件服務(wù) } else { // 控件返回異常 } }).catch(() => { // 未啟動(dòng)打印控件 }) }) }, }, } </script> 如果您有更好的web打印控件分享可以留言評論。

1.《關(guān)于打印機(jī)控件怎么設(shè)置，你需要知道這些推薦一款免費(fèi)的網(wǎng)頁打印控件》援引自互聯(lián)網(wǎng)，旨在傳遞更多網(wǎng)絡(luò)信息知識，僅代表作者本人觀點(diǎn)，與本網(wǎng)站無關(guān)，侵刪請聯(lián)系頁腳下方聯(lián)系方式。

2.《關(guān)于打印機(jī)控件怎么設(shè)置，你需要知道這些推薦一款免費(fèi)的網(wǎng)頁打印控件》僅供讀者參考，本網(wǎng)站未對該內(nèi)容進(jìn)行證實(shí)，對其原創(chuàng)性、真實(shí)性、完整性、及時(shí)性不作任何保證。

3.文章轉(zhuǎn)載時(shí)請保留本站內(nèi)容來源地址，http://f99ss.com/why/3189228.html