Итерация Html2Canvas в таблице HTML - PullRequest
Новая
       16

Итерация Html2Canvas в таблице HTML

0 голосов
/ 27 апреля 2020

Добрый день! У меня есть эта таблица Dynami c, данные которой поступают из базы данных. 

<table class="ui table" style="margin-top: 1em;border:1" id = "tbl">
    <thead>
        <tr>
            <th class="four wide">FirstName</th>
            <th class="four wide">LastName</th>
        </tr>
    </thead>
    <tbody>
        @foreach ($data as $name)
            <tr>
              <td>{!! $name !!} </td> 
            </tr>
        @endforeach    
    </tbody>
</table>

Что я хочу сделать, это получить каждую строку таблицы и скриншот этой строки с использованием HTML2Canvas, а затем изображение будет сохранено в JSPDF. У меня есть только этот код html2canvas, который захватывает всю таблицу. 

    var w = document.getElementById("tbl").offsetWidth;
    var h = document.getElementById("tbl").offsetHeight;
    html2canvas(document.getElementById("tbl"), {
      dpi: 300, // Set to 300 DPI
      scale: 3, // Adjusts your resolution
      onrendered: function(canvas) {
        var img = canvas.toDataURL("image/jpeg", 1);
        var doc = new jsPDF('P', 'px', [w, h]);
        doc.addImage(img, 'JPEG', 15, 40, w, h);
        doc.save('sample-file.pdf');
      }
    });

Как я смогу это сделать? У меня есть итерация от html таблицы до javascript, но постоянно получаю ошибку. Вот код итерации. 

for (let row of tbl.rows) {
 for(let cell of row.cells) {
   console.log(cell.innerText)
 }
}

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

...