Question

我正在尝试使用jsPDF从HTML文件创建报告。我尝试了StackOverflow的几种可能性。但是我没有得到预期的结果。在我的pdf中，我得到的是Bangla字体，但它们的排列不正确！例如，在HTML中，我得到了正确的视图，例如这张图片。

但是当我以pdf格式下载此HTML页面时，却没有以html视图格式获取pdf。下载完PDF后的视图就是这样的图片。孟加拉字母未正确组织的地方。

我的HTML和JavaScript代码如下

<!DOCTYPE html>
<html lang="bn" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <link rel="icon" type="image/png" href="../images/fav-icon.ico">
    <title>Internal Resources Division</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">


    <script th:src="@{/js/jspdf.js}" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.0/jspdf.min.js"></script>

    <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
    <script th:src="@{/js/Siyamrupali-normal.js}" type="text/javascript"></script>


    <script>
        function generatePDF() {

            var pdf = new jsPDF(
                'landscape',
                'in',
                [4, 2]
            );
            pdf.addFileToVFS('Siyamrupali.ttf', '[Base64-encoded string of your font]');
            pdf.addFont("Siyamrupali.ttf", "Siyamrupali", "normal");
            pdf.setFont("Siyamrupali");
            pdf.setFontSize(28);
            pdf.internal.scaleFactor = 1;
            pdf.addHTML($('#pdfReport'), function () {
                pdf.save('div.pdf');
            });
        }
    </script>
</head>

<body>
<div class="container">


    <button class="btn btn-primary" id="cmd" onclick="generatePDF()"><i class="fa fa-save"></i> Save as PDF</button>

    <div id="editor"></div>

    <div id="pdfReport" style="background-color: white; padding: 20px">

        <div style="margin: 15px">
            <p style="text-align:center;"><img th:src="@{/images/Seal.500.png}" height="100px" width="100px"/></p>
            <h2 style="text-align: center">Internal Resources Division</h2>
            <h4 style="text-align: center">ACR Summary</h4>
            <span style="text-align: center" th:if="${summary.size() gt 0}">
                <h4 style="text-align: center">Personal Information</h4>
                <h6><b>Full Name :</b> <span th:text="${summary[0].name}"></span></h6>
                <h6><b>Govt. Id  :</b> <span th:text="${summary[0].govtId}"></span></h6>
            </span>
            <br/>

            <table class="table table-striped" border="1">
                <thead>
                <tr>
                    <th style="text-align: center">Year</th>
                    <th style="text-align: center">Assigned From</th>
                    <th style="text-align: center">Assigned To</th>
                    <th style="text-align: center">Marks</th>
                    <th style="text-align: center">First Comment</th>
                    <th style="text-align: center">Second Comment</th>
                    <th style="text-align: center">Remarks</th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="acr : ${summary}">
                    <td th:text="${acr.year}" align="center"></td>
                    <td th:text="${acr.assigned_from}" align="center"></td>
                    <td th:text="${acr.assigned_to}" align="center"></td>
                    <td th:text="${acr.marks != null && acr.marks !=''? acr.marks:acr.marksComment}"
                        align="center"></td>
                    <td th:text="${acr.comment1}" align="center"></td>
                    <td th:text="${acr.comment2}" align="center"></td>
                    <td th:text="${acr.remarks}" align="center"></td>
                </tr>
                </tbody>
            </table>
            <span th:if="${summary.size() lt 1}">
            <p style="text-align: center">No data Available For this Id</p>
        </span>
        </div>
    </div>
</div>
</body>
</html>

我尝试了here中的所有解决方案。但是我没有得到预期的结果。任何帮助将不胜感激。

无法使用jsPDF在pdf中正确显示Bangla Letter

0 个答案: