Electron 中的 PDF 生成与查看：创建和显示 PDF 文档的方法

1. 前言：当Electron遇上PDF处理

在开发跨平台桌面应用时，Electron凭借其优异的跨平台能力和Web技术栈已经成为主流选择。而PDF文档作为数字化办公的重要载体，其生成与查看需求在OA系统、报表工具、电子合同等场景中频繁出现。本文将通过完整的代码示例，带您掌握在Electron应用中实现PDF生成与显示的全套解决方案。

2. PDF生成的三板斧

2.1 技术选型对比

在Electron生态中，主流的PDF生成方案包括：

PDFKit：纯JavaScript实现，适合创建复杂布局文档
puppeteer：通过无头浏览器生成网页快照
pdfmake：声明式API设计，上手难度最低

本文选择pdfmake作为示例技术栈，因其API简洁且支持中文字体处理。首先安装依赖：

npm install pdfmake

2.2 基本文档创建

以下代码演示在Electron主进程中创建带表格的PDF文档：

const { app, BrowserWindow } = require('electron')
const PdfPrinter = require('pdfmake/src/printer')

function createPDF() {
  // 字体配置（必须配置中文字体）
  const fonts = {
    SimSun: {
      normal: 'C:/Windows/Fonts/simsun.ttc',
      bold: 'C:/Windows/Fonts/simsunb.ttf',
    }
  }

  // 文档内容定义
  const docDefinition = {
    content: [
      { text: '销售报表', style: 'header' },
      {
        table: {
          widths: ['*', 'auto', 'auto'],
          body: [
            ['商品名称', '单价', '库存量'],
            ['ThinkPad X1 Carbon', 12999, 23],
            ['MacBook Pro 16"', 18999, 15]
          ]
        }
      }
    ],
    styles: {
      header: {
        fontSize: 24,
        bold: true,
        margin: [0, 0, 0, 20]
      }
    },
    defaultStyle: {
      font: 'SimSun'
    }
  }

  // 创建PDF实例
  const printer = new PdfPrinter(fonts)
  const pdfDoc = printer.createPdfKitDocument(docDefinition)
  
  // 保存文件
  pdfDoc.pipe(fs.createWriteStream('report.pdf'))
  pdfDoc.end()
}

// 在窗口创建后调用
app.whenReady().then(() => {
  const mainWindow = new BrowserWindow()
  createPDF()
})

关键说明：

必须正确配置中文字体路径

表格布局采用自适应宽度设计(widths: ['*', ...])

使用流式接口处理大文件更高效

2.3 高级功能实践

2.3.1 混合布局文档

在同一个PDF中组合图表与文字：

const docDefinition = {
  content: [
    {
      stack: [
        { text: '数据分析报告', style: 'title' },
        { 
          image: 'chart.png',
          width: 500,
          alignment: 'center'
        },
        { 
          text: '▲ 图1：年度销售趋势图',
          italics: true,
          fontSize: 10,
          margin: [0, 5, 0, 20]
        },
        {
          columns: [
            { width: '*', text: '详情说明...' },
            { 
              width: 200,
              ul: [
                '第一季增长30%',
                '第二季增长放缓',
                '年底促销效果显著'
              ]
            }
          ]
        }
      ]
    }
  ]
}

2.3.2 分页控制

实现自定义页眉页脚：

const docDefinition = {
  header: function(currentPage) {
    return { 
      text: `机密文档 - 第 ${currentPage} 页`,
      alignment: 'right',
      fontSize: 8
    }
  },
  footer: {
    text: 'Copyright © 2024 某科技有限公司',
    alignment: 'center',
    margin: [0, 10]
  },
  content: [
    // 正文内容...
  ]
}

3. PDF查看的完整实现

3.1 技术方案对比

常见PDF显示方案：

iframe标签：简单但功能有限
PDF.js：Mozilla开源方案，功能最全面
第三方组件：如react-pdf-viewer

我们选择PDF.js作为显示方案，首先安装：

npm install pdfjs-dist

3.2 基础查看器搭建

在渲染进程创建查看器：

const pdfjsLib = require('pdfjs-dist/legacy/build/pdf.js')

async function renderPDF(filePath) {
  const loadingTask = pdfjsLib.getDocument(filePath)
  const pdf = await loadingTask.promise
  
  // 渲染第一页
  const page = await pdf.getPage(1)
  const viewport = page.getViewport({ scale: 1.5 })
  
  const canvas = document.getElementById('pdf-canvas')
  const context = canvas.getContext('2d')
  
  canvas.height = viewport.height
  canvas.width = viewport.width
  
  const renderContext = {
    canvasContext: context,
    viewport: viewport
  }
  
  await page.render(renderContext).promise
}

// 在Electron中打开本地文件
document.getElementById('open-file').addEventListener('click', () => {
  const filePath = window.require('electron').remote.dialog.showOpenDialogSync({
    properties: ['openFile'],
    filters: [{ name: 'PDF Files', extensions: ['pdf'] }]
  })[0]
  
  renderPDF(filePath)
})

3.3 增强功能实现

3.3.1 缩略图导航

实现侧边栏缩略图：

async function createThumbnails(pdf) {
  const container = document.getElementById('thumbnails')
  
  for (let i = 1; i <= pdf.numPages; i++) {
    const page = await pdf.getPage(i)
    const viewport = page.getViewport({ scale: 0.2 })
    
    const canvas = document.createElement('canvas')
    const context = canvas.getContext('2d')
    canvas.className = 'thumbnail'
    
    canvas.height = viewport.height
    canvas.width = viewport.width
    
    await page.render({
      canvasContext: context,
      viewport: viewport
    }).promise
    
    canvas.onclick = () => jumpToPage(i)
    container.appendChild(canvas)
  }
}

3.3.2 文本搜索

实现全文检索功能：

async function searchText(keyword) {
  const pdf = await pdfjsLib.getDocument(filePath).promise
  const results = []

  for (let i = 1; i <= pdf.numPages; i++) {
    const page = await pdf.getPage(i)
    const textContent = await page.getTextContent()
    
    textContent.items.forEach((item) => {
      if (item.str.includes(keyword)) {
        results.push({
          page: i,
          text: item.str
        })
      }
    })
  }
  
  return results
}

4. 关键技术与难点解析

4.1 字体处理规范

中文字体处理的三要素：

显式指定字体文件路径
确保字体文件可访问性
合理控制字体子集（避免文件膨胀）

推荐字体配置：

const fonts = {
  SimSun: {
    normal: path.join(__dirname, 'fonts/simsun.ttf'),
    bold: path.join(__dirname, 'fonts/simsunb.ttf')
  },
  SimHei: {
    normal: path.join(__dirname, 'fonts/simhei.ttf')
  }
}

4.2 性能优化策略

场景	优化手段	效果提升
大文档生成	分块渲染 + 流式写入	内存占用降低80%
多页显示	虚拟滚动技术	加载速度提升3倍
频繁操作	PDF文档对象缓存	响应时间缩短50%

典型流式写入实现：

function streamWritePDF(content) {
  const doc = printer.createPdfKitDocument(content)
  const writeStream = fs.createWriteStream('output.pdf')
  
  doc.on('data', (chunk) => {
    writeStream.write(chunk)
    // 更新进度条
    progressBar.value += chunk.length 
  })
  
  doc.on('end', () => {
    writeStream.end()
    showSaveSuccess()
  })
  
  doc.end()
}

5. 实践场景与决策指南

5.1 应用场景分析

适合场景

需要离线使用的报表系统
电子合同签署系统
批量生成个性化文档（如账单、证书）

不适合场景

需要实时协作编辑的文档系统
需要高精度打印控制的场景
超大规模文档处理（建议使用服务端方案）

5.2 技术选型矩阵

需求特征	推荐方案	优势
简单快速生成	pdfmake	API简洁，开发效率高
复杂排版	PDFKit	布局控制粒度更细
文档转换	puppeteer	支持HTML转PDF
高交互查看	PDF.js	功能最完善

6. 注意事项与最佳实践

安全规范：
- 禁用nodeIntegration时通过preload加载PDF.js
- 文件路径白名单验证
- 沙箱模式运行非必要代码

跨平台兼容：

// 自动识别字体路径
function getSystemFontPath() {
  switch (process.platform) {
    case 'win32':
      return 'C:/Windows/Fonts'
    case 'darwin':
      return '/System/Library/Fonts'
    default: 
      return '/usr/share/fonts'
  }
}

内存管理：
- 单页最大尺寸控制在100MB以内
- 使用webWorker处理大文档
- 及时销毁不再使用的PDFDocument对象

7. 总结与展望

在Electron中处理PDF文档需要平衡功能需求与性能表现。通过本文的实践方案，开发者可以快速构建具备PDF生成与查看能力的桌面应用。随着WebAssembly等新技术的发展，未来可能出现更高效的本地PDF处理方案。建议持续关注以下方向：

WebGPU加速渲染
WASM原生模块的应用
基于IndexedDB的文档缓存优化

敲码拾光专注于编程技术，涵盖编程语言、代码实战案例、软件开发技巧、IT前沿技术、编程开发工具，是您提升技术能力的优质网络平台。