Vue.js Chart.js Tutorial to Export Bar,Pie Charts to PDF Documents Using jsPDF & html2canvas Library in Javascript Full Project For Beginners

  • Post author:
  • Post category:Vue
  • Post comments:0 Comments

 

 

vue-chartjs-exporter

 

 

#Installation

 

 

npm i vue-chartjs-exporter

 

 

Usage

Import vue-chartjs-exporter:

 

 

import Exporter from "vue-chartjs-exporter";

 

Get the charts to be exported:

let bar = document.getElementById("bar");
let radar = document.getElementById("radar");
let pie = document.getElementById("pie");
let area = document.getElementById("area");
let line = document.getElementById("line");

Create a new instance of Exporter:

const exp = new Exporter([line, bar, radar, pie, area]);
exp.export_pdf().then((pdf) => pdf.save("charts.pdf")); // returns a jsPDF doc object which you can do whatever you wish with.

 

 

Something like this:

<template>
    <BarChart />
    <div class="hidden">
        <BarChart id="bar" />
    </div>
</template>

<script>
    export default { MAGIC GOES HERE }
</script>

<style>
    .hidden {
      width: 594px !important;
      height: 459px !important;
      position: absolute !important;
      left: -600px !important;
    }
</style>

 

See also  Vue.js Tutorial to Disable Form Input Fields Props Conditionally in Browser Using Javascript Full Project For Beginners

 

 

 

View a demo of converting charts to PDFs here.

Dependencies

Depends on jspdf and html2canvas

 

Leave a Reply