使用Javascript打印输出

教学视频

概述

通过引用报表中的一个Javascript文件，调用该文件中的相关方法，实现报表的预览、打印和导出功能。

引用Javascript文件

Javascript文件URL格式如下：

http[s]://host[:port]/[context-path]/baskserver/res/baskreport/js/view/BaskReport.bundle.js

在我们的HTML文件中通过上面的URL引入BaskReport中提供的名为BaskReport.bundle.js的Javascript文件后，接下来就可以在自己的Javascript代码中通过Javascript调用实现特定报表的预览、打印和导出功能。

使用Javascript调用报表

引入BaskReport.bundle.js文件后，当前的HTML文件中就可以直接使用BaskReport这个Javascript对象，这个对象中提供的方法如下表所示：

方法名	说明	语法
doPrint	直接打印报表文件	`BaskReport.doPrint({id:reportFileId,[parameters:{name:value},] baseUrl:reportServerUrl});`
doSilentPrint	2.1.1版本开始支持，将报表发送给BaskReport打印服务器，实现无预览打印或者叫静默打印， BaskReport无预览静默打印详情点击此处了解	`BaskReport.doSilentPrint({id:reportFileId,[parameters:{name:value},] baseUrl:reportServerUrl});`
doMultiPrint	直接打印多个报表文件，将多个报表文件合并在一个文件中打印输出	`BaskReport.doMultiPrint({files:[ { id:reportFileId[,parameters:{name:value}] }, { id:reportFileId[,parameters:{name:value}] } ], baseUrl:reportServerUrl});`
doPreview	新开窗口以HTML形式预览报表文件	`BaskReport.doPreview({id:reportFileId, [parameters:{name:value},] baseUrl:reportServerUrl});`
doExportWord	直接将报表文件以word形式导出	`BaskReport.doExportWord({ id:reportFileId, [parameters:{name:value},] baseUrl:reportServerUrl});`
doExportExcel	直接将报表文件以excel形式导出	`BaskReport.doExportExcel({ id:reportFileId, [parameters:{name:value},] baseUrl:reportServerUrl});`
doExportMultiExcel	导出多个报表文件，将多个报表文件放在一个Excel文件不同的Sheet页中导出。	`BaskReport.doExportMultiExcel({ files:[ { id:reportFileId[,parameters:{name:value}] }, { id:reportFileId[,parameters:{name:value}] } ] baseUrl:reportServerUrl});`
doExportPdf	直接将报表文件以pdf形式导出	`BaskReport.doExportPdf({ id:reportFileId, [parameters:{name:value},] baseUrl:reportServerUrl});`
doExportCsv	直接将报表文件以csv形式导出	`BaskReport.doExportCsv({ id:reportFileId, [parameters:{name:value},] baseUrl:reportServerUrl});`
doExportMultiPdf	直接导出多个报表文件，将多个报表文件合并在一个pdf文件中导出	`BaskReport.doExportMultiPdf({ files:[ { id:reportFileId[,parameters:{name:value}] }, { id:reportFileId[,parameters:{name:value}] } ] baseUrl:reportServerUrl});`
doSave	调用目标iframe窗口中存在的报表填报页面里的保存功能，实现数据填报提交。需要在当前页面中通过iframe嵌入填报页面，且需要为这个iframe指定ID值；同时在调用这个方法时，还可以添加一个名为callback的参数用于指定保存成功后要执行的回调函数，该函数入参只有一个，里面包含当前提交的数据（数据需要调用decodeURIComponent方法解码），文件ID等信息。	BaskReport.doSave({iframe:"iframeId"[,callback:function]})

上面的语法中，reportFileId表示具体的已发布的报表文件ID，parameters属于可选参数，baseUrl表示报表服务器的URL，比如：http://192.168.18.106:8080/baskserver-test 。

上面的方法中，需要注意的是访问的目标报表文件必须是已发布的，否则可能会出现访问不了的情况。同时在访问报表文件时，还要保证访问的URL处理登录状态。如果当前报表引擎与应用集成在一起，那么登录不是问题，如果报表引擎与应用分别位于不同的系统当中，那么需要解决登录问题，具体可参考BaskServer平台中单点登录相关介绍。

参数说明

id

该参数用于指定报表文件的ID，id参数和code参数二选一

code

我们也可以通过报表的CODE参数访问它，该参数用于指定报表文件的CODE，id参数和code参数二选一

BaskReport.doPrint({
    code:reportFileCode,
    [parameters:{name:value},]
    baseUrl:reportServerUrl
});

name

在执行导出报表文件操作时，可以添加一个name参数用于指定报表导出后的文件名称，如果不加name参数，默认则采用目标报表名称为导出后的文件名（导出多个文件则采用第一个文件的文件名）。

parameters

报表参数，对应为报表设计器中的参数列表，该参数集合用JSON结构的数据声明，例如：

BaskReport.doPrint({
    code:reportFileCode,
    parameters:{deptId:"D11",sex:true},
    baseUrl:reportServerUrl
});

baseUrl

报表服务的URL

举例

下面的HTML中包含五个按钮，通过引用BaskReport.bundle.js文件，使用BaskReport对象提供的对应方法，实现打印单张报表、打印多张报表、预览HTML报表、导出Word以及导出多张报表到一个PDF文件的功能，JSP源码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试</title>
<script type="text/javascript" src="http://192.168.18.106:8080/baskserver-test/baskserver/res/baskreport/js/view/BaskReport.bundle.js"></script>
</head>
<body>
<button onClick="print()">打印单张报表</button>
<button onClick="multiprint()">打印多张报表</button>
<button onClick="preview()">预览HTML报表</button>
<button onClick="exportWord()">导出Word</button>
<button onClick="multiexport()">导出多张报表到一个PDF文件</button>
<script>
    var REPORT_BASE_URL = 'http://192.168.18.106:8080/baskserver-test';
    function print(){
        BaskReport.doPrint({
            id:2001,
            baseUrl:REPORT_BASE_URL
        });
    }
    function multiprint(){
        BaskReport.doMultiPrint({
            baseUrl:REPORT_BASE_URL,
            files:[
                {
                    id:2001
                },
                {
                    id:1501
                }
            ]
        });
    }
    function multiexport(){
        BaskReport.doExportMultiPdf({
            baseUrl:REPORT_BASE_URL,
            files:[
                {
                    id:2001
                },
                {
                    id:1501
                }
            ]
        });
    }
    function preview(){
        BaskReport.doPreview({
            baseUrl:REPORT_BASE_URL,
            id:1501
        });
    }
    function exportWord(){
        BaskReport.doExportWord({
            baseUrl:REPORT_BASE_URL,
            id:1501
        });
    }
</script>
</body>
</html>

上面的例子当中，通过REPORT_BASE_URL变量定义要操作的报表文件所在的应用地址，REPORT_BASE_URL的值为：http://192.168.18.106:8080/baskserver-test ，这里的baskserver-test为应用的contextpath，需要注意的是，如果我们的应用没有contextpath，那么REPORT_BASE_URL的值就应该为：http://192.168.18.106:8080。

预览效果如下图：

Javascript-API集成