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

Question

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

不久前有一个类似的问题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>

Answer 1

使用纯 CSS 样式是不可能解决这个问题的。 我建议克隆元素以多次打印（在这种情况下），将副本一个接一个地放置，并使用 CSS 使它们“仅打印”。此外，canvas 不能只是克隆 - 它需要为每个副本重新绘制。

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

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

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

page-break-before: always;

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

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"));
});

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;
  }
}

<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 2

我刚刚使用 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>

所以我认为现在两种浏览器都支持它是安全的。

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

Answer 3

试试这个！

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();
    });

@page Section1 {
    size:8.27in 11.69in; 
    margin:0; 
    mso-header-margin:0; 
    mso-footer-margin:0; 
    mso-paper-source:0;
}

  <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>

Answer 4

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

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

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

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

由于 iframe 跨域限制，下面的代码 sn-p 在这里不起作用，但它在 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>

Answer 5

@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>