javascript - ng-html-to-pdf-save 不适用于波斯语或阿拉伯语字符

Question

我有一个波斯语内容，想用这个模块打印它，我遇到的问题是它没有以正确的字符格式显示内容。 这就是我在代码中所做的:-

<script type="text/ng-template" id="patient_modal.html">
    <div class="modal-header">
        <button type="button" class="close" ng-click="close_patient()">&times;</button>
        <h4 class="modal-title text-center" id="patient-title">اطلاعات بیمار</h4>
    </div>
    <div class="modal-body" id="patient-body" pdf-save-content="idOne">
        <div class="row" id="print_body">
            <div class="panel panel-info">
                <div class="panel-heading text-center">مشخصات بیمار</div>
                <div class="panel-body">

                        <div class="row form-group">
                            <label class="col-sm-6  col-xs-12 col-form-label">نام :</label>
                            <div class="col-sm-6 col-xs-12">{{p.first_name}}</div>
                        </div>
                    <div class="row form-group">
                        <label class="col-sm-6  col-xs-12 col-form-label">نام خانوادگی :</label>
                        <div class="col-sm-6 col-xs-12">{{p.last_name}}</div>
                    </div>
                    <div class="row form-group">
                        <label class="col-sm-6  col-xs-12 col-form-label">شماره پرونده :</label>
                        <div class="col-sm-6 col-xs-12">{{p.document_id}}</div>
                    </div>
                    <div class="row form-group">
                        <label class="col-sm-6  col-xs-12 col-form-label">بیمه :</label>
                        <div class="col-sm-6 col-xs-12">{{p.insurance}}</div>
                    </div>
                    <div class="row form-group">
                        <label class="col-sm-6  col-xs-12 col-form-label">تعداد مراجعات :</label>
                        <div class="col-sm-6 col-xs-12">{{p.count}}</div>
                    </div>
                    <div class="row form-group">
                        <label class="col-sm-6  col-xs-12 col-form-label">تاریخ آخرین مراجعه :</label>
                        <div class="col-sm-6 col-xs-12">{{p.last_reservation}}</div>
                    </div>


                </div>
            </div>

        <div class="row">
            <div class="table-responsive ">
                <table class="table table-bordered">
                    <thead>
                    <tr>
                        <th class="text-center">تاریخ</th>
                        <th class="text-center"> نوع خدمت</th>
                        <th class="text-center"> مطب</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr data-ng-repeat="row in info">
                        <td class="text-center">{{row.date}}</td>
                        <td class="text-center">{{row.service}}</td>
                        <td class="text-center">{{row.clinic}}</td>
                    </tr>

                    </tbody>
                </table>
            </div>
        </div>
        </div>
        <div class="row">
            <button class="btn btn-info center-block" id="btnSave" pdf-save-button="idOne" pdf-name="someone.pdf">
                <div class=" glyphicon glyphicon-save"></div>
                <label> ذخیره اطلاعات</label>
            </button>
        </div>

    </div>
    <div class="modal-footer">
        <button class="btn btn-info center-block" type="button" ng-click="close_patient()">بستن</button>

    </div>
</script>

这段代码显示的内容是这样的:

但是显示是这样的:

Answer 1

据我所知，问题似乎是顶部和底部的一些内容从上面编写的 HTML 中被 chop 了。 为了解决这个问题，我将整个内容包装在另一个 div 中，并将 pdf-save-content 指令放在上面。如果我不能很好地理解这个问题，请纠正我。 这是相同的代码和 plunker。

<div pdf-save-content="idOne">
    <div class="modal-header">
      <button type="button" class="close" ng-click="close_patient()">×</button>
      <h4 class="modal-title text-center" id="patient-title">اطلاعات بیمار</h4>
    </div>
    <div class="modal-body" id="patient-body">
      <div class="row" id="print_body">
        <div class="panel panel-info">
          <div class="panel-heading text-center">مشخصات بیمار</div>
          <div class="panel-body">
            <div class="row form-group">
              <label class="col-sm-6  col-xs-12 col-form-label">نام :</label>
              <div class="col-sm-6 col-xs-12">{{p.first_name}}</div>
            </div>
            <div class="row form-group">
              <label class="col-sm-6  col-xs-12 col-form-label">نام خانوادگی :</label>
              <div class="col-sm-6 col-xs-12">{{p.last_name}}</div>
            </div>
            <div class="row form-group">
              <label class="col-sm-6  col-xs-12 col-form-label">شماره پرونده :</label>
              <div class="col-sm-6 col-xs-12">{{p.document_id}}</div>
            </div>
            <div class="row form-group">
              <label class="col-sm-6  col-xs-12 col-form-label">بیمه :</label>
              <div class="col-sm-6 col-xs-12">{{p.insurance}}</div>
            </div>
            <div class="row form-group">
              <label class="col-sm-6  col-xs-12 col-form-label">تعداد مراجعات :</label>
              <div class="col-sm-6 col-xs-12">{{p.count}}</div>
            </div>
            <div class="row form-group">
              <label class="col-sm-6  col-xs-12 col-form-label">تاریخ آخرین مراجعه :</label>
              <div class="col-sm-6 col-xs-12">{{p.last_reservation}}</div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="table-responsive ">
            <table class="table table-bordered">
              <thead>
                <tr>
                  <th class="text-center">تاریخ</th>
                  <th class="text-center"> نوع خدمت</th>
                  <th class="text-center"> مطب</th>
                </tr>
              </thead>
              <tbody>
                <tr data-ng-repeat="row in info">
                  <td class="text-center">{{row.date}}</td>
                  <td class="text-center">{{row.service}}</td>
                  <td class="text-center">{{row.clinic}}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
      <div class="row">
        <button class="btn btn-info center-block" pdf-save-button="idOne" pdf-name="someone.pdf" id="btnSave">
          <div class=" glyphicon glyphicon-save"></div>
          <label> ذخیره اطلاعات</label>
        </button>
      </div>
    </div>
    <div class="modal-footer">
      <button class="btn btn-info center-block" type="button" ng-click="close_patient()">بستن</button>
    </div>

  </div>

已经创建了相同的 plunker， https://plnkr.co/edit/G3PDqIRLkWcwes4pw7dR?p=preview

这是来自上面的 plunker 和保存的 PDF 的 HTML 图片。 这是保存的 PDF 的图片。