vue.js - 是否可以使用 vue-chartjs 打印图表?
问题描述
我正在使用 vue-chartjs 在 web 应用程序上呈现图形。我知道如果您使用原始库,您可以打印图表。但是我不知道如何使用库的 vue 版本来做到这一点。
我在外部charts.js 文件中有我的图表变量
import {Bar, mixins } from 'vue-chartjs'
Chart.defaults.global
let chartOptions = Chart.defaults.global;
const { reactiveProp } = mixins
export default {
extends: Bar,
mixins: [reactiveProp],
props: ['options'],
mounted () {
let that = this;
that.chartOptions = {
scales: {
yAxes: [{
ticks: {
suggestedMin: 0,
fontFamily: "'Overpass_Mono', 'Monaco', monospace",
fontColor: "rgba(254, 255, 248, 0.5)"
},
gridLines: {
color: 'rgba(255, 80, 248, 0.08)',
zeroLineColor: 'rgb(168, 119, 181)',
zeroLineWidth: 2
},
}],
xAxes: [{
ticks: {
suggestedMin: 0,
fontColor: "rgb(168, 119, 181)"
},
gridLines: {
color: 'rgba(255, 80, 248, 0.08)',
zeroLineColor: 'transparent',
}
}],
},
legend: {
labels: {
fontColor: 'rgb(168, 119, 181)',
}
}
},
this.renderChart(this.chartData, that.chartOptions)
}
}
然后在我的组件模板上我有:
<template>
<div class="report">
<charts v-if="todaySelected"
:chart-id="'total_visits_chart_bar'"
:height="chartsHeight"
:options="chartOptions"
:chart-data="datacollection"
></charts>
<div v-if="todaySelected">
<button @click="printChart(charts)">Print chart</button>
</div>
</template>
<script>
import charts from './chart_0.js'
components: {
charts,
},
data() {
return{
datacollection: {"datasets":[{"label":"Entries Today","data":[15,15,15,0]},{"label":"Currently Inside","data":[2,2,2,0]}],"labels":[]}
}
}.
methods: {
printChart(charts) {
charts.print();
},
}
</script>
任何帮助,将不胜感激。
解决方案
答案是:是的,是的。您在组件脚本中的打印方法可能是:
methods:{
printChart() {
var canvasEle = document.getElementById('total_visits_chart_bar');
var win = window.open('', 'Print', 'height=600,width=800');
win.document.write("<br><img src='" + canvasEle.toDataURL() + "' />");
setTimeout(function(){ //giving it 200 milliseconds time to load
win.document.close();
win.focus()
win.print();
win.location.reload()
}, 200);
},
}
您还可以将其添加到组件的样式中:
@media print{
@page {
size: landscape
}
}
推荐阅读
- php - Odoo 和 PHP Drupal 之间的错误连接
- php - 使用 php 进行 JSON 编码正在生成数组
- c - Linux 在本地环回上将数据包发送到多个目的地
- node.js - 天蓝色函数失败的错误消息,没有 node.js 错误日志记录
- ios - Swift:使用实时摄像头截取屏幕截图
- javascript - 快速添加/删除时onclick没有正确响应
- mysql - 在“Case When”中使用“AND”时从数据库中检索数据时出错
- typescript - 转译时排除 *.spec.ts 文件,但仍能正确 lint
- c - 字符串的 MD5 在 C 中给出错误的输出
- julia - Julia 1.0 中的关键字(或保留字)