[Chartjs]-Is it possible to print a chart with vue-chartjs?

by

2đź‘Ť

âś…

The answer is: Yes, it is. Your print method in the components’ script could be:

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);  
  },
}

You can also add this to your component’s style:

@media print{
    @page {
        size: landscape
        }
}

2đź‘Ť

vue-chartjs is based on chart.js and not canvas.js, thus it does not have a “build-in” way of printing.

You have to do it with some custom logic and the native javascript printing functions.

You can however grab the canvas element inside your chart component and generate for example an image and then print that image.

It will get a bit tricky, because you only have access to the canvas inside your chart component. So you will need to maybe wait for an event or prop to trigger the toDataURL call and then emit the image to your parent component where you can print it. If you want to trigger the print in your parent component.

methods: {
   print () {
     // grab the canvas and generate an image
     let image = this.$refs.canvas.toDataURL('image/png')
     // Emits an event with the image
     this.$emit('chart:print', image)
   }
}

In your parent component:

<template>
 <your-chart @chart:print="handlePrint"
<template/>

....
...

methods: {
 handlePrint(image) {
   const win = window.open('', 'Print', 'height=600, width=800')
   win.document.write(`<br><img src='${image}' />`)
   win.print()
   win.close()
 }
}

1đź‘Ť

It seems like the library is based on chartjs not canvasjs https://www.chartjs.org/docs/latest/ you might want to look into how to print a window Quick Print HTML5 Canvas, and remember you have access to the canvas element where your graph is drawn:

 methods: {
     printChart() {
        const canvasEle = this.$el.querySelector('canvas');
        //now your chart image is on canvasEle 
     },
  }

0đź‘Ť

If you are not against using export to pdf format, you can implement this task using jsPDF library, for example:

<template>
    <div class="report">
        <charts v-if="todaySelected"
                :chart-id="'total_visits_chart_bar'" 
                :height="chartsHeight" 
                :options="chartOptions"
                :chart-data="datacollection" 
        ></charts>
    </div>
</template>
<script>
import jsPDF from 'jspdf'; //for PDF printing
methods: {
  pdfThatThing : function(){
      //Default export is a4 paper, portrait, using milimeters for units      
      let pdfName = 'test'; 
      var doc = new jsPDF();
      doc.text("Header", 20, 20); //at x,y at def.units 2cm
      //chart element
      let canvasEle = document.getElementById('total_visits_chart_bar');
      let chartURL = canvasEle.toDataURL(); //transform path 
      //a4 page is 209mm, adds at 4cm top, 2cm left, for 15cm in size      
      doc.addImage(chartURL, 'PNG', 20, 40, 150, 150 )
      doc.save(pdfName + '.pdf');
    },
}
</script>

There is also option to auto show print dialog in pdf viewer:

doc.autoPrint({variant: 'non-conform'})

Leave a comment