javascript - Chart jS 使用 javascript 在 Chrome 构建中打印图表
问题描述
我有以下代码
function PrintImage(id) {
var canvas = document.getElementById(id);
var win = window.open();
win.document.write("<br><img src='" + canvas.toDataURL() + "'/>");
win.print();
win.location.reload();
}
我正在尝试打印通过 Chart JS 呈现的图表。它可以在 IE 中运行,但不能在 chrome 中运行。有人可以看看代码并告诉我我可能做错了什么。在 chrome 中,打印窗口打开,但它只是全白。
谢谢
解决方案
下面的代码片段在 JSFiddle 上运行。请记住为 chrome 启用弹出窗口,如果您希望弹出窗口不被 chrome 阻止,请查看此问题。
function PrintImage() {
id = 'chart';
var canvas = document.getElementById(id);
var win = window.open(canvas.toDataURL(), '_blank');
win.document.write("<br><img src='" + canvas.toDataURL() + "'/>");
win.print();
win.location.reload();
}
function drawImage(){
var ctx = $("canvas")[0].getContext("2d"),
img = new Image();
img.onload = function(){
ctx.drawImage(img, 0, 0, 500, 500);
$("span").text("Loaded.");
};
img.src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ7udaoWuG0i57WCc7OyxkWG0jCkqMIBa7D7ff2Dk1Fk7rCsoQr";
img.crossOrigin ="anonymous";
$("span").text("Loading...");
}
$("#add").click(drawImage);
$("#print").click(PrintImage);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Canvas Replace</title>
</head>
<body>
<button id="add">Add Image</button><span></span>
<button id= "print">Print Image</button>
<canvas width="500" height="500" id='chart'></canvas>
</body>
</html>
推荐阅读
- groovy - Groovy 没有在 Jenkinsfile 中输入 If 条件
- javascript - Fontawesome Icon SVG 未在 Firefox 中显示 Heremap Marker
- linux - 执行 sed 命令时执行错误
- c# - C#用问号替换特殊字符
- java - 从 Firebase 获取数据的 Android 片段未显示
- python - 浮点输入/Python
- apache-spark - Spark Window 函数在排序时具有滑动窗口行为
- ms-access - 如何创建受信任的 ACCDE 访问文件?
- node.js - 下载并解压缩文件而不是检查内容,异步等待问题,node.js
- r - 按因子变量分组后嵌套小标题会在 R 中产生 NULL 元素