jsPDF HTML метод всегда терпит неудачу - PullRequest
Новая
       2

jsPDF HTML метод всегда терпит неудачу

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

Я пытаюсь сгенерировать PDF-файл из HTML-элемента (div) с некоторым содержанием: 

<div id = "toPDF">
<table >
  <thead>
    <tr>
      <th>Destination</th>
      <th>Start Date</th>
      <th>End Date</th>
      <th>Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Dest1</td>
      <td>Date1</td>
      <td>Date2</td>
      <td>Comment1</td>
    </tr>
  </tbody>
</table>
</div>

.
.
.
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/" crossorigin="anonymous"></script>
<script src="app.js"></script>

Я использую следующий JavaScript: 

window.html2canvas = html2canvas;

var elem = document.getElementById('toPDF');

pdf.html(elem,
    {
        x: 20,
        y: 140,
        callback:
            function (pdf) {
                pdf.text(80, 230, "Test Text");
                var iframe = document.createElement('iframe');
                iframe.setAttribute('style', 'position:absolute;top:0;right:0;height:100%; width:600px');
                document.body.appendChild(iframe);
                iframe.src = pdf.output('datauristring');
            }
    });

В итоговом PDF-файле отображается «Тестовый текст», но нет следа HTML-таблицы. Если я удалю «Тестовый текст», выходной PDF будет пустым. В консоли браузера отображается следующая ошибка: 

TypeError: Argument 1 of CanvasRenderingContext2D.drawImage could not be converted to any of: HTMLImageElement, SVGImageElement, HTMLCanvasElement, HTMLVideoElement, ImageBitmap

Я пробовал разные варианты. Я прошу рабочий пример jsPDF.html ().

1 Ответ

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

Скорее всего, проблема в используемой вами версии html2canvas.html2canvas 0.4.1 не собирается работать.Это должно быть html2canvas 1.0.0-alpha.11 или выше.Однако текущая версия html2canvas 1.0.0-rc.3 тоже не работает, она также дает мне пустую страницу.По крайней мере, html2canvas 1.0.0-alpha.12 все еще работает для меня. 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" 
        integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/"
        crossorigin="anonymous"></script>
<script src="~/lib/html2canvas/html2canvas.min.js"></script>
<!-- html2canvas 1.0.0-alpha.11 or html2canvas 1.0.0-alpha.12 is needed -->
<script>
    function download() {
        let pdf = new jsPDF('p', 'pt', 'a4');

        pdf.html(document.getElementById('toPDF'), {
            callback: function () {
                window.open(pdf.output('bloburl'));
            }
        });
    }
</script>

Обновление: последняя версия, которая работает для меня, является html2canvas v1.0.0-rc.1

...