HTML sayfasındaki bir div dosyasını javascript kullanarak pdf olarak indirin

"İçerik" kimliğine sahip bir içerik div var. Content div'de bazı grafikler ve bazı tablolar var. Kullanıcı indirme düğmesine tıkladığında bu div'i pdf olarak indirmek istiyorum. Bunu javascript veya jQuery kullanarak yapmanın bir yolu var mı?

JsPDF kullanarak yapabilirsiniz

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 içindeki içerik jspdf & html2canvas<div class='html-content'>....</div> kullanılarak stillerle pdf olarak indirilebilir .

Her iki js kitaplığına da başvurmanız gerekir,

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

Ardından aşağıdaki işlevi arayın,

//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: html canvas ve jspdf'den pdf oluşturma .

Belki bu birine yardım edecek.

Çözümünüz, html'yi pdf'ye html olan bir arka uç sunucuya geçirmek ve ardından oluşturulan pdf çıktısını tarayıcıya geri döndürmek için bazı ajax yöntemlerini gerektirir.

İlk önce istemci tarafı kodunu ayarlayarak, jquery kodunu şu şekilde kuracağız:

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

Ardından html2pdf oluşturma komut dosyasındaki verileri aşağıdaki gibi durdurun

   $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, bunu yapan yerel jquery işlevi yoktur. En iyi seçenek, dönüştürmeyi sunucuda işlemek olacaktır. Bunu nasıl yapacağınız, hangi dili kullandığınıza bağlıdır (.net, php vb.). Div'in içeriğini, dönüşümü gerçekleştiren işleve aktarabilirsiniz, bu da kullanıcıya bir pdf döndürür.

Evet, div'i JS'de PDF olarak yakalamak mümkündür. Https://grabz.it tarafından sağlanan çözümü kontrol edebilirsiniz. . Bir div veya a span gibi tek bir HTML öğesinin içeriğini yakalamanıza olanak tanıyan güzel ve temiz JavaScript API'ye sahiptirler.

Yani, onu kullanırsanız ihtiyacınız olacak ve uygulama + anahtar ve ücretsiz SDK . Kullanımı şu şekildedir:

Diyelim ki bir HTML'niz var:

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

Özellik kimliği altında olanı yakalamak için yapmanız gerekenler:

//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.htmlHedef URL'nizle ve #featureCSS seçicinize göre değiştirmeniz gerekir .

Bu kadar. Şimdi, sayfa yüklendiğinde, komut dosyası etiketiyle aynı konumda bir resim ekran görüntüsü oluşturulacak ve bu ekran görüntüsü, div özelliklerinin tüm içeriğini içerecek ve başka hiçbir şey içermeyecektir.

Div-ekran görüntüsü mekanizmasına yapabileceğiniz diğer yapılandırma ve özelleştirmelerdir, lütfen buradan kontrol edin