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









npm i vue-chartjs-exporter




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) =>"charts.pdf")); // returns a jsPDF doc object which you can do whatever you wish with.



Something like this:

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

    export default { MAGIC GOES HERE }

    .hidden {
      width: 594px !important;
      height: 459px !important;
      position: absolute !important;
      left: -600px !important;





View a demo of converting charts to PDFs here.


Depends on jspdf and html2canvas


Leave a Reply