# baskreport-component

**Repository Path**: xiaodaodao/baskreport-component

## Basic Information

- **Project Name**: baskreport-component
- **Description**: baskreport npm组件项目
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 0
- **Created**: 2024-06-07
- **Last Updated**: 2025-09-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 概述

中式web报表工具BaskReport前端组件，通过该组件可以在您WEB应用页面中任意位置直接预览指定BaskReport报表文件；也可以直接调用该项目的的BaskReport对象实现报表的导出或打印操作。

> BaskReport是BaskSoft旗下一款web报表软件，它拥有强大的报表展示能力和卓越的大数据处理性能。BaskReport官网：[http://www.basksoft.com](http://www.basksoft.com)

本项目基于Vue3+TS编写。

### 使用方法

> npm i baskreport --S

安装BaskReport组件包。

#### 在Vue3项目中使用BaskReportViewer组件

使用该组件可以直接预览一个已发布的BaskReport报表

首先导入使用该组件需要用到的样式：

> import 'baskreport/dist/style.css'

然后再导入该组件：

> import {BaskReportViewer} from 'baskreport'

导入后就可以在页面中使用它，需要注意的时，使用该组件时必须要指定id或code属性(二选一)以及baseUrl属性，示例：

```
<BaskReportViewer code="ds" :pageIndex="pageIndex" :callback="getReportInfo" baseUrl="http://localhost:8080/baskserver-test"></BaskReportViewer>
```

这里的callback属性用于获取报表加载后的一些信息，诸如总页数，允许使用的浏览工具等，上面的getReportInfo函数内容如下：

```
const getReportInfo = (info: ReportInfo) => {
  const tools = info.tools;
  for (let tool of tools) {
    console.log('name:' + tool.name);
  }
  totalPages.value = info.totalPages;
}
```

#### 在JS中使用BaskReport对象

首先导入该对象

> import {BaskReport} from 'baskreport'

然后就可以调用该对象中的打印、导出之类的方法，该对象实现的功能与[Javascript-API集成](https://gitee.com/link?target=https%3A%2F%2Fbasksoft.com%2Fdoc%2Freport%2Foutput%2Fjavascript.html)中描述的相同，借助TS的代码提示功能，大家可以参照使用。

##### 关于该组件的详细使用方法，请参考官方文档：[https://basksoft.com/doc/report/output/components.html](https://basksoft.com/doc/report/output/components.html)