找回密码
 立即注册

QQ登录

只需一步,快速开始

adgao

初级会员

36

主题

143

帖子

331

积分

初级会员

积分
331
QQ
adgao
初级会员   /  发表于:2020-10-29 11:02  /   查看:9039  /  回复:28
怎样使手机端浏览报表的时候让报表宽度适应手机屏幕宽度。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

28 个回复

倒序浏览
KearneyKang讲师达人认证 悬赏达人认证
超级版主   /  发表于:2020-10-29 12:18:29
沙发
你好,可以设置该属性:宽度自适应
  1. viewer._viewer.zoom = { mode: 1 };
复制代码
查看对应的API:https://gcdn.grapecity.com.cn/fo ... &extra=page%3D2


回复 使用道具 举报
adgao
初级会员   /  发表于:2020-10-29 16:17:35
板凳
KearneyKang 发表于 2020-10-29 12:18
你好,可以设置该属性:宽度自适应查看对应的API:https://gcdn.grapecity.com.cn/forum.php?mod=viewthrea ...

这个代码不管用
回复 使用道具 举报
KearneyKang讲师达人认证 悬赏达人认证
超级版主   /  发表于:2020-10-29 17:04:26
地板
本帖最后由 KearneyKang 于 2020-11-2 16:42 编辑

你好,具体的写法你参考这个:
  1. <script type="text/javascript">
  2.     var viewer = GrapeCity.ActiveReports.JSViewer.create({
  3.         element: '#viewerContainer',
  4.         reportID: '标签打印.rdlx', //报表名称和参数的传递
  5.         reportService: {},
  6.         documentLoaded: () => {  
  7.             viewer._viewer.zoom = { mode: 1 };
  8.             //var x = document.querySelector('[title="Toggle Fullscreen"]');
  9.             //x.click();   //全屏幕展示                             
  10.         }
  11.     });
  12. </script>
复制代码


https://gcdn.grapecity.com.cn/fo ... &extra=page%3D2

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复 使用道具 举报
adgao
初级会员   /  发表于:2020-11-2 21:50:41
5#
@{
    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);
        //$('[title="全屏"]').click();



            $(".nav li").on("click", function () {
                //$(".nav li").removeClass("active-menu");
                $(this).addClass("active-menu");
            });

        });



    </script>







</body>

</html>
回复 使用道具 举报
adgao
初级会员   /  发表于:2020-11-2 21:51:56
6#
上面的是他们写的代码,还是不行,能不能帮忙看看问题出在哪?
回复 使用道具 举报
KearneyKang讲师达人认证 悬赏达人认证
超级版主   /  发表于:2020-11-3 09:46:58
7#
本帖最后由 KearneyKang 于 2020-11-3 09:48 编辑

你好,主要执行的代码是在这里,

documentLoaded:function(){
                    viewer._viewer.zoom = {mode:1};

                }你们看看该方法在这个documenLoaded:function中是否执行了



本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复 使用道具 举报
adgao
初级会员   /  发表于:2020-11-4 09:19:29
8#

同事说代码已经执行,不过还是不行,左侧还是有空白的地方。和报表格式有关系吗?咱们网上说的一次设计都通用吗?能不能提供一个手机端显示的报表模板,或者给做一个demo?
非常感谢!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复 使用道具 举报
KearneyKang讲师达人认证 悬赏达人认证
超级版主   /  发表于:2020-11-4 10:11:47
9#
你好,使用宽度自适应现在我这边重现了你的问题
这个设置我这边需要跟研发同事沟通下。展示现在靠左,应该是产品本身设计的问题

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复 使用道具 举报
adgao
初级会员   /  发表于:2020-11-5 14:33:53
10#
好的,谢谢!最好尽快给我们回复一下。
回复 使用道具 举报
123下一页
您需要登录后才可以回帖 登录 | 立即注册
返回顶部