Save a PDF generated from html2pdf in C#, MVC , html2pdf , Ajax code

 To save on server or disk a PDF generated from HTML in C# code example, you can use the     html2pdf js script   

html2pdf 

converts any webpage or element into a printable PDF entirely client-side using html2canvas and jsPDF

To use html2pdf is to download dist/html2pdf.bundle.min.js to your project folder and include it in your code with

<script src="html2pdf.bundle.min.js"></script>

C#, MVC

Create new project in visual studio

Step 1: Create a Model Class

csharp

    public class pdfdata
    {
        public string PDFBase64 { get; set; }
        public string FileName { get; set; }
        
    }

Step 2: Create a Controller

Create a new controller called PdfController.cs

csharp

     public ActionResult Pdf()
        {
           

            
            return View();
        }

// Ajax Call from srcipt

    public JsonResult savepdf(pdfdata pdf)
        {

	 byte[] bytes = Encoding.GetEncoding(28591).GetBytes(pdf.PDFBase64);

 	 System.IO.File.WriteAllBytes(@"yourlocation_path/pdf.Filename"+".pdf", bytes);

  	 var response = new { success = true, responseText = "Your file Saved successfuly !" };
           
  	 return Json(response, JsonRequestBehavior.AllowGet);
	}




Step 3: Create a View

HTML


  <button id="btnsavepdf" class="btn btn-primary btn-xs" >
                    Click here to Save
                </button>

<div name="mycontents">

... my pdf content

<div>

<script src="jquery-3.3.1.min.js" type="text/javascript"></script>
<script src="savepdf.js" type="text/javascript"></script>
<script src="html2pdf.bundle.min.js" type="text/javascript"></script>

Create a javascript code or in seperate js file like i created

Script


window.addEventListener('load', function () {
   
    var btnsavepdf = document.getElementById('btnsavepdf');
   
    function savePdf() {
       
        var element = '';    element = document.getElementsByName('mycontents')[0];
        var opt = {
            margin: [2, 2, 2, 2],
            filename: 'myfile',
            image: { type: 'jpeg', quality: 0.7 },
            html2canvas: { scale: 2, useCORS: true },
            jsPDF: { format: 'a4', unit: 'mm' },
           
        };

        
        html2pdf().from(element).set(opt).toPdf().get('pdf').then(function (pdf) {

            pdf.setFontSize(10);
        }).get('pdf').then(function (pdf) {

            
            var pdfBase64 = pdf.output();
            console.log(pdfBase64);
            var pdfcontent = {};

            pdfcontent.PDFBase64 = pdfBase64;
            pdfcontent.FileName = fileName;


            $.ajax({
                type: "POST",
                url: "/pdf/savepdf",
                data: "{pdfcontent:" + JSON.stringify(pdfcontent) + "}",
                contentType: "application/json;charset=utf-8",
                datatype: "json",
                complete: OnComplete
            });
        })
    }


    btnsavepdf.addEventListener('click', function () {
       
       
        savePdf();
    });
})

Additional Notes

• Ensure you have the necessary permissions to write to the directory.
• Customize the HtmlContent with your desired HTML and CSS.
• You can also load HTML from a body or desired element like div  <div name ='pdfcontent'>content...</div>.