Generate PDF with Free Spire.PDF in .Net Core and download in Angular

1. Introduction

If you want to handle the PDF in .Net project, I think you would know the iTextSharp, it really a powerful PDF handler library, however, it not allow to free to use in commercial after version 2.1.7, and Free Spire.PDF is a Community Edition of the Spire.PDF for .NET, which is a totally free PDF API for commercial and personal use. As a standalone .NET library, Free Spire.PDF for .NET enables developers to create, write, edit, convert, print, handle and read PDF files on any .NET( C#, VB.NET, ASP.NET, .NET Core) applications.

I will base on the previous MyDemo project to demonstrate how to do it.

2. Create the API

2.1 Install Free Spire.PDF from Nuget

First, we need to install the Free Spire.PDF into API project from Nuget

Do you want to be a good trading in cTrader?   >> TRY IT! <<

2.2 Create the Controller

Create the GeneratePDFController and action Generate and then create the PDF demo page below

1) Create the pdfDocument and page

//Create a PdfDocument object
PdfDocument doc = new PdfDocument();

//Add a page
PdfPageBase page = doc.Pages.Add();

the elements will be put in the page base on x and y coordinates, so we can define the started coordinates

//Initialize x and y coordinates
float baseX = 100;
float baseY = 30;

create two brush for different font color and create a font

PdfSolidBrush brush1 = new PdfSolidBrush(new PdfRGBColor(Color.Blue));
PdfSolidBrush brush2 = new PdfSolidBrush(new PdfRGBColor(Color.Black));

PdfFont font = new PdfFont(PdfFontFamily.TimesRoman, 12f, PdfFontStyle.Regular);

We want to put a label on left, it can use page.Canvas.DrawString to draw a label, it’s base on the font and brush, and use the PointF to control the position

page.Canvas.DrawString("TextBox:", font, brush1, new PointF(10, baseY));

and draw the TextBox element neat the label on the right, define the position with RectangleF, create the textbox with PdfTextBoxField

RectangleF tbxBounds = new RectangleF(baseX, baseY, 150, 15);
PdfTextBoxField textBox = new PdfTextBoxField(page, "textbox");
textBox.Bounds = tbxBounds;
textBox.Text = "Hello World!";
textBox.Font = font;

in the end, don’t forget add the text box element into PdfDocument, because this is a form element, so use below, and also need to update the y coordinate

doc.Form.Fields.Add(textBox);
baseY += 25;

and then, create two checkboxes in second row

//label
page.Canvas.DrawString("CheckBox:", font, brush1, new PointF(10, baseY));

RectangleF checkboxBound1 = new RectangleF(baseX, baseY, 15, 15);
PdfCheckBoxField checkBoxField1 = new PdfCheckBoxField(page, "checkbox1");
checkBoxField1.Bounds = checkboxBound1;
checkBoxField1.Checked = false;
//checkbox value description
page.Canvas.DrawString("Option 1", font, brush2, new PointF(baseX + 20, baseY));

RectangleF checkboxBound2 = new RectangleF(baseX + 70, baseY, 15, 15);
PdfCheckBoxField checkBoxField2 = new PdfCheckBoxField(page, "checkbox2");
checkBoxField2.Bounds = checkboxBound2;
checkBoxField2.Checked = false;
page.Canvas.DrawString("Option 2", font, brush2, new PointF(baseX + 90, baseY));

//add to the doc form
doc.Form.Fields.Add(checkBoxField1);
doc.Form.Fields.Add(checkBoxField2);

//update y coordinate
baseY += 25;

create the radio buttons

page.Canvas.DrawString("RadioButton:", font, brush1, new PointF(10, baseY));
PdfRadioButtonListField radioButtonListField = new PdfRadioButtonListField(page, "radio");
PdfRadioButtonListItem radioItem1 = new PdfRadioButtonListItem("option1");
RectangleF radioBound1 = new RectangleF(baseX, baseY, 15, 15);
radioItem1.Bounds = radioBound1;

page.Canvas.DrawString("Option 1", font, brush2, new PointF(baseX + 20, baseY));
PdfRadioButtonListItem radioItem2 = new PdfRadioButtonListItem("option2");
RectangleF radioBound2 = new RectangleF(baseX + 70, baseY, 15, 15);
radioItem2.Bounds = radioBound2;

page.Canvas.DrawString("Option 2", font, brush2, new PointF(baseX + 90, baseY));
radioButtonListField.Items.Add(radioItem1);
radioButtonListField.Items.Add(radioItem2);
radioButtonListField.SelectedIndex = 0;

doc.Form.Fields.Add(radioButtonListField);
baseY += 25;

create a combobox

page.Canvas.DrawString("ComboBox:", font, brush1, new PointF(10, baseY));
RectangleF cmbBounds = new RectangleF(baseX, baseY, 150, 15);
PdfComboBoxField comboBoxField = new PdfComboBoxField(page, "combobox");
comboBoxField.Bounds = cmbBounds;
comboBoxField.Items.Add(new PdfListFieldItem("Item 1", "item1"));
comboBoxField.Items.Add(new PdfListFieldItem("Item 2", "itme2"));
comboBoxField.Items.Add(new PdfListFieldItem("Item 3", "item3"));
comboBoxField.Items.Add(new PdfListFieldItem("Item 4", "item4"));
comboBoxField.SelectedIndex = 0;
comboBoxField.Font = font;

doc.Form.Fields.Add(comboBoxField);
baseY += 25;

create a signature field

page.Canvas.DrawString("Signature Field:", font, brush1, new PointF(10, baseY));
PdfSignatureField sgnField = new PdfSignatureField(page, "sgnField");
RectangleF sgnBounds = new RectangleF(baseX, baseY, 150, 80);
sgnField.Bounds = sgnBounds;
doc.Form.Fields.Add(sgnField);
baseY += 90;

you also can create a submit button

page.Canvas.DrawString("Button:", font, brush1, new PointF(10, baseY));
RectangleF btnBounds = new RectangleF(baseX, baseY, 50, 15);
PdfButtonField buttonField = new PdfButtonField(page, "button");
buttonField.Bounds = btnBounds;
buttonField.Text = "Submit";
buttonField.Font = font;

//submit to another website
PdfSubmitAction submitAction = new PdfSubmitAction("https://www.e-iceblue.com/getformvalues.php");
submitAction.DataFormat = SubmitDataFormat.Html;
buttonField.Actions.MouseDown = submitAction;
doc.Form.Fields.Add(buttonField);

save the PDF file and return to client side

var pdfFile = "PDF/FillableForms.pdf";
//Save to file
doc.SaveToFile(pdfFile, FileFormat.PDF);

byte[] pdfBytes = System.IO.File.ReadAllBytes(pdfFile);
MemoryStream stream = new MemoryStream(pdfBytes);

//Delete the file after download 
System.IO.File.Delete(pdfFile);
return new FileStreamResult(stream, "application/pdf");

2.3 Create the client for getting the PDF

We will use the MyDemo project, so just create the generate PDF component

ng g c generatepdf

Create a service for handling API method, only one method for call the API in this case

//MyDemo.Client\src\app\services\generate-pdf.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { config } from 'src/assets/config';

/**
 * ^The generate PDF service for call API to generate PDF
 */
@Injectable({
  providedIn: 'root',
})
export class GeneratePDFService {
  constructor(protected http: HttpClient) {
  }

  /**
   * Generate the TP Grade Appendix PDF
   * @returns
   */
  public generatePDF() {
    var url = config.apiUrl + "/generatePDF/generate";
    return this.http.get(url, { responseType: 'blob' });
  }
}

this is a simple page only a button for generate PDF:

<!-- MyDemo.Client\src\app\generatepdf\generatepdf.component.html -->
<ngx-loading
  #ngxLoading
  [show]="loading"
  [config]="config"
  [template]="loadingTemplate"
></ngx-loading>
<ng-template #loadingTemplate>
  <div class="loading-class">
    <h4>Please wait ...</h4>
  </div>
</ng-template>

<swal #swalBox [swalVisible]="isSwalVisible"></swal>

<h1>Generate PDF</h1>

<div class="row">
  <div class="col-sm-12">
    <button
      class="m-r-8 bg-green-700 text-light"
      mat-raised-button
      (click)="generate()"
    >
      Generate PDF
    </button>
  </div>
</div>
<p></p>

I uses the loading service and swal dialog in this page, you can find how to use them in here and here.

and implement the generate even in ts file

public generate() {
    this.loadingService.start();
    this.generatePDFService.generatePDF().subscribe(blob => {

      if (blob) {
        var downloadURL = window.URL.createObjectURL(new Blob([blob], { type: 'blob' }));
        var link = document.createElement('a');
        link.href = downloadURL;
        link.download = "Demo.pdf";
        link.click();
        this.swalOptions.icon = 'success';
        this.swalOptions.title = 'Generate PDF';
        this.swalOptions.html = `The PDF has been downloaded!`;
        this.swalOptions.showConfirmButton = true;
        this.swalOptions.showCancelButton = false;
        this.swalService.show(this.swalOptions);
      }
      else {
        this.swalOptions.icon = 'error';
        this.swalOptions.title = 'Generate Appendix';
        this.swalOptions.html = `Failed to generate PDF, please find the error in server side!`;
        this.swalOptions.showConfirmButton = true;
        this.swalOptions.showCancelButton = false;
        this.swalService.show(this.swalOptions);
      }

      this.loadingService.stop();

    }, error => {
      console.log('%c [ error ]-52', 'font-size:13px; background:pink; color:#bf2c9f;', error);
      this.loadingService.stop();
    });
  }
}

Done!

You can find the full source code below

https://github.com/coderblog-winson/MyDemo

Loading

Views: 37
Total Views: 1864 ,

Leave a Reply

Your email address will not be published. Required fields are marked *