The ng-html-to-pdf-save doesn't work with persian or arabic char

Question

I have a Persian content and want to print it by using this module, The problem that I have is that it doesn't show the content in correct char format. This is what I did in code:-

<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>

The content that this code show is like this:

But it show like this:

score 1 · Answer 1 · answered Dec 24 '16 at 11:44

As far as I can see, the problem seems to be some content from the top and bottom getting chopped from the HTML written above. To solve the same I wrapped the whole content in another div and placed the pdf-save-content directive on that. Please correct me if I was not able to understand the issue well. Here is the code and plunker for the same.

<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>

Have created plunker of the same, https://plnkr.co/edit/G3PDqIRLkWcwes4pw7dR?p=preview

Here is a picture of HTML from the above plunker and the saved PDF. Here is a picture of the saved PDF.

thank you for the replay but unfortunately as u can see in last image that u shared in the answer the persian char are completely mixed up. in fact the real issue was the persian char. — Ahmad Azad, Dec 24 '16 at 12:14
@AhmadAzad : There seems to be an issue with the library that is used for the same, html2canvas, after googling I found these two links that may be helpful, http://stackoverflow.com/questions/15459072/arabic-encoding-with-html2canvas, http://stackoverflow.com/questions/30555379/html2canvas-image-capturing-issue-with-utf-8-characters — Siddharth Sharma, Dec 24 '16 at 16:31
I did what everything that u said dear @Siddharth but i still get the same result. — Ahmad Azad, Dec 26 '16 at 08:38

The ng-html-to-pdf-save doesn't work with persian or arabic char

1 Answers1