Завантажте div на HTML-сторінці у форматі pdf за допомогою JavaScript

У мене є вміст div з ідентифікатором як "вміст". У div div у мене є кілька графіків та таблиць. Я хочу завантажити цей div у форматі PDF, коли користувач натискає кнопку завантаження. Чи є спосіб зробити це за допомогою JavaScript або jQuery?

Ви можете зробити це за допомогою 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');
});

Вміст усередині a <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 в 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.

Так, у JS можна записати div як PDF-файли. Ви можете перевірити рішення, яке надає 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.

Це все. Тепер, коли сторінку завантажено, знімок екрана буде створено в тому ж місці, що і тег скрипта, який буде містити весь вміст div і більше нічого.

Інші налаштування та налаштування, які ви можете зробити за допомогою механізму скріншоту div, перегляньте їх тут