@a4-pagination-print/renderer-browser

A4 浏览器端渲染器 — DOM 渲染、浏览器打印、单页 PDF 生成。

npm install @a4-pagination-print/renderer-browser @a4-pagination-print/core

适用场景

• 在浏览器中把 Page 数据渲染为 DOM
• 调用浏览器原生 window.print() 打印 A4 页面
• 使用 html2canvas + jspdf 生成单页 PDF（不依赖服务端）

功能

Renderer — DOM 渲染

import { Renderer } from '@a4-pagination-print/renderer-browser';

const renderer = new Renderer({
  element: document.getElementById('app'),
  scale: 3.78,      // mm → px
});

// 渲染单页
renderer.render(page);

// 渲染多页
renderer.renderAll(pages);

// 清理
renderer.destroy();

PageNavigator — 浏览器端翻页

import { BrowserPageNavigator } from '@a4-pagination-print/renderer-browser';

const nav = new BrowserPageNavigator({
  pages,
  element: document.getElementById('app'),
  onPageChange: (index) => console.log(`当前第 ${index} 页`),
});

nav.next();
nav.prev();
nav.goTo(5);

print — 浏览器打印

import { printPage, printAllPages } from '@a4-pagination-print/renderer-browser';

// 打印单页
printPage(page);

// 打印全部
printAllPages(pages);

Single PDF — 浏览器端 PDF

import { generateSinglePdf } from '@a4-pagination-print/renderer-browser';

// 生成单页 PDF（需要 html2canvas 和 jspdf）
const pdf = await generateSinglePdf(page, {
  filename: 'report.pdf',
  scale: 2,     // 提高清晰度
});

可选依赖

以下依赖为 peerDependencies，按需安装：

| 包 | 用途 | 是否必需 | |---|---|---| | html2canvas | 将 DOM 转为 Canvas | PDF 生成时需要 | | jspdf | 生成 PDF 文件 | PDF 生成时需要 |

# 如需 PDF 生成功能
npm install html2canvas jspdf

依赖

• @a4-pagination-print/core — 分页引擎

License

MIT