页面居中 visualize.js div 内容
Center visualize.js div content on page
我一直在尝试让我们使用 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 正在做的事情,但我找不到任何关于其记录位置的示例或参考.
如果有人知道如何将此类内容居中,我将不胜感激。
提前致谢。
居中在您的 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.
我一直在尝试让我们使用 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 正在做的事情,但我找不到任何关于其记录位置的示例或参考.
如果有人知道如何将此类内容居中,我将不胜感激。
提前致谢。
居中在您的 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.