概述

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

BaskReport是BaskSoft旗下一款web报表软件，它拥有强大的报表展示能力和卓越的大数据处理性能。BaskReport官网：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集成中描述的相同，借助TS的代码提示功能，大家可以参照使用。

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