Pobierz element DIV na stronie HTML jako plik PDF za pomocą javascript

Mam element div zawartości z identyfikatorem „content”. W div zawartości mam kilka wykresów i kilka tabel. Chcę pobrać ten element DIV jako plik PDF, gdy użytkownik kliknie przycisk pobierania. Czy jest na to sposób za pomocą javascript lub jQuery?

Możesz to zrobić za pomocą 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');
});

Treść w pliku <div class='html-content'>....</div>można pobrać w formacie PDF ze stylami za pomocą jspdf i html2canvas .

Musisz odwołać się do obu bibliotek 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>

Następnie wywołaj poniżej funkcję,

//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();
    });
}

Ref: generacja pdf z html canvas i jspdf .

Może to komuś pomoże.

Twoje rozwiązanie wymaga metody AJAX, aby przekazać kod HTML do serwera zaplecza, który ma funkcję HTML do PDF, a następnie zwrócić wygenerowane wyjście PDF z powrotem do przeglądarki.

Najpierw ustawiając kod po stronie klienta, ustawimy kod jquery jako

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

Następnie przechwyć dane ze skryptu generującego html2pdf w następujący sposób

   $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, nie ma natywnej funkcji jquery, która to robi. Najlepszą opcją byłoby przetworzenie konwersji na serwerze. Sposób, w jaki to zrobisz, zależy od używanego języka (.net, php itp.). Możesz przekazać zawartość elementu div do funkcji obsługującej konwersję, która zwróci użytkownikowi plik PDF.

Tak, możliwe jest przechwycenie div jako plików PDF w JS. Możesz sprawdzić rozwiązanie dostarczone przez https://grabz.it . Mają ładny i przejrzysty interfejs API JavaScript, który pozwoli ci przechwycić zawartość pojedynczego elementu HTML, takiego jak div lub span.

Tak więc, będziesz go używać, będziesz potrzebować i app + key oraz darmowego SDK . Jego użycie jest następujące:

Powiedzmy, że masz 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>

Aby uchwycić to, co znajduje się pod identyfikatorem funkcji, musisz:

//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>

Musisz zamienić na http://www.example.com/my-page.htmldocelowy adres URL i #featurezgodnie z selektorem CSS.

To wszystko. Teraz po załadowaniu strony zrzut ekranu obrazu zostanie utworzony w tym samym miejscu co tag script, który będzie zawierał całą zawartość elementu div features i nic więcej.

Są inne konfiguracje i dostosowania, które możesz zrobić w mechanizmie zrzutu ekranu div, sprawdź je tutaj