页面居中 visualize.js div 内容

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>

下面的 fiddle 应该显示当前的问题： https://jsfiddle.net/g207h68x/

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

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

我曾尝试将 <div> 包裹在 flexboxes 中，但这似乎没有帮助..除非我没有正确地做到这一点（完全有可能）。

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

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

我查看了 visualize.js 文档，但页面上关于动态大小和间距的内容确实不多。

我什至尝试将 <div> 放在 table 中...但这似乎没有帮助，因为 table 单元格只会跨越页面或容器.

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

如果有人知道如何将此类内容居中，我将不胜感激。

提前致谢。

Answer 1

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

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

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

的更多信息

EDIT：似乎基于更改边距和 transform-origin 的初始解决方案会产生不可预测的 table 结果并且无法正确缩放个案。不过留作参考here

在应用 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.

页面居中 visualize.js div 内容

Center visualize.js div content on page

javascript

css

jquery

jasper-reports

visualize