when export grid view have Arabic data to pdf format using JQUERY it downloaded but error open pdf failed ?

Question

I work on asp.net app . I face issue when export grid view with data to pdf it downloaded but

finally not open grid view have Arabic data when inspect browser to check error i can't found

any error I work on asp.net app . I face issue when export grid view with data to pdf it

downloaded but finally not open grid view have Arabic data when inspect browser to check error

i can't found any error

full code jQuery to export to pdf

$.each(Result.d, function (key, value) {
                if (value.Status == "1") {
                    $("#gvResults tbody").empty();
                    /*   $("#gvResults th").empty();*/
                    if (value.P_REQ_CURInfo != null) {
                        if (value.P_REQ_CURInfo.length > 0) {
                            var rowNo = 0;
                            for (var i in value.P_REQ_CURInfo) {
                                if (rowNo == 0) {
                                    /*                    $("#gvResults").append("<tr class='card-info card-header text-white text-center'><th>م</th><th>رقم النموذج</th><th>تاريخ التقييم</th><th>رقم مدنى مقييم العقار</th><th>اسم مقييم العقار</th><th>المنطقة </th><th>القطعة</th><th> القسيمة </th> <th>فئة العقار </th><th>مساحة العقار </th><th> وصف فئة العقار </th><th> اجمالى قيمة الارض والبناء </th><th>القيمة السوقية بالارقام </th></tr>");*/
                                    $("#gvResults").append("<tr class='card-info card-header text-white text-center'><th>م</th><th>رقم النموذج</th><th>تاريخ التقييم</th><th>رقم مدنى مقييم العقار</th><th>اسم مقييم العقار</th><th>المنطقة </th><th>القطعة</th><th> القسيمة </th> <th>فئة العقار </th><th>مساحة العقار </th><th> اجمالى قيمة الارض والبناء </th><th>القيمة السوقية بالارقام </th></tr>");
                                }
                                var row = "<tbody><tr align='center' id='tr" + value.P_REQ_CURInfo[i].REQ_ID + "' class='record clickable-row'> " + "<td class='tdCount'>" +
                                    (rowNo + 1) + "</td><td>" +
                                    value.P_REQ_CURInfo[i].REQ_ID + "</td> <td>" +
                                    value.P_REQ_CURInfo[i].APPR_DATE + "</td> <td>" +
                                    value.P_REQ_CURInfo[i].BROKER_CIVIL_ID + "</td> <td>" +
                                    value.P_REQ_CURInfo[i].BROKER_NAME + "</td> <td>" +
                                    value.P_REQ_CURInfo[i].APPR_AREA_ID_DESC + "</td> <td>" +
                                    value.P_REQ_CURInfo[i].APPR_AREA_BLOCK_NO + "</td> <td>" +
                                    value.P_REQ_CURInfo[i].APPR_AREA_PLOT + "</td> <td>" +
                                    value.P_REQ_CURInfo[i].APPR_AREA_CAT_DESC + "</td> <td>" +
                                    value.P_REQ_CURInfo[i].APPR_PROPERTY_SPACE + "</td> <td>" +
                                    /*      value.P_REQ_CURInfo[i].APPR_OTHER_AREA_DESC + "</td> <td>" +*/
                                    value.P_REQ_CURInfo[i].APPR_TOTAL_VALUE_LAND_BUILDING + "</td> <td>";
                                row += value.P_REQ_CURInfo[i].APPR_MARKET_VALUE_ESTIMATE + "</td>";
                                row += "</tr></tbody>";
                                row = $(row).hide();
                                $('#gvResults').append($(row));
                                rowNo++;
                                $(row).fadeIn(1000);
                            }
                        }
                    }
                }
                else {
                    ModelSuccessDanger('عفوا !!', value.StatusDesc, '0', null);
                }
            });

     `function GET_RE_APPR_REP_ReportPDF() {
    // Get the data from the GridView
    var $rows = $('#gvResults tbody tr');
    var data = [];

    // Loop through the rows and add the data to the data array
    $rows.each(function () {
        var $cols = $(this).find('td');
        var rowData = [];
        $cols.each(function () {
            rowData.push(encodeURIComponent($(this).text().trim()));
        });
        data.push(rowData);
    });

    // Add a header row
    var headers = [];
    $('#gvResults th').each(function () {
        headers.push(encodeURIComponent($(this).text().trim()));
    });
    data.unshift(headers);

    // Call the downloadPDF function
    downloadPDFDirect(data, "GridViewData");
    }
    function downloadPDFDirect(data, filename) {
    // Convert the data to a JSON string
    var jsonData = JSON.stringify(data);

    // Construct the PDF URL
    var pdfUrl = 'data:application/pdf;base64,' + btoa(jsonData);

    // Create a temporary link element and click it to initiate the download
    var link = document.createElement('a');
    link.setAttribute('href', pdfUrl);
    link.setAttribute('download', filename + '.pdf');
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    }``

Answer 1

Hi @Ahmed Salah,

You can use the html2canvas plugin instead, which will be easier.

 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.22/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>

function GET_RE_APPR_REP_ReportPDF() {         
    html2canvas($('[id*=gvResults]')[0], {
        onrendered: function (canvas) {
            var data = canvas.toDataURL();
            var docDefinition = {
                content: [{
                    image: data,
                    width: 500
                }]
            };
            pdfMake.createPdf(docDefinition).download("GridViewData.pdf");
        }
    });               
}

Best regards,
Lan Huang

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.