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

Question

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

一段时间后,有一个类似的问题,声称浏览器不会打印到多个页面宽度.

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

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>

Answer 1

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

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

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

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

由于 iframe 跨域限制，下面的代码片段在这里不起作用，但它可以在这个 jsfiddle上工作。

500px打印时，按比例缩放的500px代表画布的图像适合一页。

"<img src='" + canvas.toDataURL() + "' height='500px' width='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;
  }
}