Загрузите div на странице HTML в формате pdf, используя javascript

У меня есть div контента с идентификатором "content". В div контента у меня есть несколько графиков и таблиц. Я хочу скачать этот файл в формате PDF, когда пользователь нажимает кнопку загрузки. Есть ли способ сделать это с помощью JavaScript или JQuery?

Источник

5 ответов

Решение

Вы можете сделать это с помощью 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');
});
Источник

Контент внутри <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.

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

Источник

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

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

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

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

   $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;

Источник

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

Источник

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

Также проверьте этот пост. Можно ли создавать PDF с использованием jQuery?

Источник

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

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

Источник
Другие вопросы по тегам