如何使用jsPdf为汉字设置正确的字体

时间:2019-02-19 05:53:48

标签: javascript jspdf

在html文件中显示的文本是正确的,但是在转换为pdf时遇到字体问题时,如何为jsPdf导入简体中文字体 我必须导入中文字体的js吗?以及如何设置字体。

<script type="text/javascript" src="http://code.jquery.com/jquery-git.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script src="https://unpkg.com/jspdf@latest/dist/jspdf.min.js"></script>
<script src="https://unpkg.com/jspdf@latest/dist/jspdf.customfonts.min.js"></script>
<script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
    var doc = new jsPDF();
	doc.setFont('仿宋');
    var specialElementHandlers = {
        '#editor': function (element, renderer) {
            return true;
        }
    };

    $('#cmd').click(function () {
        doc.fromHTML($('#DivContent').html(), 15, 15, {
            'width': 170,
                'elementHandlers': specialElementHandlers
        });
        doc.save('sample-file.pdf');
    });
</script>
<link href="/Assets/js/libs/js/form/datePicker/skin/WdatePicker.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
<link rel="stylesheet" href="http://bdimg.share.baidu.com/static/api/css/share_style0_16.css?v=8105b07e.css"/>
      .button{
            background: transparent url(/Assets/js/libs/skins/red/form/btn_bg.jpg) repeat scroll 0 0;
            border: 1px solid #cc3428;
            height: 24px;
            line-height: 22px;
            margin-right: 4px;
            min-width: 60px;
            color: White;
            cursor: pointer;
            background-color: #B91516;
        }
  </style>
<html>
<body>
<button id="cmd">Generate PDF</button>
<div id="DivContent" style="TEXT-ALIGN: justify; text-justify: inter-ideograph; background: url('/Assets/img/content/bg_watermark.png') transparent;background-position-x: center;background-repeat-x: no-repeat;">
<div style="LINE-HEIGHT: 25pt;TEXT-ALIGN:justify;TEXT-JUSTIFY:inter-ideograph; TEXT-INDENT: 30pt; MARGIN: 0.5pt 0cm;FONT-FAMILY: 仿宋; FONT-SIZE: 16pt;">杭州市上城区人民法院</div>
</div>
</body>
</html>

0 个答案:

没有答案