我需要打印一个元素，为此，我正在使用素数<p:printer>
在carDetail panelGrid中，我有一个可缩放的图像，当我单击打印命令链接时，该缩放的图像不会在打印预览中呈现。
zoom JS：
function updateBgStyle() {
if (bgPosX > 0) {
bgPosX = 0;
} else if (bgPosX < width - bgWidth) {
bgPosX = width - bgWidth;
}
if (bgPosY > 0) {
bgPosY = 0;
} else if (bgPosY < height - bgHeight) {
bgPosY = height - bgHeight;
}
img.style.backgroundSize = bgWidth+'px '+bgHeight+'px';
img.style.backgroundPosition = bgPosX+'px '+bgPosY+'px';
x = document.getElementById('myimage');
img2 = document.createElement("IMG");
img2.src = '../../RESOURCES/images/remoteAgent/473_180420160608_HJF4013_2.jpg';
document.getElementById('myresult').style.backgroundSize = img.style.backgroundSize;
document.getElementById('myresult').style.backgroundPosition = img.style.backgroundPosition;
document.getElementById('myresult').style.backgroundImage = "url('" + img2.src + "')";
}
function onwheel(e) {
var deltaY = 0;
e.preventDefault();
if (e.deltaY) {
deltaY = e.deltaY;
} else if (e.wheelDelta) {
deltaY = -e.wheelDelta;
}
var rect = img.getBoundingClientRect();
var offsetX = e.pageX - rect.left - window.pageXOffset;
var offsetY = e.pageY - rect.top - window.pageYOffset;
var bgCursorX = offsetX - bgPosX;
var bgCursorY = offsetY - bgPosY;
var bgRatioX = bgCursorX/bgWidth;
var bgRatioY = bgCursorY/bgHeight;
if (deltaY < 0) {
bgWidth += bgWidth*settings.zoom;
bgHeight += bgHeight*settings.zoom;
} else {
bgWidth -= bgWidth*settings.zoom;
bgHeight -= bgHeight*settings.zoom;
}
if (settings.maxZoom) {
bgWidth = Math.min(width*settings.maxZoom, bgWidth);
bgHeight = Math.min(height*settings.maxZoom, bgHeight);
}
bgPosX = offsetX - (bgWidth * bgRatioX);
bgPosY = offsetY - (bgHeight * bgRatioY);
if (bgWidth <= width || bgHeight <= height) {
reset();
} else {
updateBgStyle();
}
}
xhtml：
<p:panelGrid id="images" columns="1" style="border: 2px solid white;float: right;
border: 2px solid white;">
<script>
wheelzoom(document.querySelector('img.zoom'));
</script>
<img class="zoom" id="myimage" src="../../RESOURCES/images/remoteAgent/473_180420160608_HJF4013_2.jpg"
style=" width: 340px; margin-top: 20px;"/>
<div id="myresult" style="width: 340px;height: 200px; align: center; border: 1px solid black;"></div>
</p:panelGrid>
<p:commandLink style="margin: 2%; width: 15px; height: 15px;">
<h:graphicImage url="/RESOURCES/images/remoteAgent/bolaVerde.png" style="margin: 2%; width: 15px; height: 15px;"/>
<p:printer target=":form:carDetail"/>
</p:commandLink>
缩放/非缩放图像未出现在打印预览中，但我更新了结果img 每次车轮事件发生
测试页：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:c="http://java.sun.com/jsp/jstl/core"
template="/RESOURCES/template/layoutPrincipal.xhtml">
<ui:define name="head">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<style>
.parrent_ggn{
overflow: hidden;
width: 200px ;
height: 200px;
}
.parrent_ggn img{
width: 100%;
}
</style>
</ui:define>
<ui:define name="cont_principal">
<div class="parrent_ggn" id="parrent_ggn1">
<div>
<img src="https://www.w3schools.com/jsref/img_pulpit.jpg"/>
</div>
</div>
<script>
function ScrollZoom(container,max_scale,factor){
var target = container.children().first()
var size = {w:target.width(),h:target.height()}
var pos = {x:0,y:0}
var zoom_target = {x:0,y:0}
var zoom_point = {x:0,y:0}
var scale = 1
target.css('transform-origin','0 0')
target.on("mousewheel DOMMouseScroll",scrolled)
function scrolled(e){
var offset = container.offset()
zoom_point.x = e.pageX - offset.left
zoom_point.y = e.pageY - offset.top
e.preventDefault();
var delta = e.delta || e.originalEvent.wheelDelta;
if (delta === undefined) {
//we are on firefox
delta = e.originalEvent.detail;
}
delta = Math.max(-1,Math.min(1,delta)) // cap the delta to [-1,1] for cross browser consistency
// determine the point on where the slide is zoomed in
zoom_target.x = (zoom_point.x - pos.x)/scale
zoom_target.y = (zoom_point.y - pos.y)/scale
// apply zoom
scale += delta*factor * scale
scale = Math.max(1,Math.min(max_scale,scale))
// calculate x and y based on zoom
pos.x = -zoom_target.x * scale + zoom_point.x
pos.y = -zoom_target.y * scale + zoom_point.y
// Make sure the slide stays in its container area when zooming out
if(pos.x>0)
pos.x = 0
if(pos.x+size.w*scale<size.w)
pos.x = -size.w*(scale-1)
if(pos.y>0)
pos.y = 0
if(pos.y+size.h*scale<size.h)
pos.y = -size.h*(scale-1)
update()
}
function update(){
target.css('transform','translate('+(pos.x)+'px,'+(pos.y)+'px) scale('+scale+','+scale+')')
}
}
var scroll_zoom = new ScrollZoom($('#parrent_ggn1'),4,0.5);
</script>
</ui:define>
</ui:composition>
答案 0 :(得分：2)
默认情况下，页面为browser will ignore background css rules when printing，您无法使用CSS克服这一问题。
用户将需要更改其浏览器设置。mor
To keep自己依靠，put images直接在HTML中使用实际的<img /> tag。
您可以设置父级overflow：隐藏；并设置图像变换，然后增加比例图像元素以实现可缩放。这应该可以在打印中使用。
function ScrollZoom(container,max_scale,factor){
var target = container.children().first()
var size = {w:target.width(),h:target.height()}
var pos = {x:0,y:0}
var zoom_target = {x:0,y:0}
var zoom_point = {x:0,y:0}
var scale = 1
target.css('transform-origin','0 0')
target.on("mousewheel DOMMouseScroll",scrolled)
function scrolled(e){
var offset = container.offset()
zoom_point.x = e.pageX - offset.left
zoom_point.y = e.pageY - offset.top
e.preventDefault();
var delta = e.delta || e.originalEvent.wheelDelta;
if (delta === undefined) {
//we are on firefox
delta = e.originalEvent.detail;
}
delta = Math.max(-1,Math.min(1,delta)) // cap the delta to [-1,1] for cross browser consistency
// determine the point on where the slide is zoomed in
zoom_target.x = (zoom_point.x - pos.x)/scale
zoom_target.y = (zoom_point.y - pos.y)/scale
// apply zoom
scale += delta*factor * scale
scale = Math.max(1,Math.min(max_scale,scale))
// calculate x and y based on zoom
pos.x = -zoom_target.x * scale + zoom_point.x
pos.y = -zoom_target.y * scale + zoom_point.y
// Make sure the slide stays in its container area when zooming out
if(pos.x>0)
pos.x = 0
if(pos.x+size.w*scale<size.w)
pos.x = -size.w*(scale-1)
if(pos.y>0)
pos.y = 0
if(pos.y+size.h*scale<size.h)
pos.y = -size.h*(scale-1)
update()
}
function update(){
target.css('transform','translate('+(pos.x)+'px,'+(pos.y)+'px) scale('+scale+','+scale+')')
}
}
var scroll_zoom = new ScrollZoom($('#parrent_ggn1'),4,0.5);.parrent_ggn{
overflow: hidden;
width: 200px ;
height: 200px;
}
.parrent_ggn img{
width: 100%;
}<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div class="parrent_ggn" id="parrent_ggn1">
<div>
<img src="https://www.w3schools.com/jsref/img_pulpit.jpg">
</div>
</div>