EasyPrint Designer

EasyPrint Designer 是一个轻量级、高性能的 Web 端报表设计器与打印生成器。它基于 HTML5 Canvas 和 jQuery 构建，不依赖任何重型框架，可以轻松集成到任何 Web 项目中（如 React, Vue, Angular 或原生 JS）。

功能特性

• 🎨 可视化设计器：直观的拖拽式界面，所见即所得的设计体验。
• 📄 丰富组件：支持文本、矩形、直线、图片、条形码、二维码等基础组件。
• 📊 高级表格：
  • 支持动态数据行绑定。
  • 自动分页：表格内容超出页面高度时，自动切割并延伸至下一页。
  • 自动合计：可配置指定列自动计算总和，并在底部追加合计行。
  • 跨页表头自动重复。
• 🔢 页面管理：支持自定义纸张尺寸（A4, A3 等）、页边距设置以及自动页码生成。
• 🔌 数据绑定：强大的 JavaScript 动态渲染函数支持（类似 {{ data.field }} 的逻辑，但更灵活）。
• 🖨️ 高质量导出：
  • PDF：原生支持生成多页 PDF 文档。
  • 图片：支持导出高清（Retina 适配）JPG/PNG 图片（多页报表自动打包为 ZIP）。
• 📦 零重依赖：体积小巧，无框架运行时依赖。

安装

使用 NPM

npm install @silly_yi/easyprint-designer

使用指南

1. 引入设计器 (Designer)

集成设计器，允许用户进行模板编辑。

<div id="designer-container" style="height: 100vh;"></div>

<script type="module">
  import { create } from 'easyprint-designer';
  // 样式会自动注入，无需手动引入 CSS！

  const designer = create(document.getElementById('designer-container'), {
    // 可选的初始化参数
  });

  // 加载已有配置
  designer.setConfig({
    page: { widthMm: 210, heightMm: 297, paper: "A4" },
    elements: []
  });

  // 获取当前配置用于保存
  const config = designer.getConfig();
  console.log(config);
</script>

如果使用全局脚本（script 标签）：

<script>
  const designer = EasyPrintDesigner.create(document.getElementById('designer-container'));
</script>

2. 引入预览器 (Previewer)

使用真实数据渲染报表。

<div id="preview-container"></div>

<script type="module">
  import { preview } from 'easyprint-designer';

  const templateConfig = { ... }; // 从数据库加载的模板配置
  const reportData = {
    orderNo: "ORD-123",
    items: [{ name: "商品 A", price: 100 }, { name: "商品 B", price: 200 }]
  };

  const previewer = preview(document.getElementById('preview-container'), templateConfig, {
    data: reportData
  });

  // 导出操作
  // previewer.exportPDF("report.pdf");
  // previewer.exportJPG("report.jpg"); // 如果有多页，会自动下载 ZIP 包
</script>

数据绑定说明

所有组件都支持通过 renderFn 属性进行动态渲染。这是一个字符串形式的 JavaScript 函数体。

可用变量:

• data: 传递给预览器的完整数据对象。
• rowIndex: (仅表格) 当前行的索引。
• rowItem: (仅表格) 当前行的数据对象。

示例:

• 文本组件:

  return "订单号: " + data.orderNo;

• 表格单元格:

  return rowItem.price.toFixed(2);

• 条形码/二维码:

  return data.trackingCode;

开发

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build

开源协议

MIT