基于Electron實(shí)現(xiàn)跨平臺Web打印的解決方案分享

更新時(shí)間：2025年09月26日 09:59:13 作者：WEB打印技術(shù)社區(qū)

在Web應(yīng)用開發(fā)中,打印功能一直是一個(gè)令人頭疼的問題,web-print-pdf是一個(gè)基于Electron的跨平臺Web打印解決方案,下面小編就來和大家簡單介紹一下吧

引言

在Web應(yīng)用開發(fā)中，打印功能一直是一個(gè)令人頭疼的問題。傳統(tǒng)的Web打印方案存在樣式丟失、兼容性差、功能單一等諸多痛點(diǎn)。最近偶然發(fā)現(xiàn)了一個(gè)名為web-print-pdf的npm包，在調(diào)查了幾款常見的Web打印實(shí)現(xiàn)后，發(fā)現(xiàn)大多數(shù)技術(shù)方案都比較晦澀難懂，而這個(gè)包提供了純前端的體驗(yàn)，讓我眼前一亮。

什么是web-print-pdf

web-print-pdf是一個(gè)基于Electron的跨平臺Web打印解決方案，專為Web應(yīng)用提供強(qiáng)大而靈活的打印能力。它通過創(chuàng)新的架構(gòu)設(shè)計(jì)，完美解決了Web打印的各種技術(shù)難題。

核心優(yōu)勢

多種打印方式：支持HTML內(nèi)容、URL、Base64等多種格式
PDF生成：將HTML轉(zhuǎn)換為高質(zhì)量PDF文檔
圖片打?。褐С謭D片URL和Base64格式打印
批量打?。褐С峙咳蝿?wù)處理
靈活配置：豐富的PDF和打印選項(xiàng)
WebSocket通信：實(shí)時(shí)連接狀態(tài)監(jiān)控
自定義樣式：支持頁眉頁腳、邊距、水印、頁碼等自定義設(shè)置
高性能：基于WebSocket的實(shí)時(shí)通信，異步任務(wù)隊(duì)列
預(yù)覽功能：支持打印預(yù)覽，所見即所得
足夠簡單，前端友好：足夠簡單，api一看便會

功能特性

// 首選引入npm包
import webPrintPdf from 'web-print-pdf'

1. 多格式輸入支持

該包支持多種輸入格式，滿足不同場景的需求：

// 打印HTML內(nèi)容
await webPrintPdf.printHtml({
    content: '<h1>Hello World</h1>',
    pdfOptions: { paperFormat: 'A4' },
    printOptions: { copies: 1 }
});

// 打印網(wǎng)頁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. 強(qiáng)大的PDF配置選項(xiàng)

支持豐富的PDF生成配置，實(shí)現(xiàn)精確的打印效果：

const pdfOptions = {
    // 紙張格式：A0、A1、A2、A3、A4、A5、A6、Letter、Legal等
    paperFormat: 'A4',
    
    // 自定義紙張尺寸
    width: '210mm',
    height: '297mm',
    
    // 頁邊距設(shè)置
    margin: {
        top: '20px',
        bottom: '20px', 
        left: '20px',
        right: '20px'
    },
    
    // 橫向/縱向
    landscape: false,
    
    // 打印背景
    printBackground: true,
    
    // 水印功能
    watermark: {
        text: "機(jī)密文件",
        color: 'rgb(255,0,0)',
        x: 'alignCenter',
        y: 'alignCenter',
        size: 30,
        opacity: 0.3
    },
    
    // 頁碼設(shè)置
    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. 靈活的打印配置

支持多種打印參數(shù)，滿足不同打印需求：

const printOptions = {
    // 指定打印機(jī)
    printerName: 'HP LaserJet Pro',
    
    // 紙張格式
    paperFormat: 'A4',
    
    // 彩色/黑白
    colorful: true,
    
    // 橫向/縱向
    landscape: false,
    
    // 打印份數(shù)
    copies: 2,
    
    // 雙面打印模式
    duplexMode: 'duplex', // simplex, duplex, duplexshort, duplexlong
    
    // 縮放模式
    scaleMode: 'fit', // noscale, shrink, fit
    
    // 頁碼范圍
    pageRanges: [{from: 1, to: 3}],
    
    // 紙盤選擇
    bin: 1
};

4. 高級功能特性

預(yù)覽功能

支持打印預(yù)覽，讓用戶在打印前查看效果：

const extraOptions = {
    action: 'preview', // 預(yù)覽模式
    requestTimeout: 15
};

// 返回預(yù)覽URL，用戶可以在瀏覽器中查看
const result = await webPrintPdf.printHtml({
    content: htmlContent,
    pdfOptions,
    printOptions,
    extraOptions
});

// 打開預(yù)覽頁面
window.open(result.printPreviewUrl);

自定義主題

支持自定義應(yīng)用標(biāo)題和主題色：

// 設(shè)置應(yīng)用標(biāo)題
await webPrintPdf.utils.setTitle("我的打印應(yīng)用");

// 設(shè)置主題色
await webPrintPdf.utils.setThemeColor('rgb(229,182,80)');

網(wǎng)絡(luò)請求配置

支持Cookie、請求頭等網(wǎng)絡(luò)配置：

const extraOptions = {
    // 網(wǎng)絡(luò)超時(shí)
    requestTimeout: 15,
    
    // Cookie設(shè)置
    cookies: {
        sessionId: 'abc123',
        token: 'xyz789'
    },
    
    // 請求頭設(shè)置
    httpHeaders: {
        'Authorization': 'Bearer token123',
        'User-Agent': 'Custom Agent'
    },
    
    // 本地存儲
    localStorages: {
        theme: 'dark',
        language: 'zh-CN'
    }
};

使用場景

1. 企業(yè)報(bào)表打印

// 打印財(cái)務(wù)報(bào)表
await webPrintPdf.printHtmlByUrl({
    url: 'https://company.com/financial-report',
    pdfOptions: {
        paperFormat: 'A4',
        watermark: { text: "機(jī)密文件", 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. 文檔批量打印

// 批量打印多個(gè)文檔
const documents = [
    {
        url: 'https://example.com/doc1.pdf',
        printOptions: { copies: 1 }
    },
    {
        url: 'https://example.com/doc2.pdf',
        printOptions: { copies: 2 }
    },
    {
        content: '<h1>自定義HTML內(nèi)容</h1>',
        pdfOptions: { paperFormat: 'A4' },
        printOptions: { copies: 1 }
    }
];

// 使用batchPrint API進(jìn)行批量打印
await webPrintPdf.batchPrint(documents);

技術(shù)優(yōu)勢

1. 多格式支持與高質(zhì)量輸出

支持HTML、URL、Base64、圖片等多種輸入格式
高質(zhì)量PDF生成，完美還原Web頁面樣式
支持CSS3所有特性，保持字體和顏色一致性

2. 批量處理與高性能

支持批量任務(wù)處理，提高工作效率
WebSocket實(shí)時(shí)通信，異步任務(wù)隊(duì)列
內(nèi)存優(yōu)化管理，穩(wěn)定可靠

3. 豐富的自定義功能

支持頁眉頁腳、邊距、水印、頁碼等自定義設(shè)置
靈活的打印參數(shù)配置
實(shí)時(shí)連接狀態(tài)監(jiān)控

4. 平臺兼容與開發(fā)者友好

Windows全平臺支持
自動適配系統(tǒng)打印服務(wù)
簡單易用的API，完善的錯(cuò)誤處理
支持打印預(yù)覽，所見即所得

快速開始

1. 環(huán)境準(zhǔn)備

確保已安裝Node.js環(huán)境，并下載相應(yīng)的打印客戶端。

2. 安裝npm包

npm install web-print-pdf

3. 基礎(chǔ)使用

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

// 簡單打印
await webPrintPdf.printHtml({
    content: '<h1>Hello World</h1>',
    pdfOptions: { paperFormat: 'A4' },
    printOptions: { copies: 1 }
});

總結(jié)

通過對比市面上幾款常見的Web打印解決方案，我發(fā)現(xiàn)大多數(shù)技術(shù)實(shí)現(xiàn)都比較復(fù)雜，學(xué)習(xí)成本較高。而web-print-pdf這個(gè)包通過創(chuàng)新的技術(shù)架構(gòu)和豐富的功能特性，為Web應(yīng)用提供了完整的打印解決方案。

核心價(jià)值