Print vue-chart.js

/*Vue & Vue-Chart.JS
I have resonsive layout and the charts would scale with parent container.
When a user would print the chart I tried resizing it with JS in the 
beforeprint and afterprint window listeners, This caused a shift in the chart
position in the print preview. If you need to re-render/resize the chart it
is easier to convert the canvas to a image. */

//DoughnutChart.js ()
// I will only show the key parts
import { Doughnut } from 'vue-chartjs'
export default {
	extends: Doughnut
  	props: {
		...
  		//chartId is a prop for vue-chart.js.
  		//Give it a unique id if you have multiple charts on the page
  		chartId: {
			type: String,
			required: true
		},
  		...
	},
     methods: {
     	beforePrintResizeCharts() {
          //Getting the Canvas and parent node
          //Create a data URL for the canvas
			const CHART_CANVAS = this.$el.children.namedItem(this.chartId);
			const CANVAS_PARENT = CHART_CANVAS.parentElement;
			const CANVAS_DATA_URL = CHART_CANVAS.toDataURL();

          	//Create image and add canvas data URL to image as source
			let printable_image = document.createElement('IMG');

			printable_image.id = `${this.chartId}_image_copy`;
			printable_image.src = CANVAS_DATA_URL;
			printable_image.style.width = '100%';
			printable_image.style.height = 'auto';

          	//Hide the canvas chart
			CHART_CANVAS.style.display = 'none';
			CANVAS_PARENT.append(printable_image);
		},
		afterPrintResizeCharts() {
           //Getting the Canvas and image version of canvas chart
			const CHART_CANVAS = this.$el.children.namedItem(this.chartId);
			const printable_image = this.$el.children.namedItem(this.chartId + "_image_copy");
			
          	//remove image of canvas chart
			printable_image.parentElement.removeChild(printable_image);
          
            //Restore canvas visibility
			CHART_CANVAS.style.display = 'block';
		},
     },
     mounted() {
         //After renderChart method in mounted
         this.renderChart(chart_data, chart_options);

         //Add the beforeprint and afterprint event listners and use the vue methods
         //as the callbacks.
         window.addEventListener('beforeprint', this.beforePrintResizeCharts);
         window.addEventListener('afterprint', this.afterPrintResizeCharts);
     }
}

Similar codes

0 vote93 views1 answer
How to make @click in router-link vuejs
Javascript Vue
0 vote101 views1 answer
Js vue array change position
Javascript Vue
5 votes104 views3 answers
Vue select option v-for selected
Javascript Vue
1 vote93 views1 answer
Vue test form input
Javascript Vue
0 vote102 views1 answer
Jsconfig for default vue
Javascript Vue
1 vote101 views1 answer
Get text inside span vue test utils
Javascript Vue
0 vote104 views1 answer
Vue problem (You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file)
Javascript Vue
2 votes110 views2 answers
Add params to url vue
Javascript Vue
0 vote63 views1 answer
Dateformat filter vue
Javascript Vue
1 vote114 views2 answers
Focus on input field vuejs event
Javascript Vue