Create Pdf file from web page and send as mail Attachment

 

Send a PDF generated from html2pdf as Mail Attachment in C# code, using html2pdf , Ajax 

 Html2pdf js script generate pdf from Html element  

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 EmailDataModel
    {
        public string PDFBase64 { get; set; }
        public string FileName { get; set; }
        public string fromemailid { get; set; }
        public string toemailid { get; set; }
        public string Subject { get; set; }
        public string message { get; set; }

        
    }

Step 2: Create a Controller

Create a new controller called EmailController.cs

csharp

     public ActionResult Email()
        {
           
            return View();
        }

// Ajax Call from srcipt

    public JsonResult Getfile(EmailDataModel edata)
        {

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

 	sendmail(bytes ,edata);

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

 public void sendmail(byte[] attachfile, EmailDataModel maildata )
    {
        
     MailMessage MM = new MailMessage();
     Stream stream2 = new MemoryStream(attachfile);
     MM.Attachments.Add(new Attachment(stream2, maildata.FileName+".pdf"));
.... Send mail code here...
    
    }




Step 3: Create a View

HTML



<div name="mycontents">

... my pdf content

<div>
Mail Above html content as pdf attachment
From:     <input type="text" name="fromemailid"/>
To:       <input type="text" name="toemailid"/>
Subject:  <input type="text" name="Subject"/>
Message:  <input type="text" name="message"/>

      <button id="btnsend" class="btn btn-primary btn-xs" >
                   Send Mail
                </button>

<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('btnsend');
   var fromemailid = document.getElementById('fromemailid');
    function sendPdf() {
       
        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 mailcontent = {};

            mailcontent.PDFBase64 = pdfBase64;
            mailcontent.FileName = fileName;
			mailcontent.fromemailid = fromemailid;
			mailcontent.toemailid = toemailid;
			mailcontent.Subject = Subject;
			mailcontent.message = message;

            $.ajax({
                type: "POST",
                url: "/Email/Getfile",
                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>.