基于Electron的Web打印解决方案：web-print-pdf技术分享

原创

前端开发Web打印社区

发布于 2025-08-08 16:34:01

36900

代码可运行

运行总次数：0

代码可运行

在Web应用开发中，打印功能一直是一个令人头疼的问题。传统的Web打印方案存在样式丢失、兼容性差、功能单一等诸多痛点。最近偶然发现了一个名为web-print-pdf的npm包，在调查了几款常见的Web打印实现后，发现大多数技术方案都比较晦涩难懂，而这个包提供了纯前端的体验，让我眼前一亮。

什么是web-print-pdf？

web-print-pdf是一个基于Electron的跨平台Web打印解决方案，专为Web应用提供强大而灵活的打印能力。它通过创新的架构设计，完美解决了Web打印的各种技术难题。

🎯 核心优势

**🖨️ 多种打印方式**：支持HTML内容、URL、Base64等多种格式
**📄 PDF生成**：将HTML转换为高质量PDF文档
**🖼️ 图片打印**：支持图片URL和Base64格式打印
**📦 批量打印**：支持批量任务处理
**🔧 灵活配置**：丰富的PDF和打印选项
**🌐 WebSocket通信**：实时连接状态监控
**🎨 自定义样式**：支持页眉页脚、边距、水印、页码等自定义设置
**⚡ 高性能**：基于WebSocket的实时通信，异步任务队列
**🔍 预览功能**：支持打印预览，所见即所得
**🌍 足够简单，前端友好**：足够简单，api一看便会

功能特性

// 首选引入npm包

import webPrintPdf from 'web-print-pdf'

1. 多格式输入支持

该包支持多种输入格式，满足不同场景的需求：

// 打印HTML内容

await webPrintPdf.printHtml({

    content: '<h1>Hello World</h1>',

    pdfOptions: { paperFormat: 'A4' },

    printOptions: { copies: 1 }

});



// 打印网页URL

await webPrintPdf.printHtmlByUrl({

    url: 'https://example.com/report',

    pdfOptions: { paperFormat: 'A4' }

});



// 打印PDF文件

await webPrintPdf.printPdfByUrl({

    url: 'https://example.com/document.pdf'

});



// 打印图片

await webPrintPdf.printImageByUrl({

    url: 'https://example.com/image.jpg'

});

2. 强大的PDF配置选项

支持丰富的PDF生成配置，实现精确的打印效果：

const pdfOptions = {

    // 纸张格式：A0、A1、A2、A3、A4、A5、A6、Letter、Legal等

    paperFormat: 'A4',

    

    // 自定义纸张尺寸

    width: '210mm',

    height: '297mm',

    

    // 页边距设置

    margin: {

        top: '20px',

        bottom: '20px', 

        left: '20px',

        right: '20px'

    },

    

    // 横向/纵向

    landscape: false,

    

    // 打印背景

    printBackground: true,

    

    // 水印功能

    watermark: {

        text: "机密文件",

        color: 'rgb(255,0,0)',

        x: 'alignCenter',

        y: 'alignCenter',

        size: 30,

        opacity: 0.3

    },

    

    // 页码设置

    pageNumber: {

        start: 1,

        format: '第{{page}}页/共{{totalPage}}页',

        x: 'alignCenter',

        y: 'alignBottom',

        color: 'rgb(0,0,0)',

        size: 12

    },

    

    // 页面范围

    pageRanges: [{from: 1, to: 5}, {from: 7, to: 10}]

};

3. 灵活的打印配置

支持多种打印参数，满足不同打印需求：

const printOptions = {

    // 指定打印机

    printerName: 'HP LaserJet Pro',

    

    // 纸张格式

    paperFormat: 'A4',

    

    // 彩色/黑白

    colorful: true,

    

    // 横向/纵向

    landscape: false,

    

    // 打印份数

    copies: 2,

    

    // 双面打印模式

    duplexMode: 'duplex', // simplex, duplex, duplexshort, duplexlong

    

    // 缩放模式

    scaleMode: 'fit', // noscale, shrink, fit

    

    // 页码范围

    pageRanges: [{from: 1, to: 3}],

    

    // 纸盘选择

    bin: 1

};

4. 高级功能特性

预览功能

支持打印预览，让用户在打印前查看效果：

const extraOptions = {

    action: 'preview', // 预览模式

    requestTimeout: 15

};



// 返回预览URL，用户可以在浏览器中查看

const result = await webPrintPdf.printHtml({

    content: htmlContent,

    pdfOptions,

    printOptions,

    extraOptions

});



// 打开预览页面

window.open(result.printPreviewUrl);

自定义主题

支持自定义应用标题和主题色：

// 设置应用标题

await webPrintPdf.utils.setTitle("我的打印应用");



// 设置主题色

await webPrintPdf.utils.setThemeColor('rgb(229,182,80)');

网络请求配置

支持Cookie、请求头等网络配置：

const extraOptions = {

    // 网络超时

    requestTimeout: 15,

    

    // Cookie设置

    cookies: {

        sessionId: 'abc123',

        token: 'xyz789'

    },

    

    // 请求头设置

    httpHeaders: {

        'Authorization': 'Bearer token123',

        'User-Agent': 'Custom Agent'

    },

    

    // 本地存储

    localStorages: {

        theme: 'dark',

        language: 'zh-CN'

    }

};

使用场景

1. 企业报表打印

// 打印财务报表

await webPrintPdf.printHtmlByUrl({

    url: 'https://company.com/financial-report',

    pdfOptions: {

        paperFormat: 'A4',

        watermark: { text: "机密文件", opacity: 0.3 },

        pageNumber: { format: '第{{page}}页/共{{totalPage}}页' }

    },

    printOptions: {

        duplexMode: 'duplex',

        copies: 3

    }

});

2. 电商订单打印

// 打印订单详情

await webPrintPdf.printHtml({

    content: orderHtmlTemplate,

    pdfOptions: {

        paperFormat: 'A5',

        margin: { top: '10mm', bottom: '10mm', left: '10mm', right: '10mm' }

    },

    printOptions: {

        copies: 2,

        scaleMode: 'fit'

    }

});

3. 文档批量打印

// 批量打印多个文档

const documents = [

    {

        url: 'https://example.com/doc1.pdf',

        printOptions: { copies: 1 }

    },

    {

        url: 'https://example.com/doc2.pdf',

        printOptions: { copies: 2 }

    },

    {

        content: '<h1>自定义HTML内容</h1>',

        pdfOptions: { paperFormat: 'A4' },

        printOptions: { copies: 1 }

    }

];



// 使用batchPrint API进行批量打印

await webPrintPdf.batchPrint(documents);

技术优势

1. 多格式支持与高质量输出

支持HTML、URL、Base64、图片等多种输入格式
高质量PDF生成，完美还原Web页面样式
支持CSS3所有特性，保持字体和颜色一致性

2. 批量处理与高性能

支持批量任务处理，提高工作效率
WebSocket实时通信，异步任务队列
内存优化管理，稳定可靠

3. 丰富的自定义功能

支持页眉页脚、边距、水印、页码等自定义设置
灵活的打印参数配置
实时连接状态监控

4. 平台兼容与开发者友好

Windows全平台支持
自动适配系统打印服务
简单易用的API，完善的错误处理
支持打印预览，所见即所得

快速开始

1. 环境准备

确保已安装Node.js环境，并下载相应的打印客户端。

2. 安装npm包

npm install web-print-pdf

3. 基础使用

import { webPrintPdf } from 'web-print-pdf';



// 简单打印

await webPrintPdf.printHtml({

    content: '<h1>Hello World</h1>',

    pdfOptions: { paperFormat: 'A4' },

    printOptions: { copies: 1 }

});