Question

我一直在尝试使用jasperreports生成一个报告，并通过visualize.js呈现为在页面上水平居中（无论页面或浏览器维度如何）。

我目前的代码是：

 <!DOCTYPE html>
 <html>
 <head>

 <script src="https://mobiledemo.jaspersoft.com/jasperserver-pro/client/visualize.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mootools/1.5.1/mootools-core-full-compat.min.js"></script>

 <script type='text/javascript'>
   window.addEvent('load', function() {
     visualize({
       auth: {
         name: "joeuser",
         password: "joeuser",
         organization: "organization_1"
       }
     }, function(v) {
       //render dashboard from provided resource
       v("#container").report({
         resource: "/public/Samples/Reports/06g.ProfitDetailReport",
         scale: "container",
         error: handleError
       });

       //show error
       function handleError(err) {
         alert(err.message);
       }

     });

});

 </script>

 <style>
         html,
         body {
           height: 100%;
           width: 100%;
           margin: 0 auto;
           background-color: #000000;
         }

         #container {
           display: block;
           width: 100%;
           height: 100%;
           border: 0px;
           margin: 0 auto;
           background: blue;
         }
 </style>

 </head>

 <body>

 <div id="container"></div>

 </body>

 </html>

以下小提琴应该显示当前的问题： https://jsfiddle.net/g207h68x/

如果您调整结果窗口的大小，您可以看到当报表缩放时（通过缩放：＆＃34;容器＆＃34;渲染功能中的条目，它会粘在屏幕的左侧。

我无法使用<div>的任何特定尺寸，因为每个信息中心都有自己独特的尺寸，具体取决于报告或信息中心中显示的内容（有些可能是300x500，其他可能是1920×1080）。

我试图将<div>包装在灵活盒中，这似乎没有帮助......我没有正确地完成它（完全可能）。

另一种方法是尝试将div嵌套在父div中，但这似乎也不起作用（再次，我可能也没有正确完成）。

我还尝试将<div>作为内联块，但这似乎完全取消了visualize.js的缩放，因为它读取容器尺寸（我认为）。

我查看了visualize.js文档，但页面上的动态大小和间距实际上并不多。

我甚至试图将<div>放在一个表格中......但这似乎并没有帮助，因为表格单元格只会跨越页面或容器。

我确实在某处读过JQuery UI可用于进一步操作visualize.js正在做的事情，但我找不到任何关于文档记录的示例或参考。

如果有人知道如何集中这类内容，我将非常感谢您的意见。

提前谢谢。

Answer 1

中心在jsfiddle中不起作用，因为报告在容器内缩放，其transform-origin设置在左上角。为了克服大多数问题，我根据您发布的脚本提出了以下脚本。

主要想法是使用beforeRender事件向“.jrTable”表添加一些边距，然后从transform-origin中截取CSS visualize.js并设置新的transform-origin。

请注意，这不是一个完整的脚本，并不适用于某些狭窄的窗口设置。我也没有在仪表板上运行它。您必须根据某些测量结果决定何时设置此新原点。此外，如果您打算针对其他浏览器，jQuery的cssHook可能需要针对不同的供应商前缀进行调整。我只在Chrome和Safari中使用默认测试版进行了测试。有关jQuery cssHooks的更多信息。

编辑：似乎基于更改边距和transform-origin的初始解决方案会产生不可预测的结果，并且在所有情况下都无法正确缩放。但是，请将其作为参考here。

只需在应用window.addEvent('load', function() { var hookRegistered = new $.Deferred(); var $container = $("#container"); function adjustPageOffset($jrPage) { var pageWidth = $jrPage[0].getBoundingClientRect().width, containerWidth = $container.width(); (pageWidth<containerWidth) ? $jrPage.offset({left:(containerWidth-pageWidth)/2}) : $jrPage.offset({left:0}); } __visualize__.require(["jquery"], function($) { $.cssHooks["transformOrigin"] = { set: function( elem, value ) { elem.style["transformOrigin"] = value; if ($(elem).is(".jrPage") && "top left" === value) { adjustPageOffset($(elem)); } } }; hookRegistered.resolve(); }); // wait for the hook to register in visualize's embedded jQuery // then load the report hookRegistered.then(function() { visualize({ auth: { name: "joeuser", password: "joeuser", organization: "organization_1" } }, function (v) { //render dashboard from provided resource v("#container").report({ resource: "/public/Samples/Reports/06g.ProfitDetailReport", scale: "container", error: handleError }); //show error function handleError(err) { alert(err.message); } }); }); });后调整偏移量即可获得更好的结果：

import {Container} from 'aurelia-framework';
import {DialogService} from 'aurelia-dialog';
import {LookupFieldsDialog} from './dialog/lookup-fields-dialog';

@inject(DialogService, Container)
export class LookupFieldsQuestion {

  constructor(dialogService, container) {
    this.container = container;
    this.dialogService = dialogService;
  }

  submit() {
    this.dialogService.open({
      viewModel: LookupFieldsDialog,
      model: this.question,

      // Share current container here
      childContainer: this.container.createChild(),

      lock: false
    });
  }

修改后的jsfiddle。

中心visualize.js div内容页面

1 个答案: