PDF не отображать заполнить данные JSON usng jspdf - PullRequest
Новая
       15

PDF не отображать заполнить данные JSON usng jspdf

1 голос
/ 13 июня 2019

Данные json не отображаются в pdf с использованием jsPDF, возможно, придется использовать jspdf с автоматическим изменением, но эта таблица переопределена в pdf, но я хочу, чтобы печать данных в таблице и захват с помощью jspdf дали мне какое-либо решение !!!!

мой файл TS 

this.invoiceservice.invoiceselectdata(id).subscribe(data =>{
this.invoice = data;
let datas = document.getElementById('contentToConvert');
        html2canvas(datas).then(canvas => {
        let imgWidth = 190;  
          let imgHeight = 180;
        let pdf = new jsPDF('p', 'mm', 'a4');
     const contentDataURL = canvas.toDataURL("iamges/jpeg");
     var position = 20;
     pdf.addImage(contentDataURL, 'JPG', 10, position, imgWidth, 
     imgHeight);

        pdf.save(this.invoice_id + '.pdf');

мой HTML-файл

в html файле есть заполненные данные JSON, которые не отображаются в pdf Экран захвата PDF, но данные JSON не распечатаны в формате PDF и не показывают результат 

 <div class="containers">
 <div id="contentToConvert">
    <div class="row">
        <div class="col-lg-6">
            <img src="./assets/image/logos.png" class="pl-3" width="85%" 
             />

        </div>
        <div class="col-lg-6">
            <h2 class="invoice">INVOICE</h2>
            <table class="table table-bordered" id="my-table">
                <tr>
                    <td>
                        IEC Number
                    </td>
                    <td>
                        123456789
                    </td>
                </tr>

                <tr>
                    <td>
                        Invoice Number
                    </td>
                    <td>
                        {{this.invoice_id}}
                    </td>
                </tr>

                <tr>
                    <td>
                        Invoice Date
                    </td>
                    <td>
                        {{this.date}}
                    </td>
                </tr>
            </table>
        </div>
    </div>

    <table class="table table-bordered" id="my-table1">
        <tr>
            <th>Total</th>
            <th>Billing Address</th>
            <th>Subject</th>
        </tr>

        <tr>
            <td>{{this.total_amount}}</td>
            <td>{{this.client_name}},{{this.client_address}}
            </td>
            <td>
                <h5>{{this.subject}}</h5>
            </td>
        </tr>

    </table>

    <div class="mt-4">
        <b>
  <h5>Dear Sir,<br>
  Following are the details for the charge of website development project 
that need to credit,</h5>
  </b>
    </div>

    <table class="table table-bordered mt-4" id="my-table2">
        <tr>
            <th>SR.</th>
            <th>SPECIFICATION</th>
            <th>AMOUNT({{this.currency_name}})</th>
        </tr>

        <tr *ngFor="let item of iteams , let i=index">
            <td>{{i+1}}</td>
            <td>
                {{item.item_name}}
            </td>
            <td>
                {{item.price }}
            </td>
        </tr>
        <tr>
            <td colspan=2>
                <h6><b>Total</b></h6>
            </td>
            <td>
                {{this.currency_symbol}}{{this.total_amount}}
            </td>
        </tr>
     </table>


    <div class="mt-4">

        <b>
                  <h5>Notes:<br>
                  All Quotes given before, for the said items, stands 
revised as above.<br>
                  We hope that the above suits your requirement, 
anticipating a favorable response continuing to provide you, of our<br>
                  services, we remain.</h5>
             </b>

    </div>

    <div class="mt-3">
        <b>
              <h5>Yours truly,<br>
              </h5>
           </b>
    </div>
</div>
</div>

Заранее спасибо !!!

...