Question

如何使用我的图表宽度为ngPrint

        <div id="printThisElement" ng-controller="AppController">

          <canvas tc-chartjs-line chart-options="options" chart-data="data" auto-legend ng-click="chartClick($event)" chart="chart"></canvas>

          <button class="btn btn-primary" ng-print print-element-id="printThisElement">
               <i class="fa fa-print"></i> Print
          </button>
       </div>

你能看到我解释它的例子吗？ http://jsfiddle.net/0ow8rpuv/

一些建议？

Answer 1

最明显的解决方案是：

为包含数据图表的画布对象分配ID
通过JS（或jQuery），按ID恢复对象并通过getContext访问2d上下文（＆＃39; 2d＆＃39;）
调用context.toDataUrl提供函数所需的信息（您可以查找文档）
保存生成的图片网址，并将其分配给另一个html对象，该对象充当该特定图片的容器。
使该对象可打印，并且可以打印它

至少可以说，有些人可能认为这个解决方案很乏味。我希望有更多知名人士可以提出更优雅的东西。

代码相关（普通JS）：

let canvas = document.getElementById('your-canvas'); // Grab canvas from DOM
let ctx = canvas.getContext('2d'); // Grab 2D context from canvas
let image = ctx.toDataUrl(); // You can look-up some decorations for this
let newImage = document.createElement('img'); // Create a new image element
newImage.src = image;
// You can customize the size and the styles of the image to print here
document.appendChild(newImage); // Append the new image to the DOM to print it later. Through CSS styles, you can also force the browser to print only that specific image. As usual, read the docs

使用ngPrint和tc-chartjs打印图表

1 个答案: