操屁眼的视频在线免费看,日本在线综合一区二区,久久在线观看免费视频,欧美日韩精品久久综

做過網頁打印的應該都清楚，如果想使用js直接調用本地打印機進行打印任務都需要基于打印控件本地打印服務沒有運行，因為js不能直接調用打印機，即使是瀏覽器也是內置的打印控件。

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

git地址：

打印控件啟動文件：.exe

使用git上有demo本地打印服務沒有運行，這里不做說明；

以下是在vue中使用說明：

依賴安裝

// 安裝html2canvas
# npm install --save html2canvas
// 或
# yarn add html2canvas
// 安裝axios

# npm install axios
// 代碼中引入
import html2canvas from 'html2canvas'
import axios from 'axios'

完整示例

<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>
如果您有更好的web打印控件分享可以留言評論。