# Vue 前端实现真正的无感打印：DOM、PDF、URL 全支持

## 前言

作为一名纯前端开发者，是否遇到过这样的需求：用户点击按钮后，直接调用打印机执行打印，全程**无任何弹窗、无打印预览**？这就是所谓的"无感打印"。

网上常见的方案有两种：

1. **JS 原生 `window.print()`**：一定会弹出打印预览窗，且打印页面内部分 DOM 内容时往往需要重写页面，弊端明显。
2. **LODOP 插件**：功能强大，但未购买授权时打印出来会带水印。

本文介绍一种**简单、免费**的前端无感打印方案，基于 Vue + html2canvas + jspdf + 本地打印服务（EXE），可以实现：

* 前端无任何弹窗直接调用打印机执行打印
* 打印 PDF 流、打印在线文件
* 调用斑马（Zebra）打印机服务
* 设置纸张大小（A4 / A5）
* 分页打印
* 输出打印日志
* 获取当前电脑外接的所有打印机
* 获取默认打印机，并可选择使用哪台打印机执行打印
* 附加：HTML 转 PDF 的 file/blob 流、生成分页 PDF 文件

## 一、整体思路

方案由两部分组成：

|部分|职责|
|-|-|
|**前端（Vue）**|将 DOM 转成 PDF 文件流（html2canvas + jspdf），或直接传递 PDF URL|
|**本地打印服务（EXE）**|监听本地端口（如 `127.0.0.1:20730`），接收前端请求，调用系统打印机执行无感打印|

前端通过 HTTP 请求与本地服务通信，本地服务负责真正与操作系统打印机交互，从而绕过浏览器打印预览弹窗。


## 二、准备工作

### 1\. 安装依赖

```bash
npm install html2canvas jspdf --save
```

### 2\. 下载并安装本地打印服务

下载提供的 EXE 安装包（原文提取码：u582），安装后会在本地启动打印服务，监听 20730 端口。

### 3\. 目录结构建议

```
src/
├── utils/
│   ├── html2pdf.js      # DOM 转 PDF 流
│   ├── localPrint.js    # 本地打印服务接口
│   └── pdf2Print.js     # 打印方法库（挂载到 Vue 原型）
```

### 4\. 在 main.js 中引入

```js
import htmlToPdf from './utils/html2pdf'
import dom2Print from './utils/pdf2Print'

Vue.use(htmlToPdf)
Vue.use(dom2Print)
```


## 三、核心代码

### 1\. html2pdf.js：DOM 转 PDF 文件流

利用 html2canvas 把 DOM 渲染成 canvas，再按 A4 尺寸分页切片写入 jspdf，最终输出 File 对象。

```js
import html2canvas from 'html2canvas'
import JSPDF from 'jspdf'

export default {
  install(Vue, options) {
    Vue.prototype.ExportSavePdf = function (htmlTitle, currentTime, callBack) {
      const element = document.getElementById('pdfCentent')

      html2canvas(element, { logging: false }).then(function (canvas) {
        const pdf = new JSPDF('p', 'mm', 'a4') // A4 纵向
        const ctx = canvas.getContext('2d')
        const a4w = 210
        const a4h = 297
        const imgHeight = Math.floor(a4h \* canvas.width / a4w) // 一页图像像素高度
        let renderedHeight = 0

        while (renderedHeight < canvas.height) {
          const page = document.createElement('canvas')
          page.width = canvas.width
          page.height = Math.min(imgHeight, canvas.height - renderedHeight)

          // 裁剪指定区域并画到新 canvas
          page.getContext('2d').putImageData(
            ctx.getImageData(0, renderedHeight, canvas.width,
              Math.min(imgHeight, canvas.height - renderedHeight)),
            0, 0
          )

          pdf.addImage(
            page.toDataURL('image/jpeg', 1.0),
            'JPEG', 0, 0, a4w,
            Math.min(a4h, a4w \* page.height / page.width)
          )

          renderedHeight += imgHeight
          if (renderedHeight < canvas.height) pdf.addPage()
        }

        const file = new File(\[pdf.output('blob')], htmlTitle + '.pdf')
        Vue.nextTick(() => callBack(file))
      })
    }
  }
}
```

**关键点：**

* html2canvas 将 DOM 渲染为 canvas。
* 按 A4 宽高比例计算每页像素高度，循环切片。
* 用 putImageData + getImageData 精确裁剪，避免缩放失真。
* 输出 blob，包装成 File 对象以便后续 FormData 上传。

### 2\. localPrint.js：本地打印服务接口

本地服务提供以下 HTTP 接口（示例使用 axios）：

```js
import { axios } from '@/utils/request'

export function getPrinters() {
  return axios({
    url: 'http://127.0.0.1:20730/getPrinters?\_m=' + Math.random(),
    method: 'get'
  })
}

export function getDefaultPrinter() {
  return axios({
    url: 'http://127.0.0.1:20730/getDefaultPrinter?\_m=' + Math.random(),
    method: 'get'
  })
}

export function printPdf(parameter) {
  return axios({
    url: 'http://127.0.0.1:20730/printPdf?\_m=' + Math.random(),
    method: 'post',
    data: parameter
  })
}

export function printZebra(parameter) {
  return axios({
    url: 'http://127.0.0.1:20730/printZebra?\_m=' + Math.random(),
    method: 'post',
    data: parameter
  })
}
```

加 `\_m=Math.random()` 是为了避免 IE / 缓存导致的请求缓存问题。

### 3\. pdf2Print.js：打印方法库

将打印能力封装为一个类 Dom2Print，挂载到 Vue.prototype，通过 `new this.Dom2Print()` 使用。

```js
import htmlToPdf from './html2pdf'
import { getPrinters, getDefaultPrinter, printPdf, printZebra } from '@/api/localPrint'

export default {
  install(Vue) {
    class Dom2Print {
      constructor() {
        this.name = 'dom2Pdf'
        this.contentData = {}
        this.alertFlag = false
      }

      // 打印 DOM
      printDom(that, size, choosePrint, success, faild, url) {
        that.ExportSavePdf('油耗标pdf', '.pdf', (fileData) => {
          const formData = new FormData()
          formData.append('file', fileData)
          formData.append('copies', '1')
          formData.append('url', url || '')
          formData.append('paperSize', size)
          formData.append('printer', choosePrint)

          printPdf(formData).then(res => {
            if (res.result === 'success') success()
            else if (res.result === 'failure') faild(1)
            else if (res.result === 'unavailable') faild(2)
          }).catch(() => faild(3))
        })
      }

      // 打印 URL（目前仅支持 PDF）
      printUrl(url, size, success, failed) {
        const formData = new FormData()
        formData.append('copies', 1)
        formData.append('duplex', false)
        formData.append('url', url)
        formData.append('paperSize', size || 'A4')

        printPdf(formData).then(res => {
          if (res.result === 'success') success()
          else if (res.result === 'failure') failed(1)
          else if (res.result === 'unavailable') failed(2)
        }).catch(() => failed(3))
      }

      // 获取打印机列表
      getPrintList(cb) {
        getPrinters().then(res => cb(res))
      }

      // 获取默认打印机
      getDefaultPrint(cb) {
        getDefaultPrinter().then(res => cb(res))
      }

      // 唤醒本地打印服务
      openEXE(callBack) {
        const e = callBack || function () {}
        const a = document.createElement('a')
        a.href = 'SLIENTPRINT://'
        getDefaultPrinter().then(() => e(true)).catch(() => {
          a.click()
          setTimeout(() => {
            getDefaultPrinter().then(() => e(true)).catch(() => e(false))
          }, 5000)
        })
      }

      // 检测服务是否安装并启动
      connectionState(startEvent, loadingEvent, connectionEvent, faildEvent) {
        // ... 详见原文，逻辑同上：先用 getDefaultPrinter 探测，
        // 失败则通过自定义协议 SLIENTPRINT:// 唤起 EXE，
        // 5 秒后再次探测，成功回调 connectionEvent，失败回调 faildEvent
      }
    }
    Vue.prototype.Dom2Print = Dom2Print
  }
}
```

自定义协议 `SLIENTPRINT://` 是唤醒本地 EXE 的关键——浏览器无法直接启动本地程序，但可以通过注册到系统的自定义 URL Scheme 唤起。


## 四、使用方式

### 1\. 初始化

```js
data() {
  return {
    printClass: new this.Dom2Print()
  }
}
```

### 2\. 获取默认打印机

```js
this.printClass.getDefaultPrint((name) => {
  console.log('默认打印机：', name)
})
```

### 3\. 获取打印机列表

```js
this.printClass.getPrintList((list) => {
  console.log('打印机列表：', list)
})
```

### 4\. 打印 DOM

将要打印的内容放在一个隐藏容器中，并给内部元素加上 `id="pdfCentent"`：

```html
<div style="overflow:hidden; width:1px; height:1px">
  <div id="pdfCentent"
       style="width:583px; margin:0 auto; background-size:583px 826px;
              position:relative; font-size:15px; font-family:'黑体'">
    要被打印的 DOM 结构～
  </div>
</div>
```

调用：

```js
this.printClass.printDom(
  this,
  'A4',                 // 或 'A5'
  '打印机名称',
  () => console.log('打印成功'),
  (code) => console.log('打印失败', code)
)
```

容器设为 1px × 1px 并 overflow:hidden，是为了不干扰页面显示，同时保证 html2canvas 能正常渲染。

### 5\. 打印 URL（PDF）

```js
this.printClass.printUrl(
  url,
  'A4',
  () => console.log('成功'),
  (code) => console.log('失败', code)
)
```

### 6\. 唤醒打印服务

```js
this.printClass.openEXE((ok) => {
  console.log(ok ? '唤醒成功' : '唤醒失败')
})
```

### 7\. 检测并启动打印服务

```js
this.printClass.connectionState(
  () => {},          // 开始启动
  () => {},          // 启动中
  () => {},          // 启动成功
  () => {}           // 用户未安装
)
```


## 五、技术要点总结

|技术点|说明|
|-|-|
|html2canvas|将 DOM 渲染为 canvas，是"打印 DOM"的基础|
|jspdf|将 canvas 图片按 A4 分页写入 PDF，输出 blob/file|
|canvas 分页切片|用 getImageData + putImageData 精确裁剪，实现分页|
|本地打印服务（EXE）|前端无法直接操作打印机，必须借助本地服务中转|
|HTTP 轮询本地端口|通过 127.0.0.1:20730 判断服务是否可用|
|自定义 URL Scheme|SLIENTPRINT:// 唤起本地 EXE，绕过浏览器限制|
|window blur/focus 监听|检测自定义协议是否成功唤起程序|
|FormData 上传文件流|将生成的 PDF File 传给本地服务|


## 六、注意事项与踩坑

1. **本地服务必须安装**：纯前端无法真正无感打印，必须配合本地 EXE 服务。
2. **端口占用**：本地服务默认 20730，如被占用需调整。
3. **CORS**：本地服务需允许跨域，或前端做代理。
4. **html2canvas 兼容性**：部分 CSS（如 box-shadow、filter、跨域图片）渲染可能异常，建议打印区域样式尽量简单。
5. **图片跨域**：打印区域内的图片需允许跨域，否则 canvas 会污染，toDataURL 报错。
6. **自定义协议唤起失败**：若用户未安装 EXE，SLIENTPRINT:// 不会触发 blur，需用超时兜底（原文用 5 秒）。
7. **分页精度**：A4 边距、图片缩放比例需根据实际内容微调，避免内容被截断。
8. **斑马打印机**：需传 zebraCode（ZPL 指令），并二选一传 zebraPrinterIp + zebraPrinterPort 或 zebraPrinterName。


## 七、总结

本文方案的核心思路是：

**前端负责"生成打印内容"（DOM → PDF 流 / 直接给 PDF URL），本地服务负责"真正调用打印机"，两者通过 HTTP + 自定义协议协作，从而实现真正的无感打印。**

**优点：**

* 完全免费，无水印
* 支持 DOM、PDF URL、斑马打印机多种场景
* 可获取打印机列表、选择打印机、设置纸张、分页

**缺点：**

* 需要用户安装本地 EXE 服务
* html2canvas 对复杂 CSS 支持有限
* 代码结构偏"急就章"，后续可优化并发布 npm 包

对于有批量打印、票据打印、标签打印需求的前端项目，这套方案是一个值得参考的落地思路。



作为一名纯前端开发者，是否遇到过这样的需求：用户点击按钮后，直接调用打印机执行打印，全程无任何弹窗、无打印预览？这就是所谓的"无感打印"。

Vue 前端实现真正的无感打印：DOM、PDF、URL 全支持（腾讯云首发）

Java开发

数据库

Vue前端实现真正无感打印方案，结合html2canvas+jspdf和本地EXE服务，支持DOM、PDF、URL打印。通过自定义协议SLIENTPRINT://唤醒服务，绕过浏览器预览弹窗，实现静默打印。支持A4/A5纸张设置、分页输出、打印机列表查询及斑马标签打印，免费无水印，提供完整代码示例和踩坑指南。

代码解释

容器

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

Vue 前端实现真正的无感打印：DOM、PDF、URL 全支持（腾讯云首发）-腾讯云开发者社区-腾讯云

Vue 前端实现真正的无感打印：DOM、PDF、URL 全支持（腾讯云首发）

Vue 前端实现真正的无感打印：DOM、PDF、URL 全支持（腾讯云首发）

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐