Генерация PDF из HTML-страницы с использованием JavaScript или библиотеки Jquery или плагина - PullRequest
Новая
       7

Генерация PDF из HTML-страницы с использованием JavaScript или библиотеки Jquery или плагина

0 голосов
/ 02 ноября 2018

Я пытаюсь преобразовать HTML-страницу в PDF, который содержит изображения и некоторые таблицы данных, которые спроектированы с использованием стилей CSS. Я пробовал библиотеки JSPDF и html2canvas, но изображения не отображаются в PDF, а также они не позволяют мне создавать PDF на длинных страницах, поскольку мой html является динамическим и может вырасти до четырех страниц. Я искал так много форумов онлайн, но не смог найти ничего, что решило бы мою проблему. Сайт, на котором я работаю, является сайтом shopify. Так что любая подсказка с этой ссылкой может помочь. Любая помощь будет очень благодарна. Спасибо

Ответы [ 3 ]

0 голосов
/ 02 ноября 2018

Преобразуйте содержимое вашего HTML в изображение, а затем преобразуйте его в PDF:

https://html2canvas.hertzen.com/

https://parall.ax/products/jspdf

                  
    var doc = new jsPDF();
    var specialElementHandlers = {
        '': function (element, renderer) {
            return true;
        }
    };

    $('#btn-download').click(function () {
        html2canvas($('#container').html).then(function (canvas) { DownloadPDF(canvas) });
    });

    function DownloadPDF(canvas) {
        var imgData = canvas.toDataURL(
                   'image/png');
        var doc = new jsPDF('p', 'mm');
        doc.addImage(imgData, 'PNG', 10, 10, parseInt($(canvas).attr('width')) / 9, parseInt($(canvas).attr('height')) / 9);
        doc.save('name.pdf');
    }
        
#test
{
  width: 500px;
  height : 500px;
  background-image: url("https://www.wikichat.fr/wp-content/uploads/sites/2/comment-soigner-une-plaie-dun-chat.jpg");
  background-size: contain;
  background-repeat: no-repeat;
}
#btn-download
{
  cursor:pointer;
  position:fixed;
}
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.1/jspdf.min.js"></script>
    <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
  </head>
  <body>
    <div id="btn-download">Download</div>
    <br/>
    <div id="container">
      <div id="test">
      </div>
    </div>
  </body>
</html>
0 голосов
/ 04 февраля 2019

Я использовал API, поддерживающий вектор * , замену устаревшего addHtml() из jsPDF для моего проекта, и для меня этого достаточно. Проверьте их пример кода по ссылке там. Я использую html2canvas 1.0.0-alpha.11. Старая версия может не работать. Нечто подобное должно делать. 

<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="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script>
    function download() {
        let pdf = new jsPDF('p', 'pt', 'a3');
        pdf.html(document.getElementById('idName'), {
            callback: function (pdf) {
                pdf.save('test.pdf');
            }
        });
    }
</script>
0 голосов
/ 02 ноября 2018

проверьте по этой ссылке, может ли она быть полезной для вас на codepen

https://codepen.io/massimo-cassandro/pen/qOrJNx

<html>
  <!-- donot consider this i put it just to allow the link-->
<html/>
...