JSviewer工具栏的API
本帖最后由 KearneyKang 于 2020-12-15 10:21 编辑自从ActiveReportsV13提供 了JSviewer这种新的渲染方式之后，现在web端展示95%的报表使用者都使用了JSviewer这种渲染方式，这种方式展示的好处是：第一渲染速度快
第二UI更美观
第三功能更加完善
下面我们就来说说如何进行工具栏的调整:
1、自定义按钮的添加：
经常我们会有这样的一个需求，就是在工具栏后面进行自定义按钮的添加
参考代码：<script type="text/javascript">
let viewer;
function loadViewer() {
var viewer = GrapeCity.ActiveReports.JSViewer.create({
element: '#viewerContainer',
reportID: 'Sqlserver多值参数报表1.rdlx',
//reportParameters: [{ name: 'P1', values: }
//],
reportService: {},
setting: {
ZoomType: 'fitpage'
}
});
pdfExportButton = {
key: 'pdfExternalExportButton',
iconCssClass: 'mdi mdi-file',
text: "PDF Export",
title: "PDF Export",
checked: true,
enabled: true,
action: function (item) {
var settings = { title: 'Invoice List', userPassword: 'user_Pwd' };
var cancelCallback = function () {
return false;
}
viewer.export('pdf', settings, { cancel: cancelCallback })
.then(result => result.download("Exported_PDF"));
}
};
viewer.toolbar.desktop.addItem(pdfExportButton);
}
</script>
2、自定义按钮的移除
viewer.toolbar.desktop.removeItem('$pdfExportButton'); 3、整个工具栏的移除
viewer.toolbar.toggle(false);4、侧边栏的移除
viewer.sidebar.toggle(false);5、打印 按钮的移除
viewer.toolbar.desktop.removeItem('$print');6、报表刷新
viewer.refresh()7、报表打印
viewer.print()8、报表导出
viewer.export('XLSX', null, true, { FileName: '1997 Annual Report1', Multisheet: false,LayoutMode:"Galley" })9、显示模式，画廊模式：Galley ，分页展示：Paginated
viewer.renderMode = 'Galley';如果是写在报表渲染的加载方法中，画廊模式写成这样
var viewer = GrapeCity.ActiveReports.JSViewer.create({
element: '#viewerContainer',
reportID: 'RDL报表.rdlx;', //报表名称
//availableExports: ['Xml', 'Pdf'],//导出的方式
reportService: {},
renderMode: 'Galley',//画廊模式
// other properties
documentLoaded: () => {
// //viewer.print();
// //$("#main_toolbar_Item_17").hide();
// //$("#main_toolbar_Item_18").hide();
// //$("#main_toolbar_Item_19").hide();
//viewer.export('XLSX', null, true, { FileName: '1997 Annual Report1', Multisheet: false,LayoutMode:"Galley" })
//viewer.toolbar.toggle(false)
}
}); 10、连续模式
displayMode: 'Continuous',
11、全屏幕展示(Fullscreen)documentLoaded: () => {
var x = document.querySelector('');
x.click(); //全屏幕展示
}12、宽度自适应 viewer._viewer.zoom = { mode: 1 };
13、侧边栏导出样式的调整
availableExports: ['doc', 'docx', 'xlsx', 'xls','pdf'],Word：'doc', 'docx'
Excel：'xlsx', 'xls'
PDF：'pdf'
Xml: 'xml'
JSON: 'json'
<script type="text/javascript">
var viewer = GrapeCity.ActiveReports.JSViewer.create({
element: '#viewerContainer',
reportID: 'RDL报表-图片.rdlx;123;456', //报表名称和参数的传递
availableExports: ['doc', 'docx', 'xlsx', 'xls','pdf'],//导出样式设置，默认是可以导出所有的样式
reportService: {},
renderMode: 'Galley',
// other properties
documentLoaded: () => {
}
});
</script>14、前端参数赋值：reportParameters: [{ name: 'ReportParameter1', values: ['1']}] reportParameters: [{ name: 'P1', values: },
{ name: 'P2', values: ['Reports参数2'] }
],
如何把
viewer.export('XLSX', null, true, { FileName: '1997 Annual Report1', Multisheet: false,LayoutMode:"Galley" })
绑定到 ，导出excel的点击事件上 你好，使用这个办法可以进行按钮的添加
<script type="text/javascript">
let viewer;
function loadViewer() {
var viewer = GrapeCity.ActiveReports.JSViewer.create({
element: '#viewerContainer',
reportID: 'Sqlserver多值参数报表1.rdlx',
//reportParameters: [{ name: 'P1', values: }
//],
reportService: {},
setting: {
ZoomType: 'fitpage'
}
});
pdfExportButton = {
key: 'pdfExternalExportButton',
iconCssClass: 'mdi mdi-file',
text: "PDF Export",
title: "PDF Export",
checked: true,
enabled: true,
action: function (item) {
var settings = { title: 'Invoice List', userPassword: 'user_Pwd' };
var cancelCallback = function () {
return false;
}
viewer.export('pdf', settings, { cancel: cancelCallback })
.then(result => result.download("Exported_PDF"));
}
};
viewer.toolbar.desktop.addItem(pdfExportButton);
}
</script>
请把这个案例发我一下！ 我印象中是不是有个可以让报表预览直接用pdf模式的？帮忙回忆一下，我来想办法从那边看有没有机会。谢谢！ 报表预览直接是PDF格式，那么报表的展示是使用Webviewer进行展示，然后使用的是 该模式：“AcrobatReader”具体可以看这里：https://www.grapecity.com/activereportsnet/docs/v14/online/getting-started-with-the-webviewer.html
settings 里面的属性有哪些 代码小张 发表于 2022-9-7 18:08
settings 里面的属性有哪些
您好，方便的话还请新开个新贴，具体描述一下您的问题，我们在新贴进行解决，感谢理解~
页:
[1]