HTML5 Viewer Samples

登录

HTML5 Viewer Samples 这个demo在手机端查看不正常，在PC端查看正常，能否通过代码控制工具条的显示或布局

KearneyKang · KearneyKang

您好HTML5渲染有三种方式：可选值: 'Custom', 'Mobile' , 'Desktop'
在手机端您应该选择的是Mobile，桌面端是Desktop
可选值: 'Custom', 'Mobile' , 'Desktop'
function dy() {
         var viewer = GrapeCity.ActiveReports.Viewer({
            element: '#viewer',
            reportService: {
                  url: '/ActiveReports.ReportService.asmx'
            },
            uiType: 'Desktop',
            report: {
                  id: "Test002.rdlx"
            },

            //documentLoaded: function reportLoaded() {
            // viewer.print();
            //},
         });

      }

jsczfw · jsczfw

HTML5渲染方式：改为 'Mobile' 后界面上没有打印按钮了，最重要的是要通过蓝牙小票打印机打印小票的

KearneyKang · KearneyKang

您好！
如果没有打印按钮，打印按钮是可以自己添加的！

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Asp.net_Html5.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="css/theme-cosmo.css" rel="stylesheet"/>
<link href="css/site.css" rel="stylesheet"/>
<link href="css/GrapeCity.ActiveReports.Viewer.Html.css" rel="stylesheet"/>
</head>
<body>
<div class="panel panel-default">
<div class="panel-heading">
<div id="appToolbar" class="btn-toolbar" style="margin-bottom: 10px">
<button type="button" class="btn" id="btnPrint">
Print</button>
<button type="button" class="btn" id="btnExport">
Export to PDF</button>
<button type="button" class="btn" id="btnWord">
Export to Word</button>
<button type="button" class="btn" id="btnExcel">
Export to Excel</button>
</div>
</div>
<ul id="paginator" class="pagination"></ul>
<div id="viewer"style="width:1000px; height:600px;">
</div>
</div>
<script src="Scripts/jquery-1.10.2.js"></script>
<script src="Scripts/bootstrap-3.0.0.js"></script>
<script src="Scripts/knockout-2.3.0.js"></script>
<script src="Scripts/GrapeCity.ActiveReports.Viewer.Html.js"></script>
<script type="text/javascript">
$(function () {
var paginator = $('#paginator');
var viewer = GrapeCity.ActiveReports.Viewer(
{
element: '#viewer',
report: {
id: "JSON数据.rdlx"
},
reportService: {
url: '/ActiveReports.ReportService.asmx'
},
//Setting the uiType to Custom
uiType: 'desktop',
documentLoaded: function () {
setPaginator();
},
localeUri: 'Scripts/i18n/zh.txt'
});
//Creating the function for Printing
$('#btnPrint').click(function () {
viewer.print();
});
//Creating the function for Exporting PDF
$('#btnExport').click(function () {
viewer.export('Pdf', function (uri) {
window.open(uri);
}, false, {});
});
//Creating the function for Exporting Word
$('#btnWord').click(function () {
viewer.export('word', function (uri) {
window.open(uri);
}, false, { fileName: "AR.Open XML" });
});
//Creating the function for Exporting excel
$('#btnExcel').click(function () {
viewer.export('Xls', function (uri) {
window.open(uri);
}, false, {});
});
//Creating the function for using Paginator control to display report pages and to navigate through them
function setPaginator() {
if (viewer.pageCount > 0) {
for (var i = 1; i <= viewer.pageCount; i++) {
$('<li data-bind="' + i + '"><a class="js-page" href="javascript:void(0)">' + i + '</a></li>').appendTo(paginator);
}
paginator.children(":first").addClass('active');
paginator.children().click(function () {
var self = $(this);
viewer.goToPage(self.attr('data-bind'), 0, function () {
paginator.children().removeClass('active');
self.addClass('active');
});
});
}
}
});
</script>
</body>
</html>

复制代码

具体可参考附件的demo

jsczfw · jsczfw

这个DEMO是aspx页面的报表，我要的是HTML5页面的报表,这个demo将引用的dll转换为AR9 的，在AR9环境下跑不起来的

KearneyKang · KearneyKang

您好！
这个demo虽然我给您的是ASPX，但是我用的是H5渲染的!您用HTML加载渲染的方式跟着是一样的，您只需要稍微修改下就行。
第二个问题，你说的跑不起来，您把项目中的AR进行对应版本的匹配没有。具体的信息匹配可以参考如下博客：http://blog.gcpowertools.com.cn/post/Upgrade-project.aspx
然后把AR降为您现在的AR9版本，然后在看看您的Config文件，和license文件中的AR匹配信息是否正确

		自动登录	找回密码
密码			立即注册

[已处理] HTML5 Viewer Samples

本帖子中包含更多资源

5 个回复

本帖子中包含更多资源

活字格认证

微信认证勋章

元老葡萄

圣诞拼拼乐

讲师达人

悬赏达人