vue chart js未在打印预览中显示
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue chart js未在打印预览中显示相关的知识，希望对你有一定的参考价值。
嗨我在我的项目中使用vue chartjs link of npm package。
图表工作正常，但当我试图打印一个div，其中使用以下代码实现多个图表
let divContents = $("#exportDiv").html();
let printWindow = window.open('', '', 'height=400,width=800');
printWindow.document.write('<html><head><title>Report</title>');
printWindow.document.write('<link rel="stylesheet" href="css/style.css" type="text/css" />');
printWindow.document.write('<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" />');
printWindow.document.write('</head><body >');
printWindow.document.write(divContents);
printWindow.document.write('</body></html>');
printWindow.document.close();
setTimeout(function(){printWindow.print();},1000);
在预览窗口中，我没有看到图表。
注意：图表不显示只有当我按下按钮点击打印时，如果我按ctrl + p图表显示。但我只想打印一个特定的div，所以我不能使用ctrl + p。
我究竟做错了什么？
我在宣布它
<vue-chart type="doughnut" :height="100" :options="optionsInvestorResearch" :data="chartInvestorResearch"></vue-chart>
我的选择是
chartInvestorResearch：{}，optionsInvestorResearch：{
title: {
display: false,
fontsize: 14,
text: 'Total de Pedidos por Situação'
},
legend: {
display: true,
position: 'right',
},
},
更新：我包括我的图表声明和选项。
答案
let divContents = $("#exportDiv").html();
这是你的问题。 Chart.js使用html5画布作为其图表。所以你的divContents只包含一个没有任何内容的canvas标签。
试试.toDataURL()
另一答案
我通过在动画完成时首先将图表转换为图像然后我在图像标签中显示图像来实现它...它出现在打印预览屏幕上...
首先我创建了一个div
<div class="col-sm-6">
<img id="url" />
</div>
然后我创建了一个函数
function done(){
var url=chart.toBase64Image();
document.getElementById("url").src=url;
}
然后在我的图表选项中
animation: {
onComplete: done
},
它创建了一个图表的图像并将其放在所需的div中，在我的情况下“url”然后使用css我制作包含图表隐藏的div和包含图表图像显示的div。
以上是关于vue chart js未在打印预览中显示的主要内容，如果未能解决你的问题，请参考以下文章