怎样使报表充满手机页面
怎样使手机端浏览报表的时候让报表宽度适应手机屏幕宽度。你好，可以设置该属性：宽度自适应 viewer._viewer.zoom = { mode: 1 };查看对应的API：https://gcdn.grapecity.com.cn/forum.php?mod=viewthread&tid=78328&extra=page%3D2
KearneyKang 发表于 2020-10-29 12:18
你好，可以设置该属性：宽度自适应查看对应的API：https://gcdn.grapecity.com.cn/forum.php?mod=viewthrea ...
这个代码不管用 本帖最后由 KearneyKang 于 2020-11-2 16:42 编辑
你好，具体的写法你参考这个：<script type="text/javascript">
var viewer = GrapeCity.ActiveReports.JSViewer.create({
element: '#viewerContainer',
reportID: '标签打印.rdlx', //报表名称和参数的传递
reportService: {},
documentLoaded: () => {
viewer._viewer.zoom = { mode: 1 };
//var x = document.querySelector('');
//x.click(); //全屏幕展示
}
});
</script>
https://gcdn.grapecity.com.cn/forum.php?mod=viewthread&tid=76114&extra=page%3D2
@{
Layout = null;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>报表中心</title>
<!-- Bootstrap Styles-->
<link rel="shortcut icon" href="bitbug_favicon.ico">
<link href="/Content/h5report/css/bootstrap.css" rel="stylesheet" />
<!-- FontAwesome Styles-->
<link href="/Content/h5report/css/fontawesome-all.css" rel="stylesheet" />
<!-- Morris Chart Styles-->
<link href="/Content/h5report/css/morris-0.4.3.min.css" rel="stylesheet" />
<!-- Custom Styles-->
<link href="/Content/h5report/css/custom-styles.css" rel="stylesheet" />
<!-- Google Fonts-->
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
<link rel="stylesheet" href="/Content/h5report/css/cssCharts.css">
@*<link href="/Content/h5report/css/GrapeCity.ActiveReports.Viewer.Html.css" rel="stylesheet" />*@
<link rel="stylesheet" href="/Content/AR/vendor/css/materialdesignicons.min.css" media="all" type="text/css" />
<link rel="stylesheet" href="/Content/AR/vendor/css/fonts-googleapis.css" type="text/css" />
<link rel="stylesheet" href="/Content/AR/jsViewer.min.css" />
<style>
.navbar-side {
z-index: 2000;
width: 100%;
}
.gcv-menu {
display: none;
}
.gcv-header-container {
display: none;
}
#page-wrapper {
padding: 0;
}
</style>
</head>
<body>
<div id="wrapper">
<nav class="navbar navbar-default top-navbar" role="navigation">
<div class="navbar-header">
<a id="reportname" class="navbar-brand" href="javascript:;">
@*<img src="bitbug_favicon (1).ico" />*@ <strong>报表查看</strong>
</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
@*<div id="sideNav" href=""><i class="fa fa-caret-right"></i></div>*@
</div>
</nav>
<!--/. NAV TOP-->
<nav class="navbar-default navbar-side" role="navigation">
<div class="sidebar-collapse">
<ul class="nav" id="main-menu">
@Html.Raw(ViewBag.html)
@*<li>
<a href="index.html?reportid=historicBill"><i class="fa fa-qrcode"></i>信用卡账单</a>
</li>*@
</ul>
</div>
</nav>
<!-- /. NAV SIDE-->
<div id="page-wrapper" width="100%">
<div id="test" style="width:100%;height:800px"></div>
</div>
</div>
<script src="/Content/h5report/js/jquery-1.10.2.js"></script>
<script src="/Content/h5report/js/bootstrap-3.0.0.js"></script>
<script src="/Content/h5report/js/jquery.metisMenu.js"></script>
<script src="/Content/h5report/js/knockout-2.3.0.js"></script>
@*<script src="/Content/h5report/js/GrapeCity.ActiveReports.Viewer.Html.js"></script>
<script src="/Content/h5report/js/ViewerEx.js"></script>*@
<script src="/Content/AR/jsViewer.min.js"></script>
<script src="/Content/h5report/js/custom-scripts.js"></script>
<script>
$(function () {
var viewer = GrapeCity.ActiveReports.JSViewer.create({
element: '#test',
reportID: '@Request["reportid"]',
reportService: {
},
displayMode: 'Continuous',
documentLoaded: function () {
viewer._viewer.zoom = { mode: 1 };
},
localeUri: '/Content/AR/custom-locale.json',
});
console.log(viewer);
//$('').click();
$(".nav li").on("click", function () {
//$(".nav li").removeClass("active-menu");
$(this).addClass("active-menu");
});
});
</script>
</body>
</html> 上面的是他们写的代码，还是不行，能不能帮忙看看问题出在哪？ 本帖最后由 KearneyKang 于 2020-11-3 09:48 编辑
你好，主要执行的代码是在这里，
documentLoaded：function（）{
viewer._viewer.zoom = {mode：1};
}你们看看该方法在这个documenLoaded:function中是否执行了
https://gcdn.grapecity.com.cn/forum.php?mod=image&aid=106257&size=300x300&key=52021ca6a48231fd&nocache=yes&type=fixnonehttps://gcdn.grapecity.com.cn/forum.php?mod=image&aid=106259&size=300x300&key=c9bc6e79455ae4fe&nocache=yes&type=fixnone
同事说代码已经执行，不过还是不行，左侧还是有空白的地方。和报表格式有关系吗？咱们网上说的一次设计都通用吗？能不能提供一个手机端显示的报表模板，或者给做一个demo？
非常感谢！
你好，使用宽度自适应现在我这边重现了你的问题
这个设置我这边需要跟研发同事沟通下。展示现在靠左，应该是产品本身设计的问题
好的，谢谢！最好尽快给我们回复一下。