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示例库