Convert html page (with jquery ajax calls) to pdf

Question

I am trying to save html page to pdf using evopdf htmlToPdfConverter. The html page is using jquery ajax to get the data from web api. Any static html content in the html page is printed in the pdf but the tables showing the data from the api are not getting populated. The url in the code below opens correctly and loads the data from api when opened in browser.

Here is the code in the Console Application that I created that references the URL and should save the html page as pdf.

//console application
  HtmlToPdfConverter htmlToPdfConverter = new HtmlToPdfConverter(); // cP7t/+rv/+zo6Oj/5/Hv/+zu8e7t8ebm5ub/7w== // HpCAkYKCkYKDiZGIn4GRgoCfgIOfiIiIiJGB
        htmlToPdfConverter.LicenseKey = "HpCxxxxxxxxxxxxxxxxxxx";          
        htmlToPdfConverter.MediaType = "print";
        htmlToPdfConverter.HtmlViewerWidth = 1024;
        htmlToPdfConverter.PdfDocumentOptions.SinglePage = true; // SinglePagePdf.Checked;
        htmlToPdfConverter.PdfDocumentOptions.PdfPageOrientation = PdfPageOrientation.Landscape;
        htmlToPdfConverter.JavaScriptEnabled = true;
        htmlToPdfConverter.ConversionDelay = 15;
        string url = "https://localhost:44354/trm/test.html?pid=231";
        string fileName = @"C:\QSaves\test.pdf";         
        htmlToPdfConverter.ConvertUrlToFile(url, fileName);

/////////////////////////////////////////
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        function main() {
            $.ajax({
                url: 'api/csheet/?ID=' + 10,

                type: 'get',
                dataType: 'json',                    
                success: function (data) {
                   
                    $('#CTable').removeClass('w3-hide');
                    var tbl = $("#CompanyTable").dataTable({
                        destroy: true,
                        searching: false,

                        fixedHeader: {
                            header: true,
                            footer: true
                        },
                        data: data.Items,
                        sScrollX: true,
                        scrollH: true,
                        sScrollXInner: '100%',
                        processing: true,
                        bPaginate: false,                            
                        dom: 'Bfrtip',   
                        columns: [
                            {
                                'data': 'Name',
                            },
                            
                        ]
                    });
                   
                }
            });
        }
         

        main();
    });
   
</script>

Answer 1

Your code shows the hint why it's not printing the table data.

You have document ready function which will init as soon its ready and then inside this function the Ajax will call API to load the data and populate it inside the table. Please modify the Ajax request to call in sync mode. By default Ajax requests are async that means it will call the API and will execute the further code before populating the table data.

Refer this doc for more better understanding about ajax request calls: AJAX Request Calls

Do modify your ajax request to sync mode and then at finally call function to create the PDF.

Right now its working as below:

• Page load
• Document Ready Function get called
• Ajax calls the API in async mode and executes further code which executes the PDF creation code before Ajax request populates the table with data, and thus you are getting PDF with empty table data.

How to get it correct:

• Page load
• Document ready function get called
• Ajax calls the API in sync mode and executes it.
• Add PDF generation code after the AJAX calls finish its data population to table.