

How to Create a PDF Document using HTML & CSS in ASP.NET Core
source link: https://www.roundthecode.com/dotnet/how-to-create-a-pdf-document-html-css-in-asp-net-core
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

How to Create a Free PDF Document using HTML & CSS in ASP.NET Core
1st April 2021There are a number of Nuget packages out there that allow us to create a PDF document for free in ASP.NET Core.
PDF documents have many uses in a web application, such as sending an invoice to a customer, or generating a document.
They also have the advantage of working on all the major operating systems and having a consistent layout.
For this tutorial, we are going to use the SelectPDF package.
SelectPDF not only allows the ability to create a PDF using HTML and CSS, it also allows us to generate a PDF document from a website.
And, we can dictate the width of the website. That means we can capture the layout in mobile, tablet and desktop view.
Resources
To try out this application, download the source code from our code examples section.
As well as that, check our video tutorial where we follow the steps in this article to create a PDF document.
The Application
For this application, we are going to create an ASP.NET Core Web MVC app.
First of all, we are going to generate a PDF document, which displays the layout of RoundTheCode.com in mobile, tablet and desktop view.
Afterwards, we will produce a sample invoice using CSS and HTML.
Not only will we return the PDF as part of the HTTP response, we will also include the ability to save the PDF document to the server's file storage.
Setting Up a PDF Controller
The first thing we want to do is create a new controller called PdfController
.
From there, we want to assign a Route
attribute to it. This allows us to point the whole of the PdfController
to a particular endpoint.
In our instance, we will set the Route
attribute to pdf
. Therefore, any action created in the PDFController
will prefix with /pdf
.
// PDFController.cs
[Route(
"pdf"
)]
public
class
PdfController : Controller
{
}
Next, we need to create our action.
As we will be calling an async method, we will mark the method as async and return an instance of Task
.
In addition, we will assign a Route
attribute and set it to website
.
This means that this action will be rendered when we call /pdf/website
.
// PDFController.cs
[Route(
"pdf"
)]
public
class
PdfController : Controller
{
[Route(
"website"
)]
public
async
Task<IActionResult> WebsiteAsync()
{
return
null
;
}
}
Now that we have set up the controller, we need to bring in the Select.HtmlToPdf.NetCore Nuget package.
We can do that by opening up Package Manager Console in Visual Studio (Tools -> NuGet Packager Manager -> Package Manager Console), and running the following script:
Install-Package Select.HtmlToPdf.NetCore
This Nuget package will allow us to create a PDF document into ASP.NET Core.
Render a Website into a PDF Document
We now have the controller set up. The Nuget package manager has been imported.
From there, we can start creating a PDF document.
First, we will render a website (specifically RoundTheCode.com) into a PDF document.
The PDF document will consist of the mobile, tablet and desktop layout of RoundTheCode.com.
For that, we will create three instances of the HtmlToPdf
class.
For each instance, we will set a web site width.
So for mobile, we will set the width to 480px. For tablet, it's 1024px. And finally, for desktop, we set it up for the HD width at 1920px.
Afterwards, we take each instance of the HtmlToPdf
class, and run the ConvertUrl
method. Within that method, we will pass in a parameter which will be the website address. In our instance the parameter will be https://www.roundthecode.com
.
This will be stored into a PDFDocument
instance and append to the document everytime we call the ConvertUrl
Finally, we can get the byte array of the PDFDocument
instance by calling the Save
method.
This then gets returned in the HTTP response, along with a mime type of application/pdf
.
[Route(
"pdf"
)]
public
class
PdfController : Controller
{
[Route(
"website"
)]
public
async
Task<IActionResult> WebsiteAsync()
{
var
mobileView =
new
HtmlToPdf();
mobileView.Options.WebPageWidth = 480;
var
tabletView =
new
HtmlToPdf();
tabletView.Options.WebPageWidth = 1024;
var
fullView =
new
HtmlToPdf();
fullView.Options.WebPageWidth = 1920;
var
pdfBytes = pdf.Save();
return
File(pdfBytes,
"application/pdf"
);
}
}
Saving the PDF Document to File Storage
It's all very well rendering a PDF document as part of the HTTP response, but what if we want to save it to file storage?
Well, we can do that by creating a new instance of StreamWriter
, saving the stream into a file called RoundTheCode.pdf
.
public
async
Task<IActionResult> WebsiteAsync()
{
...
var
pdfBytes = pdf.Save();
using
(
var
streamWriter =
new
StreamWriter(
@"C:\inetpub\wwwroot\RoundTheCode.Pdf\RoundTheCode.pdf"
))
{
await
streamWriter.BaseStream.WriteAsync(pdfBytes, 0, pdfBytes.Length);
}
return
File(pdfBytes,
"application/pdf"
);
}
And that's it! Our PDF file has been saved to file storage.
Create a PDF Document from HTML and CSS
Our next task is to render a PDF document from HTML and CSS.
In this example, we will add an invoice into a PDF document.
For this, we have already added our CSS file into wwwroot/css/invoice.css
and our HTML into a partial view located inside Views/Pdf/_Invoice.cshtml
.
These files are included when using our Code Examples section to download the source code.
Our next task is to render and store the HTML from Views/Pdf/_Invoice.cshtml
.
To do that, we need to pass the instance of ICompositeViewEngine
into PdfController
.
// PdfController.cs
public
class
PdfController : Controller
{
protected
readonly
ICompositeViewEngine _compositeViewEngine;
public
PdfController(ICompositeViewEngine compositeViewEngine)
{
_compositeViewEngine = compositeViewEngine;
}
...
}
From there, we can start writing the method to turn our invoice into a PDF document.
First, we create a new instance of StreamWriter
. This instance will allow us to write the PDF file from the view.
Next, we will check that the view actually exists.
To do that, we call the FindView
method from the ICompositeViewEngine
instance.
Assuming it exists, we need to create a new ViewContext
instance. This is what happens normally when rendering a view in MVC.
We then write this ViewContext
instance into our StreamWriter
instance. From there, we can convert our StreamWriter
instance into a string, and that will give us the HTML of our invoice.
After that, we create a new instance of HtmlToPdf
. Then, we can call the ConvertHtmlString
method and pass in the HTML as the parameter.
Just like with rendering a website, we can render the PDF into the HTTP response, or we can save the PDF to file storage.
// PdfController.cs
public
class
PdfController : Controller
{
...
[Route(
"invoice"
)]
public
async
Task<IActionResult> InvoiceAsync()
{
using
(
var
stringWriter =
new
StringWriter())
{
var
viewResult = _compositeViewEngine.FindView(ControllerContext,
"_Invoice"
,
false
);
if
(viewResult.View ==
null
)
{
throw
new
ArgumentNullException($
"'Views/Pdf/_Invoice.cshtml' does not match any available view"
);
}
var
viewDictionary =
new
ViewDataDictionary(
new
EmptyModelMetadataProvider(),
new
ModelStateDictionary());
var
viewContext =
new
ViewContext(
ControllerContext,
viewResult.View,
viewDictionary,
TempData,
stringWriter,
new
HtmlHelperOptions()
);
await
viewResult.View.RenderAsync(viewContext);
var
htmlToPdf =
new
HtmlToPdf(1000, 1414);
htmlToPdf.Options.DrawBackground =
true
;
var
pdf = htmlToPdf.ConvertHtmlString(stringWriter.ToString());
var
pdfBytes = pdf.Save();
using
(
var
streamWriter =
new
StreamWriter(
@"C:\inetpub\wwwroot\RoundTheCode.Pdf\Invoice.pdf"
))
{
await
streamWriter.BaseStream.WriteAsync(pdfBytes, 0, pdfBytes.Length);
}
return
File(pdfBytes,
"application/pdf"
);
}
}
}
Dynamic PDF Documents
This now allows us to create dynamic PDF documents for our ASP.NET Core web application.
This can be used for many examples, such as creating a website order receipt, creating terms for insurance purchased or sending out a quote.
I'm sure there are many benefits in creating dynamic PDF documents for any ecommerce website out there.
Subscribe to our YouTube Channel
- Free ASP.NET Core coding tutorial videos.
- Implement a how-to guide on a topic related to ASP.NET Core.
- Covers Blazor, Web API's, SQL Server, EF and many more...
Sign Up to the Newsletter
- Coming soon, we will sending out a newsletter with the latest updates.
- Just simply fill out your email below.
Recommend
-
10
How to Embed PDF Document in HTML Web Page Generally, a hyperlink is used to link a PDF document to display in the browser. An HTML anchor link is the easiest way to display a PDF file. But if you want to display...
-
10
Azure DevOps Wiki When working on Azure DevOps or Github, we have special needs when it comes to wiki's and documentation. Specifically, we often have our documentation sit next to our source code in our repos, allowing us to...
-
11
Convert HTML to PDF using JavaScript PDF file format is very useful to download bulk data in the web application. It helps the user to download dynamic content in file format for offline use. With export to...
-
10
...
-
6
Deploying an ASP.NET Core Web Application using the Document Editor with Docker A Docker container image is a lightweight, standalone, executable package of software that includes everything needed to run an applicati...
-
10
Closed Bug 1785218...
-
5
HTML To PDF In Laravel Using barryvdh/laravel-snappy 340916 views 5 years ago Laravel Today, laravel code share with you...
-
6
Exploring generating PDF files from HTML in ASP.NET Core Back in 2008, I wrote a series of articles about using iTextSharp to ge...
-
8
Document Viewer 31.2.3 Released We have just released a new package version of the TX Text Control MVC DocumentViewer for ASP.NET and ASP.NET Core web applications. TXTextControl.Web.DocumentV...
-
8
January 8, 2024Using AI and PDF Services to Automate Document Summaries
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK