Center visualize.js div content on page

我一直在试图获得一份报告，我们已经使用jasperreports构建了一个报告，并通过visualize.js呈现为在页面上水平居中（无论页面或浏览器的维度如何）。Center visualize.js div content on page

我当前的代码是：

<!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/

如果调整结果窗口中，可以看到，随着报告的比例（通过缩放比例：“容器”条目在渲染功能中粘贴在屏幕左侧

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

我试图将<div>包装在柔性盒内部，这似乎没有帮助..除非我没有正确地做（完全可能）。

另一种方法是试图在父div中嵌套div，但那似乎不起作用（再一次，我可能还没有正确地完成它）。

我也尝试使<div>成为一个内联块，但这看起来完全放弃了visualize.js的缩放，因为它读取容器维度（我认为）。

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

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

我的确在某处读过JQuery UI可以用来进一步操纵visualize.js正在做什么，但是我找不到任何有关记录位置的示例或引用。

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

预先感谢您。

来源

2017-05-01 Buckwheattb

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

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

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

编辑：似乎最初的解决方案基于改变边距和transform-origin产生不可预知的结果，并且在所有情况下都不能正确缩放。不过，请将它保留作为参考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) { \t \t \t \t 
 
      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-02 13:37:06 Narcis

感谢Narcis ...有没有一种方法可以修改它使其更具响应性？如果你调整结果窗格的大小，你可以看到内容并没有真正保持居中......它有点糟透了...... – Buckwheattb

我已经用修改过的解决方案编辑了我的答案。希望能帮助到你！ – Narcis

这真是太棒了......正是我所需要的。我也在IE和Edge中测试了它...从我所见过的很好的工作。非常感谢！ – Buckwheattb

Center visualize.js div content on page

回答

相关问题