前端组件
为了方便大家在自己的web项目中集成BaskReport，我们提供了一个基于VUE3+TS的BaskReport前端组件。通过使用该组件我们可以在web页面的任意位置嵌入已经发布的BaskReport报表；同时利用组件中提供的Javascript API，再配合Typescript的代码提示功能，我们可以快速导出或打印指定的已发布的BaskReport报表文件。
安装
npm i baskreport --S
我们可以打开 https://www.npmjs.com/ 搜索baskreport关键字，以查看该组件的一些信息以及源码git地址。
使用
该组件功能分为两个：一个为基于Vue3的组件，它可以将指定的BaskReport报表文件渲染到该组件当中，支持除填报以外的几乎所有功能；另一个是Javascript的API，我们可以在web页面中需要的地方导入这个API，用它实现指定报表文件的打印、导出之类功能。
使用基于Vue3的BaskReport组件
当前的BaskReport组件基于Vue3开发，所以必须在一个Vue3项目中使用该组件，同时该组件开发时基于Typescript，所以我们推荐您的项目要支持Typescript，这样能获得更好的使用体验。
首先在一个Vue3页面中导入组件所需要的样式：
import 'baskreport/dist/style.css'
接下来导入名为BaskReportViewer的组件：
import {BaskReportViewer} from 'baskreport'
然后在页面需要的地方插件该组件即可：
<BaskReportViewer code="ds" :pageIndex="pageIndex" :callback="getReportInfo" baseUrl="http://localhost:8080/baskserver-test"></BaskReportViewer>
该组件需要用到的参数如下表所示：
| 参数名 | 类型 | 是否必须 | 含义 |
|---|---|---|---|
| code | 字符串 | 否 | 目标报表文件的code值，和id属性为二选一，必须提供code或id属性，二者不能皆不提供。 |
| id | 数字 | 否 | 目标报表文件的id值，和code属性为二选一，必须提供code或id属性，二者不能皆不提供。 |
| baseUrl | 字符串 | 是 | 目标报表服务器的URL，这个URL指的是报表应用的具体地址，如果有contextPath的也必须提供，如上面的baskserver-test。 如果当前应用与报表应用是同一个，则只需要提供相对地址即可。 |
| pageIndex | 数字 | 否 | 表示要加载的目标报表的第几页，一般值都是1，也就是加载第一页；如果该属性为空，那么就表示直接以不分页形式加载目标报表的所有内容。组件内部会监听该属性值的变化，所以我们可以在外部通过变化该属性的值，实现目标报表数据的翻页功能。 |
| parameters | Json | 否 | 加载目标报表时要提供的参数，数据类型是JSON，这就允许我们在外部将目标报表需要的参数传入组件中。由于组件内部会监听该属性值的变化，所以对于一些查询类报表我们就可以在外部构建查询表单，然后将查询结果以JSON形式传入该组件即可实现报表数据的动态查询功能。 |
| callback | function | 否 | 一个回调函数，用于组件在加载完成报表数据后调用。通过这个函数，我们可以获取到目标报表分页后总页数、web预览配置的允许显示哪些工具（各种导出、打印工具等）。 |
| width | 数字 | 否 | 组件宽度，单位为px，设置了该属性后，如果要展示的报表宽度大于这里定义的宽度，那么会出现滚动条。需要注意的是，如果报表中设置了锁定行或列，只能在出现滚动条时并滚动时才能看到锁定效果。 |
| height | 数字 | 否 | 组件高度，单位为px，设置了该属性后，如果要展示的报表高度大于这里定义的高度，那么会出现滚动条。需要注意的是，如果报表中设置了锁定行或列，只能在出现滚动条时并滚动时才能看到锁定效果。 |
下面是一个callback函数的简单示例：
const getReportInfo = (info: ReportInfo) => {
const tools = info.tools;
for (let tool of tools) {
console.log('name:' + tool.name);
}
totalPages.value = info.totalPages;
}
在这个回调函数中，组件在加载好报表数据后，会将报表的相关信息放到这个ReportInfo对象中供我们使用，我们可以根据需要决定如何使用这些信息。
报表文件的code是BaskReport在2.0.6及以上版本才有的文件属性，以往版本中只有id属性。
使用Javascript API
在baskreport库中，我们还提供了一个名为BaskReport的Javascript API，该API所实现的功能与Javascript-API集成一节中介绍的功能完成一致，只它当前包中提供的BaskReport对象是基于TS编写，所以使用它会拥有更好的体验。
baskreport库中的BaskReport对象，与上面提到的Vue3组件BaskReportViewer没有依赖关系，所以二者可以分开使用，当然也可以配合使用，这取决于我们的实际需求。
同样因为这个名为BaskReport的Javascript API基于TS编写，所以我们推荐大家的项目也要支持TS，这样会获取更好的使用体验。
使用该组件方法也比较简单，就是在需要的地方导入即可使用：
import {BaskReport} from 'baskreport'
由于这个API与Javascript-API集成一节中介绍的功能完成一致，所以大家可以参考Javascript-API集成中介绍的使用方法，这里就不再赘述。