ActiveReportsJS报表控件,在进行报表展示的时候可以根据实际的需求,设置报表展示的时候为连续模式或者画廊模式。
默认情况下报表viewer展示的时候是单页模式,现在我们来进行展示模式的具体设置
1、新建一个在vue框架中集成viewer的项目"arjs-modden"
2、展示模式的API设置
viewer.viewMode = "Continuous"; //连续模式 viewer.renderMode = "Galley"; //画廊模式
3、打开app.vue 参考实际API的设置代码
<template> <div> <JSViewer id="viewer" ref="reportViewer" style="height:800Px"></JSViewer> </div> </template> <script> import { Viewer } from "@grapecity/activereports-vue"; import "@grapecity/activereports/styles/ar-js-ui.css"; import "@grapecity/activereports/styles/ar-js-viewer.css"; import "@grapecity/activereports" export default { name: "App", components: { JSViewer: Viewer, }, mounted: async function () { //this.$refs.reportViewer.Viewer().viewMode = "Continuous"; //连续模式 //this.$refs.reportViewer.Viewer().renderMode = "Galley";//画廊模式 this.$refs.reportViewer.Viewer().open('Reports.rdlx-json'); }, }; </script> <style> #viewer { width: 100%; height: 100vh; } </style>
4、预览结果
连续模式:
画廊模式:
5、demo实例下载