DEV Community: Maxwell ADANZOUNNON

Build a PDF invoice template using only typescript and jspdf-autotable | No screen capture

Maxwell ADANZOUNNON — Tue, 22 Feb 2022 08:26:13 +0000

This is how i manage to create an pdf invoice template using only typescript and jspdf-autotable in my Accounting & billing software.

The reason why i’m creating this tutorial is that i was not able to find anywhere a real tutorial that meet my needs a this time and i struggle a lot to come with this technique that use only table to create pdf without screen capture method.
So maybe this can help.

I wanted users to be able to select and copy the invoice content. The content is also render well using this way instead of screen capture.

Start by importing these librairies

npm install jspdf jspdf-autotable

// app.component.ts
import { Component } from '@angular/core';
import jsPDF from 'jspdf';
import autoTable from 'jspdf-autotable';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  public downloadInvoice(){

    const doc = new jsPDF();

    autoTable(doc, {
      body: [
        [
          {
            content: 'Company brand',
            styles: {
              halign: 'left',
              fontSize: 20,
              textColor: '#ffffff'
            }
          },
          {
            content: 'Invoice',
            styles: {
              halign: 'right',
              fontSize: 20,
              textColor: '#ffffff'
            }
          }
        ],
      ],
      theme: 'plain',
      styles: {
        fillColor: '#3366ff'
      }
    });

    autoTable(doc, {
      body: [
        [
          {
            content: 'Reference: #INV0001'
            +'\nDate: 2022-01-27'
            +'\nInvoice number: 123456',
            styles: {
              halign: 'right'
            }
          }
        ],
      ],
      theme: 'plain'
    });

    autoTable(doc, {
      body: [
        [
          {
            content: 'Billed to:'
            +'\nJohn Doe'
            +'\nBilling Address line 1'
            +'\nBilling Address line 2'
            +'\nZip code - City'
            +'\nCountry',
            styles: {
              halign: 'left'
            }
          },
          {
            content: 'Shipping address:'
            +'\nJohn Doe'
            +'\nShipping Address line 1'
            +'\nShipping Address line 2'
            +'\nZip code - City'
            +'\nCountry',
            styles: {
              halign: 'left'
            }
          },
          {
            content: 'From:'
            +'\nCompany name'
            +'\nShipping Address line 1'
            +'\nShipping Address line 2'
            +'\nZip code - City'
            +'\nCountry',
            styles: {
              halign: 'right'
            }
          }
        ],
      ],
      theme: 'plain'
    });

    autoTable(doc, {
      body: [
        [
          {
            content: 'Amount due:',
            styles: {
              halign:'right',
              fontSize: 14
            }
          }
        ],
        [
          {
            content: '$4000',
            styles: {
              halign:'right',
              fontSize: 20,
              textColor: '#3366ff'
            }
          }
        ],
        [
          {
            content: 'Due date: 2022-02-01',
            styles: {
              halign:'right'
            }
          }
        ]
      ],
      theme: 'plain'
    });

    autoTable(doc, {
      body: [
        [
          {
            content: 'Products & Services',
            styles: {
              halign:'left',
              fontSize: 14
            }
          }
        ]
      ],
      theme: 'plain'
    });

    autoTable(doc, {
      head: [['Items', 'Category', 'Quantity', 'Price', 'Tax', 'Amount']],
      body: [
        ['Product or service name', 'Category', '2', '$450', '$50', '$1000'],
        ['Product or service name', 'Category', '2', '$450', '$50', '$1000'],
        ['Product or service name', 'Category', '2', '$450', '$50', '$1000'],
        ['Product or service name', 'Category', '2', '$450', '$50', '$1000']
      ],
      theme: 'striped',
      headStyles:{
        fillColor: '#343a40'
      }
    });

    autoTable(doc, {
      body: [
        [
          {
            content: 'Subtotal:',
            styles:{
              halign:'right'
            }
          },
          {
            content: '$3600',
            styles:{
              halign:'right'
            }
          },
        ],
        [
          {
            content: 'Total tax:',
            styles:{
              halign:'right'
            }
          },
          {
            content: '$400',
            styles:{
              halign:'right'
            }
          },
        ],
        [
          {
            content: 'Total amount:',
            styles:{
              halign:'right'
            }
          },
          {
            content: '$4000',
            styles:{
              halign:'right'
            }
          },
        ],
      ],
      theme: 'plain'
    });

    autoTable(doc, {
      body: [
        [
          {
            content: 'Terms & notes',
            styles: {
              halign: 'left',
              fontSize: 14
            }
          }
        ],
        [
          {
            content: 'orem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia'
            +'molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum'
            +'numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium',
            styles: {
              halign: 'left'
            }
          }
        ],
      ],
      theme: "plain"
    });

    autoTable(doc, {
      body: [
        [
          {
            content: 'This is a centered footer',
            styles: {
              halign: 'center'
            }
          }
        ]
      ],
      theme: "plain"
    });

    return doc.save("invoice");

  }

}

//app.component.html
<button (click)="downloadInvoice()">Download invoice</button>

Here is also a step by step video tutorial on how i build the PDF

Good look!

Deploy .net core and angular in less than 5min. No vps setup

Maxwell ADANZOUNNON — Mon, 15 Nov 2021 16:11:52 +0000

Nowadays, web hosting companies for .net technologies are more and more rare, but with .net core technology, the problem is not getting any better. I have compiled a list of web hosting companies that support .net and .net core that I will share in another post but today I found smarterasp.net a platform that seems old fashioned but simple in approach and not at all expensive with a free plan (I am not sponsored).In less than 5 min I was able to deploy NGX.BILL an Angular & .net core application
Here is quickly how I did it

Go to smarterasp.net and create your account.
If you choose their free plan, you have to activate it on the dashboard by providing the requested info before doing anything

After activating it, click on this icon to access the control panel

On the left you have your FTP connection information

Create the database
Click on database then mssql to create a new SQL Server database

Get the connection string

Install dotnet core 3.1 in your local machine: Download .net core 3.1

Use connection string provided in your appsettings.json (take into account your own project) to update the database in order to create the database with tables and default data.

Open a command prompt in the api root folder and navigate to your api project root

If you have a entity framework migrations execute them. this will create database, generate tables and default data inside the database.

dotnet ef database update

Run the command below to create the deployment release

dotnet publish --configuration Release

You release will be at this path : your_dotnet_core_project\bin\Release\netcoreapp3.1\publish

In your_angular_project/src/environments/environment.prod.ts replace the value of with what will be your domain url

apiHost: 'http://yourdomain.com/api',

Download an install in your local machine the latest node.js: Link
After nodejs installation, run the command below to install angular cli locally in your machine

npm install -g @angular/cli

Navigate to the angular root project:

npm install

Once the installation completed, In the same path, run the command below to generate the release

npm run prod

This will generate the release at this path: you_angular_project\dist\your_angular_project\

Use an FTP File transfert client or download WinSCP to connect to the server: https://winscp.net/eng/download.php

Upload the content of your api your_dotnet_core_project\bin\Release\netcoreapp3.1\publish to the server and then the content of the client in the dist folder inside the wwwroot folder of your api on the server.

That's all. Use the url provided to test your site then connect your domain name.

Hope this will help!

For more see: http://blog.twenty-ninex2.com/

Deploying .net core, angular and sql server to ubuntu

Maxwell ADANZOUNNON — Fri, 12 Nov 2021 14:31:16 +0000

In this article I will share with you how I deploy NGX.BILL a .net core/SQL Server and angular application to ubuntu using nginx

Prerequisites: You must have an Ubuntu 16.04, 18.04, or 20.04 machine with at least 2 GB of memory.

Create your own private server and choose ubuntu 16.04, 18.04, or 20.04
You can use this link to get a free credit with digital ocean to start

Connect to the same server as the database using an ssh client.
Example of ssh client: Putty

Create a new user

adduser USER

Enter new UNIX password:
Retype new UNIX password:
passwd: password updated successfully

Changing the user information for USER
Enter the new value, or press ENTER for the default
        Full Name []:
        Room Number []:
        Work Phone []:
        Home Phone []:
        Other []:
Is the information correct? [Y/n] y

Give admin rights to the user.

usermod -a -G sudo USER

Copy the ssh key the new user.

cp -r ~/.ssh /home/USER/
sudo chown -R USER:USER /home/USER/.ssh

Restart the SSH service

sudo service ssh restart

Exit the server.

exit

/ssh USER@YOUR_IP_ADDRESS

Type "Enter" for the passphrase

Enter passphrase for key 'C:\Users\USER/.ssh/id_rsa':

Install SQL Server

Import the public repository GPG keys.

wget -qO- https://packages.microsoft.com/keys/microsoft.asc | sudo apt-key add -

sudo add-apt-repository "$(wget -qO- https://packages.microsoft.com/config/ubuntu/16.04/mssql-server-2019.list)"

For Ubuntu 18.04:

sudo add-apt-repository "$(wget -qO- https://packages.microsoft.com/config/ubuntu/18.04/mssql-server-2019.list)"

For Ubuntu 20.04:

sudo add-apt-repository "$(wget -qO- https://packages.microsoft.com/config/ubuntu/20.04/mssql-server-2019.list)"

Install SQL Server

sudo apt-get update
sudo apt-get install -y mssql-server

After the package installation finishes, run mssql-conf setup and follow the prompts to set the SA password and choose your edition.

sudo /opt/mssql/bin/mssql-conf setup

Make sure to specify a strong password for the SA account and keep this information somewhere for later

Once the configuration is done, verify that the service is running:

systemctl status mssql-server --no-pager

Install the SQL Server command-line tools

Use the following steps to install SQL Server command-line tools (mssql-tools)

sudo apt-get update 
sudo apt install curl

Import the public repository GPG keys.

curl https://packages.microsoft.com/keys/microsoft.asc | sudo apt-key add -

For Ubuntu 16.04:

curl https://packages.microsoft.com/config/ubuntu/16.04/prod.list | sudo tee /etc/apt/sources.list.d/msprod.list

For Ubuntu 18.04:

curl https://packages.microsoft.com/config/ubuntu/18.04/prod.list | sudo tee /etc/apt/sources.list.d/msprod.list

For Ubuntu 20.04:

curl https://packages.microsoft.com/config/ubuntu/20.04/prod.list | sudo tee /etc/apt/sources.list.d/msprod.list

Update the sources list and run the installation command with the unixODBC developer package.

sudo apt-get update sudo apt-get install mssql-tools unixodbc-dev

Optional: Add /opt/mssql-tools/bin/ to your PATH environment variable in a bash shell.
To make sqlcmd/bcp accessible from the bash shell for login sessions, modify your PATH in the ~/.bash_profile file with the following command:

echo 'export PATH="$PATH:/opt/mssql-tools/bin"' >> ~/.bash_profile

To make sqlcmd/bcp accessible from the bash shell for interactive/non-login sessions, modify the PATH in the ~/.bashrc file with the following command:

echo 'export PATH="$PATH:/opt/mssql-tools/bin"' >> ~/.bashrc
source ~/.bashrc

Connect to the SQL Server instance

The following steps use sqlcmd to locally connect to your new SQL Server instance.

Run sqlcmd with parameters for your SQL Server name (-S), the user name (-U), and the password (-P). In this tutorial, you are connecting locally, so the server name is localhost. The user name is SA and the password is the one you provided for the SA account during setup.

sqlcmd -S localhost -U SA -P '<YourPassword>'

To exit:

QUIT

Tip: You can omit the password on the command line to be prompted to enter it.

Tip: If you later decide to connect remotely, specify the machine name or IP address for the -S parameter, and make sure port 1433 is open on your firewall

Install .net core

Install the Microsoft package sources

wget https://packages.microsoft.com/config/ubuntu/18.04/packages-microsoft-prod.deb -O packages-microsoft-prod.deb
sudo dpkg -i packages-microsoft-prod.deb

Install the .NET 3.1 SDK: take into account your own version

sudo apt-get update
sudo apt-get install -y apt-transport-https
sudo apt-get update
sudo apt-get install -y dotnet-sdk-3.1

Check that dotnet is correctly installed

dotnet --info

Upload the release

Install dotnet core 3.1 in your local machine: Download .net core 3.1

Make the connection string in your appsettings.json (take into account your own project) to update the database in order to create the database with tables and default data. Use the IP Address of the server because early with set it up to host the database.

"LocalConnectionString":"Server=YOUR_IP_ADDRESS;Database=database;Uid=user;Pwd=your_password"

Open a command prompt in the api root folder and navigate to your api project root

If you have a entity framework migrations execute them. this will create database, generate tables and default data inside the database.

dotnet ef database update

After the migration update success, update again the connection string and replace only the IP Address with "localhost"

"LocalConnectionString":"Server=localhost;Database=database;Uid=user;Pwd=your_password"

Run the command below to create the deployment release

dotnet publish --configuration Release

You release will be at this path : your_dotnet_core_project\bin\Release\netcoreapp3.1\publish

In your_angular_project/src/environments/environment.prod.ts replace the value of with what will be your domain url

apiHost: 'http://yourdomain.com/api',

Download an install in your local machine the latest node.js: Link
After nodejs installation, run the command below to install angular cli locally in your machine

npm install -g @angular/cli

Navigate to the angular root project:

npm install

Once the installation completed, In the same path, run the command below to generate the release

npm run prod

This will generate the release at this path: you_angular_project\dist\your_angular_project\

Create /var/www/ directory in the server

sudo mkdir /var/www/
sudo chown -R <<user>>:www-data /var/www/

Use an FTP File transfert client or download WinSCP: https://winscp.net/eng/download.php

Connect to the server using your IP Address and user credentials

Upload the content of your api your_dotnet_core_project\bin\Release\netcoreapp3.1\publish to the server: /var/www/ and then the content of the client the dist folder inside the wwwroot folder of your api on the server.

Install NGINX on the server

Install nginx

sudo apt-get update
sudo apt-get install nginx

Start nginx service

sudo service nginx start

Enter the IP address in your browser to see nginx welcome page
SSL Certificate for your domain name

sudo apt-get install software-properties-common
sudo add-apt-repository universe
sudo add-apt-repository ppa:certbot/certbot
sudo apt-get update
sudo apt-get install certbot python3-certbot-nginx 
sudo certbot --nginx

Edit the site config to forward request to the app

sudo nano /etc/nginx/sites-available/default

Replace the old content with following content

server {
    server_name   _;
    location / {
       root /var/www/wwwroot;
       index index.html;
       #try_files $uri $uri/ /index.html;
       }
    location /api/{
       proxy_pass http://localhost:5000/api/;
       proxy_http_version 1.1;
       proxy_set_header Upgrade $http_upgrade;
       proxy_set_header Connection keep-alive;
       proxy_set_header Host $host;
       proxy_cache_bypass $http_upgrade;
       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
       proxy_set_header X-Forwarded-Proto $scheme;
       }
       error_log /var/www/error.log warn;
}

Enable the site config

sudo ln -sf /etc/nginx/sites-available/default /etc/nginx/sites-enabled/

Run command below to edit nginx.conf

sudo nano /etc/nginx/nginx.conf

Include site config to nginx.conf

http{    
    ...    
    include /etc/nginx/sites-available/default;
}

Restart nginx

sudo service nginx restart

On the server navigate to www folder

cd /var/www

Run the project for test

dotnet your_project-api.dll

Type in your browser your IP address to see the app and after type ctrl + c to stop the app running

The web app service

Create the service file

sudo nano /etc/systemd/system/app_name.service

Fill the service infos

[Unit]
Description=Service description

[Service]
WorkingDirectory=/var/www
ExecStart=/usr/bin/dotnet /var/www/your_project_api.dll
Restart=always
# Restart service after 10 seconds if the dotnet service crashes:
RestartSec=10
KillSignal=SIGINT
SyslogIdentifier=app_name
User=www-data
Environment=ASPNETCORE_ENVIRONMENT=Production
Environment=DOTNET_PRINT_TELEMETRY_MESSAGE=false

[Install]
WantedBy=multi-user.target

Gill full right to the folder

sudo chown -R www-data:www-data /var/www/
sudo setfacl -R -d -m u:www-data:rwx,g:www-data:rwx,o::r /var/www/

Start the service

sudo service app_name start

To check if service is running

sudo service app_name status

Now the web app is running. No need to run the app with dotnet command to access it.

Hope this will help!

For more see: http://blog.twenty-ninex2.com/