Contact Us
Home / Blog / Mobile App

Asp.Net Core 5 Convert HTML to PDF Working Example

Mobile App | October 28, 2021

Hello friends, welcome back to my blog. Today in this blog post, I am going to show you, Asp.Net Core 5 Convert HTML to PDF Working Example.

Working Video
Asp.Net Core 5 Convert HTML to PDF Working Example
Asp.Net Core 5 Convert HTML to PDF Working Example

.Net Core 5 came and if you are new then you must check below two links:

Friends now I proceed onwards and here is the working code snippet and use this carefully to avoid the mistakes:

1. Firstly friends we need .net core 5 installed on our machine and for this please check below link:

https://dotnet.microsoft.com/download

2. Now guy’s we need to install c# extension inside our visual studio code editor and for this please check below images:

install c# in visual studio code
install c# in visual studio code

3. Now guy’s create `demo` folder and open that folder inside visual studio code and run below command to get fresh project setup of .net code 5:

dotnet new webApp -o testproject

4. Now guy’s add below code inside testproject/Pages/Index.cshtml file to check output on web

@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}
<div class="container py-5 text-center">
  
  <div id="content">
      <h3>Hello, this is a H3 tag</h3>

      <p>A paragraph</p>
 
  <div id="editor"></div>
 
  </div>
   <button id="cmd" class="btn btn-primary">generate PDF</button>
</div>
5. Now guy’s add below code inside testproject/Pages/Shared/_Layout.cshtml file to check output on web browser:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - testproject</title>
   
    <link href="https://fonts.googleapis.com/css2?family=Jost:wght@200;300;400;500;600;700;800;900&amp;display=swap" rel="stylesheet">
    
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script>
    <script>
        $(document).ready(function(){
          
            var doc = new jsPDF();
            var specialElementHandlers = {
                '#editor': function (element, renderer) {
                    return true;
                }
            };

            $('#cmd').click(function () {
                doc.fromHTML($('#content').html(), 15, 15, {
                    'width': 170,
                        'elementHandlers': specialElementHandlers
                });
                doc.save('sample-file.pdf');
        });
        });
    </script>
     
</head>
<body>
   @RenderBody()
  
</body>
</html>

6. Now guy’s in the end please run below command inside your project terminal and check the output:

dotnet watch run //http://localhost:5000/

Now we are done friends also and If you have any kind of query or suggestion or any requirement then feel free to comment below.

Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements.

Jassa

Thanks

The post Asp.Net Core 5 Convert HTML to PDF Working Example appeared first on Therichpost.

This content was originally published here.