如何在浏览器中跨多个页面宽度打印大画布？

时间：2017-09-01 20:08:35

标签： html css canvas browser

我的应用程序需要打印出可以跨越多个页面宽度和高度宽度的任意大画布。

一段时间后有一个类似的问题where it was claimed the browser won't print to multiple page widths。

由于这是一段时间，我想知道它是否仍然是真的。另外，有哪些策略可用于打印出大型画布而不将其拆分？

var canvas = document.getElementById("canvas1");

function draw_a() {
  var context = canvas.getContext("2d");
  //   //  LEVER

  //plane
  context.fillStyle = '#aaa';
  context.fillRect(25, 90, 2500, 400);


}

$(document).ready(function() {
  draw_a();

});
canvas {
  border: 1px dotted;
}

.printOnly {
  display: none;
}

@media print {
  html,
  body {
    height: 100%;
    background-color: yellow;
  }
  .myDivToPrint {
    background-color: yellow;
    /*
        height: 100%;
    
        width: 100%;
        position: fixed;*/
    top: 0;
    left: 0;
    margin: 0;
  }
  .no-print,
  .no-print * {
    display: none !important;
  }
  .printOnly {
    display: block;
  }
}

@media print and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
  html,
  body {
    height: 100%;
    background-color: yellow;
  }
  .myDivToPrint {
    background-color: yellow;
    /*
        height: 100%;
    
        width: 100%;
        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>
<div class="myDivToPrint">
  <div class="Aligner-item">
    <canvas height="2500px" width="4000px" id="canvas1"></canvas>
    <div class="printOnly Aligner-item--bottom"> Print Only</div>
  </div>

</div>

5 个答案:

答案 0 :(得分：3)

@media print {  
  @page {
    size: 297mm 210mm; /* landscape */
    /* you can also specify margins here: */
    margin: 25mm;
    margin-right: 45mm; /* for compatibility with both A4 and Letter */
  }
}


var canvas = document.getElementById("canvas1");
function draw_a() {
  var context = canvas.getContext("2d");
  //   //  LEVER
  //plane
  context.fillStyle = '#aaa';
  context.fillRect(25, 90, 2500, 400);
}
$(document).ready(function() {
  draw_a();
});
canvas {
  border: 1px dotted;
}
.printOnly {
  display: none;
}
@media print {
 @page {
    size: 297mm 210mm; /* landscape */
    /* you can also specify margins here: */
    margin: 25mm;
    margin-right: 45mm; /* for compatibility with both A4 and Letter */
  }
  html,
  body {
    height: 100%;
    background-color: yellow;
  }
  .myDivToPrint {
    background-color: yellow;
    /*
        height: 100%;
    
        width: 100%;
        position: fixed;*/
    top: 0;
    left: 0;
    margin: 0;
  }
  .no-print,
  .no-print * {
    display: none !important;
  }
  .printOnly {
    display: block;
  }
}

@media print and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
  html,
  body {
    height: 100%;
    background-color: yellow;
  }
  .myDivToPrint {
    background-color: yellow;
    /*
        height: 100%;
    
        width: 100%;
        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>
<div class="myDivToPrint">
  <div class="Aligner-item">
    <canvas height="2500px" width="4000px" id="canvas1"></canvas>
  <div class="printOnly Aligner-item--bottom"> Print Only</div>
  </div>
</div>

答案 1 :(得分：2)

似乎浏览器会将大画布分成多个页面。我使用最新的chrome和safari浏览器在MacOS Sierra上进行了测试。

打印画布的一种可能方法是首先使用canvas.toDataURL()将其转换为包含图像表示的data URI。然后，您可以在打印前操纵图像尺寸。

"<img src='" + canvas.toDataURL() + "' height='500px' width='500px' />'"

在以下示例中，4500px 4500px之后的大canvas被翻译为img并放置在iframe内，用于打印。您可以将图像附加到原始文档而不是打印该特定元素，但iframe可以更灵活地处理打印输出。您可以根据需要操纵img尺寸并打印画布的缩放表示。请注意，我对图像的width和height进行了硬编码，但可以根据需要进行计算和更改。

由于iframe跨域限制，下面的代码段在此处不起作用，但它适用于this jsfiddle。

表示画布的缩放500px到500px图像在打印时适合一页。

var canvas = document.getElementById("canvas1");

function draw_a() {
  var context = canvas.getContext("2d");
  //   //  LEVER

  //plane
  context.fillStyle = '#aaa';
  context.fillRect(25, 90, 4500, 4500);
}

print = function() {
	window.frames["myFrame"].focus();
	window.frames["myFrame"].print();
}

function setupPrintFrame() {
	$('<iframe id="myFrame" name="myFrame">').appendTo("body").ready(function(){
    setTimeout(function(){
        $('#myFrame').contents().find('body').append("<img src='" + canvas.toDataURL() + "' height='500px' width='500px' />'");
    },50);
	});
}

$(document).ready(function() {
  draw_a();
	setupPrintFrame();
});
canvas {
  border: 1px dotted;
}

.printOnly, #myFrame {
  display: none;
}

@media print {
  html,
  body {
    height: 100%;
    background-color: yellow;
  }
  .myDivToPrint {
    background-color: yellow;
    /*
        height: 100%;
    
        width: 100%;
        position: fixed;*/
    top: 0;
    left: 0;
    margin: 0;
  }
  .no-print,
  .no-print * {
    display: none !important;
  }
  .printOnly {
    display: block;
  }
}

@media print and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
  html,
  body {
    height: 100%;
    background-color: yellow;
  }
  .myDivToPrint {
    background-color: yellow;
    /*
        height: 100%;
    
        width: 100%;
        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="print()" class="no-print">Print Canvas</button>
<div class="myDivToPrint">
  <div class="Aligner-item">
    <canvas height="4500px" width="4500px" id="canvas1"></canvas>
    <div class="printOnly Aligner-item--bottom"> Print Only</div>
  </div>

</div>

答案 2 :(得分：1)

我刚刚使用localhost环境在Firefox和Chrome浏览器中测试了这个小提琴，它在两者中都有效。这是original js fiddle

这是我测试的html 

var canvas = document.getElementById("canvas1");

function draw_a() {
  var context = canvas.getContext("2d");
  //   //  LEVER

  //plane
  context.fillStyle = '#aaa';
  context.fillRect(25, 90, 2500, 400);


}

$(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;
    /*
            height: 100%;
    
            width: 100%;
            position: fixed;*/
    top: 0;
    left: 0;
    margin: 0;
  }
  .no-print,
  .no-print * {
    display: none !important;
  }
  .printOnly {
    display: block;
  }
}

@media print and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
  html,
  body {
    height: 100%;
    background-color: yellow;
  }
  .myDivToPrint {
    background-color: yellow;
    /*
            height: 100%;
    
            width: 100%;
            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>
<div class="myDivToPrint">
  <div class="Aligner-item">
    <canvas height="2500px" width="4000px" id="canvas1"></canvas>
    <div class="printOnly Aligner-item--bottom"> Print Only</div>
  </div>
</div>

所以我认为可以说现在两种浏览器都支持它。

我在两种浏览器上都使用了最新的更新。

答案 3 :(得分：1)

试试这个！

＆＃13;
＆＃13; 
var canvas = document.getElementById("canvas1");
    function draw_a() {
      var context = canvas.getContext("2d");
    	context.fillStyle   = '#aaa';
    	context.fillRect  (25, 90, 2500, 400);
    } 
    
    $(document).ready(function(){
      draw_a();
    });
＆＃13; 
@page Section1 {
    size:8.27in 11.69in; 
    margin:0; 
    mso-header-margin:0; 
    mso-footer-margin:0; 
    mso-paper-source:0;
}
＆＃13; 
  <button onclick="window.print();" class="no-print">Print Canvas</button>
  <div class="myDivToPrint">
    <div class="Aligner-item">
      <canvas height="2500px" width="4000px" id="canvas1" style="border: solid 10px #000;"></canvas>
    </div>
  </div>
＆＃13;
＆＃13;
＆＃13;

答案 4 :(得分：1)

使用纯CSS样式无法处理此问题。 我建议克隆元素多次打印（在这种情况下），将副本放在一起并制作它们＆＃34;仅打印＆＃34;使用CSS。此外，只能克隆画布 - 需要为每个副本重新绘制画布。

份数取决于元素和页面宽度。 默认页面宽度为210mm，可以转换为px（Pixel to Centimeter?）并与元素的宽度进行比较。

当我们有以像素为单位的页面宽度时，我们可以分别为每个副本设置负左边距。有了这个，整个画布将被分成＆＃34;分为列并从上到下打印。

为了从新页面开始打印每个副本，只需使用此CSS规则：

page-break-before: always;

有许多硬编码的东西，但我认为您可以使用它为您的问题构建通用解决方案。

＆＃13;
＆＃13; 
var divide = function(selector, pageWidth) {
  var elementToDivide = document.querySelector(selector);
  var widthPx = elementToDivide.offsetWidth;
  var pageWidthPx = pageWidth * 3.7795;

  for (var i = 1; i <= parseInt(widthPx/pageWidthPx); i++) {
    var clone = elementToDivide.cloneNode(true);
    elementToDivide.parentNode.appendChild(clone);

    draw_a(document.getElementsByTagName("canvas"))
    clone.style.marginLeft = "-" + (pageWidthPx * i) + "px";
    clone.className += " printOnly";
  }
}

var standardPrint = window.print;

window.print = function() {
  if (!window.pagesDivided) {
    divide(".myDivToPrint", 210);
    window.pagesDivided = true;
  }
  standardPrint();
};

function draw(canvas) {
  var context = canvas.getContext("2d");
  var grd = context.createLinearGradient(0, 0, 4000, 2500);
  grd.addColorStop(0, "yellow");
  grd.addColorStop(1, "red");

  context.fillStyle = grd;
  context.fillRect(25, 25, 4000, 2500);
}

function draw_a(elem) {
  if (elem.length != null && elem.length > 1) {
    for (var i = 0; i < elem.length; i++) {
      draw(elem[i]);
    }
  } else {
    draw(elem);
  }
}
$(document).ready(function() {
  draw_a(document.getElementById("canvas1"));
});
＆＃13; 
canvas {
  border: 5px dashed;
}
.printOnly {
  display: none;
}
.myDivToPrint { 
  float: left;
}
@media print {
 @page {
    size: 297mm 210mm;
    margin: 0mm;
    margin-right: 0mm;
  }
  html,
  body {
    height: 100%;
    background-color: yellow;
  }
  .myDivToPrint {
    page-break-before: always;
    background-color: yellow;
    margin: 0;
  }
  .no-print,
  .no-print * {
    display: none !important;
  }
  .printOnly {
    display: block;
    page-break-before: always;
  }
}

@media print and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
  html,
  body {
    height: 100%;
    background-color: yellow;
  }
  .myDivToPrint {
    background-color: yellow;
    top: 0;
    left: 0;
    margin: 0;
    padding: 15px;
    font-size: 14px;
    line-height: 18px;
    align-items: center;
    justify-content: center;
  }
  .no-print,
  .no-print * {
    display: none !important;
  }
  .printOnly {
    display: block;
  }
}
＆＃13; 
<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>
<div class="myDivToPrint">
  <div class="Aligner-item">
    <canvas height="2500px" width="4000px" id="canvas1"></canvas>
  <div class="printOnly Aligner-item--bottom"> Print Only</div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题