जावास्क्रिप्ट का उपयोग करके पीडीएफ के रूप में एक HTML पेज में एक div डाउनलोड करें

Question

मेरे पास "सामग्री" के रूप में आईडी के साथ एक सामग्री div है। कंटेंट डिव में मेरे कुछ ग्राफ और कुछ टेबल हैं। जब उपयोगकर्ता डाउनलोड बटन पर क्लिक करता है तो मैं उस डिव को एक पीडीएफ के रूप में डाउनलोड करना चाहता हूं। वहाँ एक तरीका है कि जावास्क्रिप्ट या jQuery का उपयोग कर रहा है?

Comments

code.google.com/p/jspdf सबसे अच्छा पुस्तकालय है जिसके बारे में मुझे पता है कि यह क्या कर सकता है।

— एल्विनअर्सेल्वन

विशिष्ट div में सामग्री डाउनलोड करने के लिए मैं jsPDF का उपयोग कैसे कर सकता हूं? मैं अपनी साइट के उदाहरणों में जो देख रहा हूँ, वह नहीं किया जा सकता।

— मिधुन मैथ्यू

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

जावास्क्रिप्ट:

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');
});

Comments

मुझे यहां समस्या है। मैंने यहाँ जो css जोड़ा है, वह pdf फ़ाइल में लागू नहीं हो रहा है। इसके अलावा मेरे पास कुछ रेखांकन भी हैं..तो pdf में नहीं आ रहे हैं। मुझे उन लोगों को प्राप्त करने के लिए क्या करना चाहिए?

— मिधुन मैथ्यू

jsPDF तालिकाओं को ठीक से प्रारूपित नहीं करता है, यह सिर्फ td / th को डिस्प्ले के रूप में व्याख्या करता है: ब्लॉक;

— डेव

उपरोक्त कोड का उपयोग करके हम केवल एक बार एक पीडीएफ बनाने में सक्षम हो सकते हैं। लेकिन दूसरी बार यह काम नहीं कर रहा है। इसे काम करने के लिए, @ kristof-feys द्वारा इस उत्तर को जांचें, हमें docक्लिक फ़ंक्शन के अंदर चर घोषित करने की आवश्यकता है ।

— महेन्द्रन सकरई

यह अच्छा है, बस शर्म की बात है कि सीएसएस प्रदान नहीं किया जाता है: /

— निकोलस

मुझे एन्कोडिंग समस्या का सामना करना पड़ा

— ईएमए

Answer 2

Jspdf और html2canvas<div class='html-content'>....</div> का उपयोग करके शैलियों के साथ पीडीएफ के रूप में सामग्री डाउनलोड की जा सकती है ।

आपको दोनों जेएस पुस्तकालयों को संदर्भित करने की आवश्यकता है,

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

रेफरी: एचटीएमएल कैनवास और jspdf से पीडीएफ जनन ।

हो सकता है यह किसी की मदद करेगा।

Comments

यह मेरे लिए बहुत अच्छा काम किया, धन्यवाद। यह सभी स्टाइल को संरक्षित करता है, लेकिन इसकी कुछ सीमाएं हैं (पीडीएफ को एक छवि के रूप में बनाता है ताकि यह खोज योग्य न हो, ऐसा लगता है कि यह भी धुंधला हो सकता है)।

— jramm

यदि पेज की आधी सामग्री एक पृष्ठ पर फिट होने में विफल रहती है, तो पेज को कैसे सेट करें?

— शेखर शेटे

मेरे लिए बहुत अच्छा काम किया। केवल समस्या यह थी कि मेरे कुछ SVG आइकनों का प्रतिपादन नहीं किया गया था!

— फेलिप एन मौरा

Answer 3

आपके समाधान के लिए html को बैक-एंड सर्वर पर html पास करने के लिए कुछ ajax विधि की आवश्यकता होती है जिसमें HTML से पीडीएफ सुविधा होती है और फिर ब्राउज़र में उत्पन्न पीडीएफ आउटपुट को वापस करता है।

पहले क्लाइंट साइड कोड सेट करते हैं, हम 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;

 

Comments

"एक htmltopdf सुविधा" द्वारा यू का क्या मतलब है ??

— मिधुन मैथ्यू

क्या यह उसी url को संदर्भित करने के लिए ठीक है या क्या मुझे इसे बदलना चाहिए?

— मिधुन मैथ्यू

आपको थोड़ा अलग यूआरएल की आवश्यकता होगी ताकि आप दोनों सामग्री के बीच अंतर कर सकें

— DevZer0

वह url कैसा होना चाहिए? क्या आप एक उदाहरण दे सकते हैं??

— मिधुन मैथ्यू

यदि सीएसएस से जुड़ा हुआ है तो आपको खराब कर दिया जाएगा क्योंकि आपके बैक-एंड प्रोग्राम को यह नहीं पता होगा कि शैलियों को कहां खोजना है जब तक कि यह सीएसएस फ़ाइल को हड़प नहीं सकता है और फाइल के भीतर से शैलियों को लागू कर सकता है।

— TheRealChx101

Answer 4

AFAIK वहाँ कोई देशी jquery फ़ंक्शन है जो ऐसा करता है। सबसे अच्छा विकल्प सर्वर पर रूपांतरण की प्रक्रिया करना होगा। आप यह कैसे करते हैं यह इस बात पर निर्भर करता है कि आप किस भाषा का उपयोग कर रहे हैं (.net, php आदि)। आप रूपांतरण को संभालने वाले फ़ंक्शन को div की सामग्री को पास कर सकते हैं, जो उपयोगकर्ता को एक पीडीएफ लौटाएगा।

Answer 5

हां, JS में PDF को Div के रूप में कैप्चर करना संभव है। आप https://grabz.it द्वारा प्रदान किए गए समाधान की जांच कर सकते हैं । उनके पास अच्छी और साफ जावास्क्रिप्ट एपीआई है जो आपको एक HTML सामग्री जैसे div या स्पैन की सामग्री को कैप्चर करने की अनुमति देगा।

तो, यो आपको इसकी आवश्यकता होगी और ऐप + कुंजी और मुफ्त एसडीके का उपयोग करें । इसका उपयोग निम्नानुसार है:

मान लीजिए कि आपके पास एक 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- स्क्रीनशॉट तंत्र के लिए कर सकते हैं, कृपया उन्हें यहां देखें

Comments

मुझे लगता है कि आप Grabz.it के साथ केवल 1,000 मुफ्त कैप्चर और 100 मुफ्त "स्क्रैप" प्राप्त कर सकते हैं। जब तक आप इसके लिए भुगतान करने को तैयार न हों, तब तक कोई स्थायी समाधान नहीं।

— BrettC