Lorsque le contenu d'un div est trop grand, je dois les mettre à l'échelle avant d'imprimer. J'ai suivi les conseils utiles ici et mis en place des feuilles de style d'impression. Quand vient le temps d'imprimer, je trouve que j'ai besoin de changer certains des CSS dans la requête d'impression @media. Au lieu de changer la classe dans la requête média, je trouve qu'un sélecteur CSS normal apporte les modifications à la div à l'écran et non à la requête d'impression. Y a-t-il un sélecteur que je peux utiliser pour apporter les modifications au css @media print seulement? Exemple: Cliquez sur le bouton 'Change Scale' pour zoomer immédiatement sur l'image. Je veux que l'échelle modifiée s'applique uniquement à l'impression.Comment changer le CSS dans une requête d'impression @media?
var canvas = document.getElementById("canvas1");
function draw_a() {
var context = canvas.getContext("2d");
// // LEVER
//plane
context.fillStyle = '#aaa';
context.fillRect (25, 90, 2500, 400);
}
function changeScale() {
var scale = .1;
console.log("scale:" + scale);
$('.myDivToPrint').css({
'-webkit-transform': 'scale(' + scale + ')',
'-moz-transform': 'scale(' + scale + ')',
'-ms-transform': 'scale(' + scale + ')',
'-o-transform': 'scale(' + scale + ')',
'transform': 'scale(' + scale + ')',
});
}
$(document).ready(function(){
draw_a();
});div.sizePage {
color: #333;
}
canvas {
border: 1px dotted;
}
.printOnly {
display: none;
}
@media print {
html,
body {
height: 100%;
background-color: yellow;
}
.myDivToPrint {
background-color: yellow;
top: 0;
left: 0;
margin: 0;
}
.no-print,
.no-print * {
display: none !important;
}
.printOnly {
display: block;
}
}
@media print and (-ms-high-contrast: active) and (-ms-high-contrast: none) {
html,
body {
height: 100%;
background-color: pink;
}
.myDivToPrint {
background-color: yellow;
/*
-moz-transform: rotate(90deg) scale(0.3);
-ms-transform: rotate(90deg) scale(0.3);
-o-transform: rotate(90deg) scale(0.3);
-webkit-transform: rotate(90deg) scale(0.3);
transform: rotate(90deg) scale(0.3); /* Standard Property */
position: fixed;
top: 0;
left: 0;
margin: 0;
padding: 15px;
font-size: 14px;
line-height: 18px;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
/*
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
*/
}
.no-print,
.no-print * {
display: none !important;
}
.printOnly {
display: block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="window.print();" class="no-print">Print Canvas</button>
<button onclick="changeScale();" class="no-print>">Change Scale</button>
<div class="myDivToPrint">
<canvas height="2500px" width="4000px" id="canvas1"></canvas>
</div>Merci, Matt
Je ne suis pas sûr de comprendre. Les sélecteurs dans la requête '@media print' s'appliquent déjà à l'impression uniquement. On dirait que vous faites déjà ce dont vous avez besoin. Pourriez-vous clarifier s'il vous plaît? – jfeferman
Dans l'extrait de code lorsque vous cliquez sur le bouton "Modifier l'échelle", vous pouvez voir que l'image sur l'écran change réellement d'échelle. Cela m'indique que le navigateur a créé une autre classe (peut-être un élément) et l'a appliqué à la div sur l'écran. La classe réelle dans la requête média est intacte. Je vais essayer de mettre à jour la question. –