blocks|key|4054329|text|此函数用于正确打印画布的内容|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4054330|function+PrintImage()+{
++++var+canvas+=+document.getElementById("bidStatus");
++++var+win+=+window.open();
++++win.document.write("<br><img+src='"+%2B+canvas.toDataURL()+%2B+"'/>");
++++win.print();
++++win.location.reload();

}|code-block|syntax|javascript|4054331|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This function prints the contents of a Canvas correctly</p>

<pre><code>function PrintImage() {
    var canvas = document.getElementById("bidStatus");
    var win = window.open();
    win.document.write("&lt;br&gt;&lt;img src='" + canvas.toDataURL() + "'/&gt;");
    win.print();
    win.location.reload();

}
</code></pre>


blocks|key|4054714|text|我可以使用下面的代码从Chrome的chart.js中使用jsPDF打印画布。这个问题已经有了公认的答案，但正如其他人在评论中指出的那样，我无法让这个解决方案在Chrome上运行。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4054715|这里有一个jsPDF+documentation的链接。我仍然在探索这一点，所以你可能会找到更有用的工具来完成同样的任务。由于图表的透明背景，我不得不使用PNG而不是JPEG。JPEG将仅显示为黑色。如果需要彩色背景，请在添加图像之前添加一个与图表图像大小和位置相同的彩色矩形(文档中的rect方法)。其他文本和功能也可以添加到您正在构建的pdf中。|offset|length|4054716|我不喜欢图表图像必须添加到特定的位置和大小，如果我找到更好的方法，我会更新这篇文章。|4054717|编辑:如果你想要一个jsPDF，你可以用pdf.save('Filename.pdf')代替FileSaver.js。|4054718|HTML|4054719|<button+id="print-chart-btn">Print+Chart</button>
<div+class="canvas-container">
++++<canvas+id="random-chart"+></canvas>
</div>

<script+src="https://cdn.jsdelivr.net/npm/jspdf@1.5.3/dist/jspdf.min.js"></script>
<script+src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.min.js"></script>
<script+src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>|code-block|syntax|javascript|4054720|JAVASCRIPT|4054721|$('#print-chart-btn').on('click',+function()+{
++++var+canvas+=+document.querySelector("#random-chart");
++++var+canvas_img+=+canvas.toDataURL("image/png",1.0);+//JPEG+will+not+match+background+color
++++var+pdf+=+new+jsPDF('landscape','in',+'letter');+//orientation,+units,+page+size
++++pdf.addImage(canvas_img,+'png',+.5,+1.75,+10,+5);+//image,+type,+padding+left,+padding+top,+width,+height
++++pdf.autoPrint();+//print+window+automatically+opened+with+pdf
++++var+blob+=+pdf.output("bloburl");
++++window.open(blob);
});|4054722|entityMap|0|LINK|mutability|MUTABLE|url|https://rawgit.com/MrRio/jsPDF/master/docs/jsPDF.html^0|0|5|J|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|13|8|@]|9|@$D|14|E|15|1|16]]|A|$]]|$1|F|3|G|5|6|7|17|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|18|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|19|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|1A|8|@]|9|@]|A|$O|P]]|$1|Q|3|R|5|6|7|1B|8|@]|9|@]|A|$]]|$1|S|3|T|5|N|7|1C|8|@]|9|@]|A|$O|P]]|$1|U|3|-4|5|6|7|1D|8|@]|9|@]|A|$]]]|V|$W|$5|X|Y|Z|A|$10|11]]]]

<p>I was able to use jsPDF to print a canvas from chart.js with Chrome using the code below. There is already an accepted answer to this question, but as someone else pointed out in the comments, I could not get that solution to work with Chrome.</p>

<p>Here is a link to <a href="https://rawgit.com/MrRio/jsPDF/master/docs/jsPDF.html" rel="nofollow noreferrer">jsPDF documentation</a>. I am still exploring this so you may find more useful tools to accomplish the same task. I had to use a PNG instead of a JPEG because of the transparent background of the chart. The JPEG would only appear black. If you want a colored background, add a colored rectangle(rect method in docs) that is the same size and position of the chart image before adding the image. Other text and features can also be added to the pdf you are building. </p>

<p>I do not like that the chart image has to be added at a specific location and size and will update this post if I find a better way of doing this.</p>

<p>EDIT: With jsPDF you can use pdf.save('Filename.pdf') to replace FileSaver.js, provided you want a pdf.</p>

<p>HTML</p>

<pre><code>&lt;button id="print-chart-btn"&gt;Print Chart&lt;/button&gt;
&lt;div class="canvas-container"&gt;
    &lt;canvas id="random-chart" &gt;&lt;/canvas&gt;
&lt;/div&gt;

&lt;script src="https://cdn.jsdelivr.net/npm/jspdf@1.5.3/dist/jspdf.min.js"&gt;&lt;/script&gt;
&lt;script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.min.js"&gt;&lt;/script&gt;
&lt;script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"&gt;&lt;/script&gt;
</code></pre>

<p>JAVASCRIPT</p>

<pre><code>$('#print-chart-btn').on('click', function() {
    var canvas = document.querySelector("#random-chart");
    var canvas_img = canvas.toDataURL("image/png",1.0); //JPEG will not match background color
    var pdf = new jsPDF('landscape','in', 'letter'); //orientation, units, page size
    pdf.addImage(canvas_img, 'png', .5, 1.75, 10, 5); //image, type, padding left, padding top, width, height
    pdf.autoPrint(); //print window automatically opened with pdf
    var blob = pdf.output("bloburl");
    window.open(blob);
});
</code></pre>


<p>I am using Chart JS library to create charts <a href="https://www.chartjs.org/" rel="nofollow noreferrer">https://www.chartjs.org/</a></p>

<p>Say I have the below code </p>

<pre><code> &lt;div class="card-body "&gt;
        &lt;canvas id="bidStatus"&gt;&lt;/canvas&gt;
  &lt;/div&gt;
</code></pre>

<p>Using the FileSaver.js I am able to save the chart using the below code</p>

<pre><code>function DownloadImage() {
    $("#bidStatus").get(0).toBlob(function (blob) {
        saveAs(blob, "BidStatus.png");
    });
}
</code></pre>

<p>But I am not sure how I can print the chart. Don't see any native API call to do that. Can some one please tell me how I can achieve this.</p>

<p>I tried using jquery print libraries which are mentioned in the Print an HTMl element example but they don't seem to load the chart generated using Chart js. I get a blank page for printing.</p>

<p>Thanks</p>


Print chart using chart js

我正在使用Chart JS库来创建图表假设我有以下代码 <div class="card-body ">        <canvas id="bidStatus"></canvas>  </div>通过使用FileSaver.js，我可以使用以下代码保存图表function DownloadImage() {    ...

问使用chart js打印图表
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用chart js打印图表EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用chart js打印图表
EN