BaskReport Component

基于 Vue 3 + TypeScript 开发的前端组件库，用于在 Web 应用中集成 BaskReport 报表能力。该组件库提供了丰富的报表展示、交互、导出及打印功能。

功能特性

1. 报表预览: 支持在 Vue 页面中无缝嵌入报表查看器。
2. 数据交互: 支持大数据量展示，具备良好的渲染性能。
3. 图表支持: 内置图表渲染引擎（基于 ChartBuilder），支持动态图表加载与展示。
4. 锁定行列: 支持冻结窗格（锁定行/列），方便查看大数据表格。
5. 导出功能: 支持导出为 Excel, PDF, Word, CSV 等多种格式。
6. 打印支持: 支持页面直接打印及静默打印（Silent Print）模式，静默打印通过 LocalStorage 进行数据中转。
7. 类型提示: 完整的 TypeScript 类型定义， IDE 智能提示支持。

安装

使用 npm 安装组件包：

npm install baskreport --save

快速开始

1. 在 Vue 3 中使用组件

这是最常用的方式，用于在页面上展示一个报表。

步骤 1: 导入样式和组件

import 'baskreport/dist/style.css'
import { BaskReportViewer } from 'baskreport'

步骤 2: 在模板中使用

<BaskReportViewer> 是核心组件。必须指定tenantId, id 或 code (报表编码) 以及 baseUrl (报表服务地址)。

<template>
    <div style="height: 100vh;">
        <BaskReportViewer
            tenantId="your-tenant-code"
            code="your-report-code"
            baseUrl="http://localhost:8080"
            :pageIndex="currentPage"
            :callback="handleReportInfo"
        />
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import 'baskreport/dist/style.css'
import { BaskReportViewer, ReportInfo } from 'baskreport'

const totalPages = ref(0)

// 报表加载完成的回调函数，用于获取元数据
const handleReportInfo = (info: ReportInfo) => {
    console.log('报表工具栏配置:', info.tools)
    console.log('总页数:', info.totalPages)
    totalPages.value = info.totalPages
}

const currentPage = ref(1)
</script>

BaskReportViewer 属性 (Props)

| 属性名 | 类型 | 必填 | 说明 | | :------------ | :--------- | :--- | :------------------------------------------ | | tenantId | string | 是 | 租户ID | | code | string | 是 | 报表编码 (与id 二选一) | | id | string | 是 | 报表ID (与code 二选一) | | baseUrl | string | 是 | BaskServer 服务的基础地址 | | servletPath | string | 否 | BaskServer 的Servlet地址,默认值baskserver | | pageIndex | number | 否 | 当前页码 | | callback | function | 否 | 报表加载完成后的回调，返回ReportInfo 对象 |

2. 使用 JavaScript API (BaskReport 对象)

除了可视化组件，你也可以直接使用导出的 BaskReport 类来调用底层的打印和导出能力。这在需要通过按钮触发导出，或者进行复杂的批量操作时非常有用。

首先导入：

import { BaskReport } from 'baskreport'

2.1 报表导出 (Export)

通过 BaskReport.doExport 方法导出报表。

// 导出 Excel 配置示例
const exportConfig = {
  tenantId: 'basksoft',
  reportId: '1001',
  type: 'EXCEL', // 或者 PDF, WORD, CSV
  baseUrl: 'http://localhost:8080'
  // 导出参数
  params: {
    _export_type: 'xlsx',
    deptno: '10'
  }
};

BaskReport.doExport(exportConfig);

导出类型定义：

• ExcelExportConfig
• PdfExportConfig
• WordExportConfig
• CsvExportConfig

2.2 静默打印 (Silent Print)

静默打印是指在不弹窗预览的情况下，直接调用浏览器或客户端进行打印。

const printConfig = {
  tenantId: 'basksoft',
  reportId: '1001',
  baseUrl: 'http://localhost:8080'
  silent: true,
  params: { ... }
};

// 触发静默打印
BaskReport.processSilentPrint(printConfig);

**静默打印原理：**该组件内部实现了 initPrintFrame 和 LocalStorage 数据同步机制。如果在服务端配置了静默打印网关，组件会通过 sendMessageForSilentPrint 与之通信。

从0.2.6版本开始，静默打印支持通过targetPrinter参数指定目标打印机名称，当然也可以在执行processSilentPrint后弹出的静默打印配置窗口中选择目标打印机，从而实现不同报表文件的打印采用对应的打印机。 需要注意的是，如果通过targetPrinter参数指定的打印机不存在，那么会使用打印服务客户端中指定的打印机进行打印。

2.3 初始化与消息监听

如果你需要完全自定义 iframe 的交互，可以手动初始化打印框架和消息监听：

// 初始化打印框架
BaskReport.initPrintFrame()

// 初始化消息监听器 (用于接收 iframe 内的消息)
BaskReport.initMessageListener()

组件结构概览

• BaskReportViewer.vue: 报表查看器主组件。
• LockRowTable.vue / LockColTable.vue / LockRowColTable.vue: 实现了锁定行、列或行列同时锁定的表格组件。
• chart/ChartBuilder.ts: 负责图表的渲染，支持动态加载图表脚本。
• message/: 包含错误提示弹窗 (Dialog, Message) 和加载状态 (Loading) 的 UI 组件。
• Event.ts: 组件内部使用的事件总线 (EventBus)，用于深层组件通信。

注意事项

1. 环境依赖: 使用该组件前，请确保你已经部署并运行了 BaskServer 后端服务。
2. 跨域问题: 如果前端应用与 BaskServer 部署在不同域名下，请务必在 BaskServer 端配置好 CORS 跨域策略。
3. 静默打印: 使用静默打印功能通常需要额外的浏览器插件或本地客户端配合（具体参考 BaskReport 官方文档）。

参考链接

• 官方文档: https://basksoft.com/doc/report/output/components.html
• BaskReport 官网: http://www.basksoft.com
• Gitee 仓库: https://gitee.com/xiaodaodao/baskreport-component