1

我一直在尝试获取我们使用 jasperreports 构建并通过可视化.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/

如果您调整结果窗口的大小，您可以看到随着报告的缩放（通过渲染函数中的 scale:"container" 条目，它会粘在屏幕的左侧。

我不能为每个仪表板使用任何特定尺寸，<div>因为每个仪表板都有自己独特的尺寸，具体取决于报表或仪表板中显示的内容（有些可能是 300x500，其他可能高达 1920x1080）。

我试图包装<div>似乎没有帮助的内部弹性框..除非我没有正确地做到这一点（完全有可能）。

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

我也尝试制作<div>一个内联块，但这似乎完全放弃了可视化.js的缩放，因为它读取容器尺寸（我认为）。

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

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

我确实在某处读到过 JQuery UI 可用于进一步操作 Visualize.js 正在做什么，但我找不到任何示例或参考资料说明记录的位置。

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

先感谢您。

4

1 回答 1

2

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

主要思想是为带有事件的“.jrTable”表添加一些边距，然后从内部beforeRender截取CSS并设置新的。transform-originvisualize.js

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

编辑：似乎基于更改边距的初始解决方案transform-origin会产生不可预测的结果，并且在所有情况下都不能正确缩放。不过，保留它以供参考。

只需在应用后调整偏移量即可获得更好的结果transform-origin：

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);
      }

    });
  });
});

和修改后的jsfiddle。

于 2017-05-02T13:37:06.443 回答