Загрузите div в HTML-страницу в формате pdf с помощью javascript

Ответ 1

Вы можете сделать это, используя jsPDF

HTML:

<div id="content">
     <h3>Hello, this is a H3 tag</h3>

    <p>A paragraph</p>
</div>
<div id="editor"></div>
<button id="cmd">generate PDF</button>

JavaScript:

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

$('#cmd').click(function () {
    doc.fromHTML($('#content').html(), 15, 15, {
        'width': 170,
            'elementHandlers': specialElementHandlers
    });
    doc.save('sample-file.pdf');
});

Ответ 2

Для вашего решения требуется некоторый метод ajax для передачи html на внутренний сервер, на котором есть средство html to pdf, а затем возврат вывода в формате pdf, возвращаемого в браузер.

Сначала настройте код на стороне клиента, мы настроим код jquery как

   var options = {
            "url": "/pdf/generate",
            "data": "data=" + $("#content").html(),
            "type": "post",
        }
   $.ajax(options)

Затем перехватите данные из поколения html2pdf script следующим образом

   $html = $_POST['data'];
   $pdf = html2pdf($html);

   header("Content-Type: application/pdf"); //check this is the proper header for pdf
   header("Content-Disposition: attachment; filename='some.pdf';");
   echo $pdf;

Ответ 3

Содержимое внутри <div class='html-content'>....</div> можно загрузить в формате PDF со стилями, используя jspdf & html2canvas.

Вы должны ссылаться на обе библиотеки js,

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>

Затем вызовите функцию ниже,

//Create PDf from HTML...
function CreatePDFfromHTML() {
    var HTML_Width = $(".html-content").width();
    var HTML_Height = $(".html-content").height();
    var top_left_margin = 15;
    var PDF_Width = HTML_Width + (top_left_margin * 2);
    var PDF_Height = (PDF_Width * 1.5) + (top_left_margin * 2);
    var canvas_image_width = HTML_Width;
    var canvas_image_height = HTML_Height;

    var totalPDFPages = Math.ceil(HTML_Height / PDF_Height) - 1;

    html2canvas($(".html-content")[0]).then(function (canvas) {
        var imgData = canvas.toDataURL("image/jpeg", 1.0);
        var pdf = new jsPDF('p', 'pt', [PDF_Width, PDF_Height]);
        pdf.addImage(imgData, 'JPG', top_left_margin, top_left_margin, canvas_image_width, canvas_image_height);
        for (var i = 1; i <= totalPDFPages; i++) { 
            pdf.addPage(PDF_Width, PDF_Height);
            pdf.addImage(imgData, 'JPG', top_left_margin, -(PDF_Height*i)+(top_left_margin*4),canvas_image_width,canvas_image_height);
        }
        pdf.save("Your_PDF_Name.pdf");
        $(".html-content").hide();
    });
}

Ссылка: поколение pdf из HTML-холста и jspdf.

Может быть, это кому-то поможет.

Ответ 4

В jQuery нет такого механизма, но вы можете использовать такие плагины, как http://www.webresourcesdepot.com/create-pdf-files-with-javascript-jspdf/

Также проверьте это сообщение Возможно ли сгенерировать PDF с помощью jQuery?

Ответ 5

AFAIK не существует встроенной функции jquery, которая делает это. Лучший вариант - обработать преобразование на сервере. Как вы это делаете, зависит от того, какой язык вы используете (.net, php и т.д.). Вы можете передать содержимое div функции, которая обрабатывает преобразование, которое вернет PDF пользователю.

Ответ 6

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

Итак, используйте его, и вам понадобится приложение + ключ и бесплатный 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>

Вам нужно заменить http://www.example.com/my-page.html на ваш целевой URL и #feature на ваш селектор CSS.

Это все. Теперь, когда страница загружена, снимок экрана теперь будет создан в том же месте, что и тег script, который будет содержать все содержимое функций div и ничего больше.

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