Friday, 22 March 2019

JSPDF with Angular (Acro forms are not included)

JSPDF :- If you want to print a pdf from web page

1. Run below commands to get the code base.
npm install jspdf --save

typings install dt~jspdf --global --save

npm install @types/jspdf --save

2. Create html and wire to Angular component :- Invoke printAdapter from there

3. Create a class in typescript : - Copy paste below code

const jsPDF = require('jspdf'); // or import * as jsPDF from 'jspdf' or import jsPDF from 'jspdf'
printValues(img) {
const doc = new jsPDF();
doc.addImage(img, 'PNG', 2, 5, 60, 30);
doc.text(70, 20, 'Web');
doc.setTextColor(255, 0, 0);
doc.text(140, 20, 'Confidential');
const reportTitle = 'This is a confidential report';
const splitTitle = doc.splitTextToSize(reportTitle, 180);
doc.text(2, 44, splitTitle);
doc.setTextColor(0, 0, 0);
doc.setLineWidth(0.5);
doc.text(60, 64, 'list section').setFillColor(0, 0, 0);
doc.text(2, 69, 'name :');
doc.text(50, 69, 'India');
doc.line(50, 69.5, 68, 69.5);
doc.text(2, 79, 'Code :');
doc.text(50, 79, 'INH');

doc.setDrawColor(0);
doc.setFillColor(211, 211, 211);
doc.rect(1, 99, 200, 10, 'F');


doc.setFontSize(12);
doc.setFontType('bold');
doc.text('ComboBox:', 10, 105);

doc.rect(20, 120, 5, 5); // empty square
doc.line(20, 120, 18, 118);
doc.text(20, 120, '✓');

doc.rect(40, 120, 10, 10, 'F'); // filled square

doc.setDrawColor(255, 0, 0);
doc.rect(60, 120, 10, 10); // empty red square

doc.setDrawColor(255, 0, 0);
doc.rect(80, 120, 10, 10, 'FD'); // filled square with red borders

doc.setDrawColor(0);
doc.setFillColor(255, 0, 0);
doc.rect(100, 120, 10, 10, 'F'); // filled red square

doc.setDrawColor(0);
doc.setFillColor(255, 0, 0);
doc.rect(120, 120, 5, 5, 'FD'); // filled red square with black borders

doc.setDrawColor(0);
doc.setFillColor(255, 255, 255);
doc.roundedRect(140, 120, 5, 5, 3, 3, 'FD'); // Black square with rounded corners

doc.save('FirstSample.pdf');
}

printAdapter() {
this.getImageFromUrl('http://localhost:4200/assets/images/logo.png'); // Path to image
}

getImageFromUrl(url) {
const current = this;
const img = new Image();
img.onload = function () {
current.printValues(img);
};
img.src = url;
}

No comments:

Post a Comment

Custom single threaded java server

 package com.diffengine.csv; import java.io.*; import java.net.*; import java.util.Date; public class Server { public static void main(Str...