Question

我使用以下内容从我的笔记本电脑上在我的画布上打印效果很好（kudos user700284）但是当我尝试在平板电脑或手机上使用这些功能时，它无法正常工作。当我单击按钮时，会立即打开和关闭一个新选项卡（这是在移动设备/平板电脑上）。如何在所有介质上启用打印？

function printCanvas() {
    var dataUrl = document.getElementById('c').toDataURL(); //attempt to save base64 string to server using this var  
    var windowContent = '<!DOCTYPE html>';
    windowContent += '<html>'
    windowContent += '<head><title>Print canvas</title></head>';
    windowContent += '<body>'
    windowContent += '<img src="' + dataUrl + '" onload=window.print();window.close();>';
    windowContent += '</body>';
    windowContent += '</html>';
    var printWin = window.open('', '', 'width=340,height=260');
    printWin.document.open();
    printWin.document.write(windowContent);
}

<button onclick="printCanvas()">Print</button>

Answer 1

您可以使用html2canvas和jspdf以pdf格式下载。

<强> 样本

var canvas = new fabric.Canvas('a',{backgroundColor :'powderblue'});
canvas.add(new fabric.Text('FabricJS is Awsome',{
 left:50,
 top:50
}));

function downloadCanvas(){
  canvas.discardActiveObject();
  canvas.renderAll();
  html2canvas(document.getElementById('a'), {
    onrendered: function(canvas) {         
      var imgData = canvas.toDataURL('image/png');         
      var doc = new jsPDF('p', 'mm');
      doc.addImage(imgData, 'PNG', 0, 0);
      doc.save('test.pdf');
    }
  });
}

canvas {
  border: 2px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.debug.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.20/fabric.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<button onclick='downloadCanvas()'>Download</button>
<canvas id="a" width="500" height="250"></canvas>

Answer 2

我可能错了，但是这样做的简单方法是什么：

使用媒体查询创建一个css文件

@media print { 
// hide everything
  * {
    display: none;
  }
// add display block to your canvas only
  #c {
    display: block
  }
}

然后打印当前的应用页面应该只打印画布。

在桌面和移动设备上打印fabricjs canvas？

2 个答案: