Asp.net 框架下,用Webview然后使用HtmlViewer进行报表加载的时候,由于工具栏里,没有导出按钮,由于项目的需求有时就需要我们手动添加导出按钮,或者去掉一些不需要的按钮。

首先我们来讲讲如何进行按钮的隐藏

操作步骤如下:

实现代码,在页面端<script type="text/javascript"></ script >中,添加如下代码实现:

<script type="text/javascript">
    $(document).ready(function () {
        var toolbar = $('#WebViewer1').find('.arvToolBar');  //WV_Delivery为WebViewer的ID
        toolbar.find('.btnToggleSidebar').remove();
        toolbar.find('.btnFirst').remove();   //隐藏第一页按钮
        toolbar.find('.btnPrev').remove();  //隐藏上页按钮
        toolbar.find('.btnNext').remove();
        toolbar.find('.toolbarLabel').remove();
        toolbar.find('.toolbarInput').remove();
        toolbar.find('.btnLast').remove();           
        toolbar.find('.btnBack').remove();
        toolbar.find('.btnGalley').remove();          
    })
</script>

如何添加导出按钮

具体实现代码:

<script language="javascript" type="text/javascript">   
    var exportSelect = '<select id="ExportSelect" style="width:80px"><option selected disabled>Export</option><option value="PDF" style="background: url(images/pdf.png) right no-repeat; width: 50px">PDF</option><option value="Excel" style="background: url(images/Excel.gif) right no-repeat; width: 50px">Excel</option></select>';
    $(document).ready(function () {
        $(".arvToolBar").append("<span style='margin-right:5px;'><input id='btnPrint' type='Button' value='打印' onclick='OnPrint()'/></span>");
    });
    $(document).ready(function () {
        $(".arvToolBar").append(exportSelect);
        $("#ExportSelect").change(function (e, args) {
            var viewModel = GetViewModel("MainContainer_WebViewer1");
            var valueSelected = this.value;
            if (viewModel.PageLoaded()) {
                switch (valueSelected) {
                    case "PDF":
                        viewModel.Export(ExportType.Pdf, function (uri) {
                            window.location = uri;
                        }, true);
                        break;
                    case "Excel":
                        viewModel.Export(ExportType.Xls, function (uri) {
                            window.location = uri;
                        }, true);
                        break;
                }
            }
        });
    });
    function OnPrint() {      
        var viewModel = GetViewModel("MainContainer_WebViewer1");
        if (!viewModel.PageLoaded())
            return;        
        viewModel.Print();
    };
</script>

想看具体比较详细的代码可以参考,demo示例库


ActiveReports 报表控件| 下载试用

ActiveReports 是一款专注于 .NET 平台的报表控件,全面满足 HTML5 / WinForm / ASP.NET / ASP.NET MVC / WPF 等平台下报表设计和开发工作需求,作为专业的报表工具为全球超过 300,000 开发人员提供了全面的报表开发服务。

您对ActiveReports产品的任何技术问题,都有技术支持工程师提供1对1专业解答,点击此处即可发帖提问>>技术支持论坛