Создать PDF из HTML в div с помощью Javascript


Answers

Это простое решение. Это работает для меня. Вы можете использовать концепцию печати javascript и просто сохранить это как pdf.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $("#btnPrint").live("click", function () {
            var divContents = $("#dvContainer").html();
            var printWindow = window.open('', '', 'height=400,width=800');
            printWindow.document.write('<html><head><title>DIV Contents</title>');
            printWindow.document.write('</head><body >');
            printWindow.document.write(divContents);
            printWindow.document.write('</body></html>');
            printWindow.document.close();
            printWindow.print();
        });
    </script>
</head>
<body>
    <form id="form1">
    <div id="dvContainer">
        This content needs to be printed.
    </div>
    <input type="button" value="Print Div Contents" id="btnPrint" />
    </form>
</body>
</html>
Question

У меня есть следующий код html:

<!DOCTYPE html>
<html>
    <body>
        <p>don't print this to pdf</p>
        <div id="pdf">
            <p><font size="3" color="red">print this to pdf</font></p>
        </div>
    </body>
</html>

Все, что я хочу сделать, это распечатать в формате PDF все, что находится в div, с идентификатором «pdf». Это должно быть сделано с использованием JavaScript. Затем документ «pdf» должен автоматически загружаться с именем файла «foobar.pdf»,

Я использовал jspdf для этого, но единственной функцией, которую он имеет, является «текст», который принимает только строковые значения. Я хочу отправить HTML в jspdf, а не текст.




если вам нужно загрузить pdf-файл с конкретной страницы, просто добавьте кнопку, подобную этой

<h4 onclick="window.print();"> Print </h4>

используйте window.print (), чтобы распечатать всю страницу, а не только div




Как уже упоминалось, вы должны использовать https://github.com/MrRio/jsPDF и html2canvas . Я также нашел функцию внутри проблем jsPDF, которая автоматически разбивает ваш pdf-файл на несколько страниц ( sources )

function makePDF() {

    var quotes = document.getElementById('container-fluid');

    html2canvas(quotes, {
        onrendered: function(canvas) {

        //! MAKE YOUR PDF
        var pdf = new jsPDF('p', 'pt', 'letter');

        for (var i = 0; i <= quotes.clientHeight/980; i++) {
            //! This is all just html2canvas stuff
            var srcImg  = canvas;
            var sX      = 0;
            var sY      = 980*i; // start 980 pixels down for every new page
            var sWidth  = 900;
            var sHeight = 980;
            var dX      = 0;
            var dY      = 0;
            var dWidth  = 900;
            var dHeight = 980;

            window.onePageCanvas = document.createElement("canvas");
            onePageCanvas.setAttribute('width', 900);
            onePageCanvas.setAttribute('height', 980);
            var ctx = onePageCanvas.getContext('2d');
            // details on this usage of this function: 
            // https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images#Slicing
            ctx.drawImage(srcImg,sX,sY,sWidth,sHeight,dX,dY,dWidth,dHeight);

            // document.body.appendChild(canvas);
            var canvasDataURL = onePageCanvas.toDataURL("image/png", 1.0);

            var width         = onePageCanvas.width;
            var height        = onePageCanvas.clientHeight;

            //! If we're on anything other than the first page,
            // add another page
            if (i > 0) {
                pdf.addPage(612, 791); //8.5" x 11" in pts (in*72)
            }
            //! now we declare that we're working on that page
            pdf.setPage(i+1);
            //! now we add content to that page!
            pdf.addImage(canvasDataURL, 'PNG', 20, 40, (width*.62), (height*.62));

        }
        //! after the for loop is finished running, we save the pdf.
        pdf.save('test.pdf');
    }
  });
}



Чтобы захватить div в формате PDF, вы можете использовать https://grabz.it решение. У него есть JavaScript API, который является простым и гибким и позволит вам захватить содержимое одного HTML-элемента, такого как div или span

Чтобы реализовать его, вам нужно сначала получить ключ приложения и секрет и download (бесплатно) SDK.

И вот пример.

Допустим, у вас есть HTML:

<div id="features">
    <h4>Acme Camera</h4>
    <label>Price</label>$399<br />
    <label>Rating</label>4.5 out of 5
</div>
<p>Cras ut velit sed purus porttitor aliquam. Nulla tristique magna ac libero tempor, ac vestibulum felisvulput ate. Nam ut velit eget
risus porttitor tristique at ac diam. Sed nisi risus, rutrum a metus suscipit, euismod tristique nulla. Etiam venenatis rutrum risus at
blandit. In hac habitasse platea dictumst. Suspendisse potenti. Phasellus eget vehicula felis.</p>

Чтобы захватить то, что находится под идентификатором функции, вам необходимо:

//add the sdk
<script type="text/javascript" src="grabzit.min.js"></script>
<script type="text/javascript">
//login with your key and secret. 
GrabzIt("KEY", "SECRET").ConvertURL("http://www.example.com/my-page.html",
{"target": "#features", "format": "pdf"}).Create();
</script>

Обратите внимание на target: #feature . #feature - это CSS-селектор, как в предыдущем примере. Теперь, когда страница загружена, снимок экрана будет теперь создан в том же месте, что и тег сценария, который будет содержать все содержимое функций div и ничего больше.

Другие настройки и настройки вы можете сделать с помощью механизма div-screenshot, пожалуйста, проверьте их here