Export Charts Created By Vue-chartjs to PDF Files

vue-chartjs-exporter

Export charts created by vue-chartjs to PDF files.

Read the Requirements section below before proceeding, because it contains important information that will have you off looking for an easier solution 😑. Look into Quickchart.io for an easier but not necessarily free solution.

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.

Requirements

Apparently, (locally) converting charts from chart.js is actually not that easy, and converting charts from vue-chartjs is even more difficult. For an approach to render charts without an external API, that can run offline and locally, it’s significantly more complicated, because you have to specifically place the chart in a container of 594px by 459px (for letter size paper), and make sure that the chart’s options are set to

{ responsive: true, maintainAspectRatio: false }

…or the image will either be stretched or squashed or too small or too large, like this:

You can’t create two charts, one formatted the way you like, and the other formatter for conversion, and hide them with v-show or v-if, unfortunately. However, you can place the conversion-formatted ones off-screen so they’re not visible directly, but are still there.

If you do all this, though, you can end up with some rather nice looking chart PDFs:

Now, do note that, as aforementioned, the chart element you pass into Exporter will have to be contained within an element of 594px by 459px, since that’s the paper’s size, and thus the optimum size for the chart. But then you won’t be able to resize the chart on your website or such, so what you can do is create two identical charts, one which you can do whatever you want with, and another, contained in a div of the right size, but placed off screen, so the user doesn’t see it.

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>

The other chart is hidden off to the left where you can’t see it.

Both charts would be populated with the same data, but when you export to PDF, the off-screen chart would be converted to a PDF, not the one that the user would see. This is overly complicated, but its the only way I could find. If you try to hide charts with v-if or v-show, when you show the hidden chart, the other one will be deleted for some reason. Perhaps you could create a single component that would create the two charts together, to make things easier, but that would require further work.

Also note that you might have to increase the distance the hidden chart is moved left if it is still showing on screen.

Developed for this Stack Overflow question. See its answer for more details.

View a demo of converting charts to PDFs here.

Dependencies

Depends on jspdf and html2canvas.

Changelog

v1.0.2:

Fixed bug where an extra blank page was appearing at the end of outputted PDFs

v1.0.1:

Updated README and added attribution.

v1.0.0:

Initial commit.

Download Details:

Author: marsnebulasoup

Source Code: https://github.com/marsnebulasoup/vue-chartjs-exporter

#vue #vuejs #javascript

What is GEEK

Buddha Community

Creating PDF Invoices in Python with pText

Introduction

The Portable Document Format (PDF) is not a WYSIWYG (What You See is What You Get) format. It was developed to be platform-agnostic, independent of the underlying operating system and rendering engines.

To achieve this, PDF was constructed to be interacted with via something more like a programming language, and relies on a series of instructions and operations to achieve a result. In fact, PDF is based on a scripting language - PostScript, which was the first device-independent Page Description Language.

In this guide, we’ll be using pText - a Python library dedicated to reading, manipulating and generating PDF documents. It offers both a low-level model (allowing you access to the exact coordinates and layout if you choose to use those) and a high-level model (where you can delegate the precise calculations of margins, positions, etc to a layout manager).

We’ll take a look at how to create a PDF invoice in Python using pText.

#python #pdf #creating pdf invoices in python with ptext #creating pdf invoices #pdf invoice #creating pdf invoices in python with ptext

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework.

Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

This framework was created by Evan You and still it is maintained by his private team members. Vue is of course an open-source framework which is based on MVVM concept (Model-view view-Model) and used extensively in building sublime user-interfaces and also considered a prime choice for developing single-page heavy applications.

Released in February 2014, Vue JS has gained 64,828 stars on Github, making it very popular in recent times.

Evan used Angular JS on many operations while working for Google and integrated many features in Vue to cover the flaws of Angular.

“I figured, what if I could just extract the part that I really liked about Angular and build something really lightweight." - Evan You

#vuejs #vue #vue-with-laravel #vue-top-story #vue-3 #build-vue-frontend #vue-in-laravel #vue.js

Introduction to Structured Query Language SQL pdf

SQL stands for Structured Query Language. SQL is a scripting language expected to store, control, and inquiry information put away in social databases. The main manifestation of SQL showed up in 1974, when a gathering in IBM built up the principal model of a social database. The primary business social database was discharged by Relational Software later turning out to be Oracle.

Models for SQL exist. In any case, the SQL that can be utilized on every last one of the major RDBMS today is in various flavors. This is because of two reasons:

1. The SQL order standard is genuinely intricate, and it isn’t handy to actualize the whole standard.

2. Every database seller needs an approach to separate its item from others.

Right now, contrasts are noted where fitting.

#programming books #beginning sql pdf #commands sql #download free sql full book pdf #introduction to sql pdf #introduction to sql ppt #introduction to sql #practical sql pdf #sql commands pdf with examples free download #sql commands #sql free bool download #sql guide #sql language #sql pdf #sql ppt #sql programming language #sql tutorial for beginners #sql tutorial pdf #sql #structured query language pdf #structured query language ppt #structured query language

Flutter PDF: Create, read, and edit PDF files

• Create PDF files with multiple pages and sections.
• Secure your PDF files with advanced encryption standards.
• Generate tables in PDF files with different styles and formats.
• Insert JPEG and PNG images in PDF documents.
• Top features: Formatted text, Unicode, RTL text, tables, shapes, lists, hyperlinks, header, footer, bookmarks, modify PDF, extract text, find text, conformance, encryption, and decryption.
  https://www.syncfusion.com/flutter-widgets/pdf-library

#pdf-library #pdf #flutter #create pdf #widget

Export Charts Created By Vue-chartjs to PDF Files

vue-chartjs-exporter

Export charts created by vue-chartjs to PDF files.

Read the Requirements section below before proceeding, because it contains important information that will have you off looking for an easier solution 😑. Look into Quickchart.io for an easier but not necessarily free solution.

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.

Requirements

Apparently, (locally) converting charts from chart.js is actually not that easy, and converting charts from vue-chartjs is even more difficult. For an approach to render charts without an external API, that can run offline and locally, it’s significantly more complicated, because you have to specifically place the chart in a container of 594px by 459px (for letter size paper), and make sure that the chart’s options are set to

{ responsive: true, maintainAspectRatio: false }

…or the image will either be stretched or squashed or too small or too large, like this:

You can’t create two charts, one formatted the way you like, and the other formatter for conversion, and hide them with v-show or v-if, unfortunately. However, you can place the conversion-formatted ones off-screen so they’re not visible directly, but are still there.

If you do all this, though, you can end up with some rather nice looking chart PDFs:

Now, do note that, as aforementioned, the chart element you pass into Exporter will have to be contained within an element of 594px by 459px, since that’s the paper’s size, and thus the optimum size for the chart. But then you won’t be able to resize the chart on your website or such, so what you can do is create two identical charts, one which you can do whatever you want with, and another, contained in a div of the right size, but placed off screen, so the user doesn’t see it.

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>

The other chart is hidden off to the left where you can’t see it.

Both charts would be populated with the same data, but when you export to PDF, the off-screen chart would be converted to a PDF, not the one that the user would see. This is overly complicated, but its the only way I could find. If you try to hide charts with v-if or v-show, when you show the hidden chart, the other one will be deleted for some reason. Perhaps you could create a single component that would create the two charts together, to make things easier, but that would require further work.

Also note that you might have to increase the distance the hidden chart is moved left if it is still showing on screen.

Developed for this Stack Overflow question. See its answer for more details.

View a demo of converting charts to PDFs here.

Dependencies

Depends on jspdf and html2canvas.

Changelog

v1.0.2:

Fixed bug where an extra blank page was appearing at the end of outputted PDFs

v1.0.1:

Updated README and added attribution.

v1.0.0:

Initial commit.

Download Details:

Author: marsnebulasoup

Source Code: https://github.com/marsnebulasoup/vue-chartjs-exporter

#vue #vuejs #javascript