Question

您好我在我的项目中使用了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>

我的optinons

chartInvestorResearch：{}， optionsInvestorResearch：{

title: {
        display: false,
        fontsize: 14,
        text: 'Total de Pedidos por Situação'
    },
    legend: {
        display: true,
        position: 'right',
    },
},

更新：我包含了我的图表声明和选项。

Answer 1

let divContents = $("#exportDiv").html();

这是你的问题。 Chart.js使用html5画布作为其图表。所以你的divContents只会包含一个没有任何内容的canvas标签。

试用.toDataURL()

Answer 2

我通过在动画完成时首先将图表转换为图像然后我在图像标签中显示图像来实现它...它出现在打印预览屏幕上......

首先我创建了一个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未在打印预览中显示

2 个答案: