JsPDF लाइब्रेरी का सही उपयोग कैसे करें

Question 1

मैं अपने कुछ डिव को पीडीएफ में बदलना चाहता हूं और मैंने jsPDF लाइब्रेरी की कोशिश की है, लेकिन कोई सफलता नहीं मिली। ऐसा लगता है कि मुझे समझ नहीं आ रहा है कि लाइब्रेरी का काम करने के लिए मुझे क्या आयात करना होगा। मैं उदाहरणों के माध्यम से गया हूँ और मैं अभी भी इसका पता नहीं लगा सकता। मैंने निम्नलिखित कोशिश की है:

<script type="text/javascript" src="js/jspdf.min.js"></script>

JQuery और के बाद:

$("#html2pdf").on('click', function(){
    var doc = new jsPDF();
    doc.fromHTML($('body').get(0), 15, 15, {
        'width': 170
    });
    console.log(doc);
});

परीक्षण के प्रयोजनों के लिए लेकिन मुझे प्राप्त होता है:

"Cannot read property '#smdadminbar' of undefined"

#smdadminbarशरीर से पहला तलाक कहां है

Question 2

आप html से pdf का उपयोग इस प्रकार कर सकते हैं,

चरण 1: शीर्ष लेख को हेडर में जोड़ें

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>

या स्थानीय रूप से डाउनलोड करें

चरण 2: jsPDF कोड निष्पादित करने के लिए HTML स्क्रिप्ट जोड़ें

पहचानकर्ता को पास करने के लिए इसे कस्टमाइज़ करें या केवल आपकी पहचान के लिए #content बदलें।

 <script>
    function demoFromHTML() {
        var pdf = new jsPDF('p', 'pt', 'letter');
        // source can be HTML-formatted string, or a reference
        // to an actual DOM element from which the text will be scraped.
        source = $('#content')[0];

        // we support special element handlers. Register them with jQuery-style 
        // ID selector for either ID or node name. ("#iAmID", "div", "span" etc.)
        // There is no support for any other type of selectors 
        // (class, of compound) at this time.
        specialElementHandlers = {
            // element with id of "bypass" - jQuery style selector
            '#bypassme': function (element, renderer) {
                // true = "handled elsewhere, bypass text extraction"
                return true
            }
        };
        margins = {
            top: 80,
            bottom: 60,
            left: 40,
            width: 522
        };
        // all coords and widths are in jsPDF instance's declared units
        // 'inches' in this case
        pdf.fromHTML(
            source, // HTML string or DOM elem ref.
            margins.left, // x coord
            margins.top, { // y coord
                'width': margins.width, // max width of content on PDF
                'elementHandlers': specialElementHandlers
            },

            function (dispose) {
                // dispose: object with X, Y of the last line add to the PDF 
                //          this allow the insertion of new lines after html
                pdf.save('Test.pdf');
            }, margins
        );
    }
</script>

चरण 3: अपने शरीर की सामग्री जोड़ें

<a href="javascript:demoFromHTML()" class="button">Run Code</a>
<div id="content">
    <h1>  
        We support special element handlers. Register them with jQuery-style.
    </h1>
</div>

मूल ट्यूटोरियल देखें

एक कामकाजी बेला देखें

Question 3

आपको केवल इस लिंक की जरूरत है jspdf.min.js

इसमें सब कुछ है।

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>

Question 4

यह आखिरकार मेरे लिए क्या किया (और एक विवाद चलाता है):

function onClick() {
  var pdf = new jsPDF('p', 'pt', 'letter');
  pdf.canvas.height = 72 * 11;
  pdf.canvas.width = 72 * 8.5;

  pdf.fromHTML(document.body);

  pdf.save('test.pdf');
};

var element = document.getElementById("clickbind");
element.addEventListener("click", onClick);

<h1>Dsdas</h1>

<a id="clickbind" href="#">Click</a>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.min.js"></script>

स्निपेट का विस्तार करें

और नॉकआउट जेएस झुकाव के लिए, थोड़ा बाध्यकारी:

ko.bindingHandlers.generatePDF = {
    init: function(element) {

        function onClick() {
            var pdf = new jsPDF('p', 'pt', 'letter');
            pdf.canvas.height = 72 * 11;
            pdf.canvas.width = 72 * 8.5;

            pdf.fromHTML(document.body);

            pdf.save('test.pdf');                    
        };

        element.addEventListener("click", onClick);
    }
};

Question 5

क्या आपको jspdf.plugin.from_html.js लाइब्रेरी का उपयोग नहीं करना चाहिए? मुख्य पुस्तकालय (jspdf.js) के अलावा, आपको "विशेष संचालन" (जैसे jspdf.plugin.addimage.js छवियों का उपयोग करने के लिए) के लिए अन्य पुस्तकालयों का उपयोग करना होगा। Https://github.com/MrRio/jsPDF की जाँच करें ।

Question 6

सबसे पहले, आपको एक हैंडलर बनाना होगा।

var specialElementHandlers = {
    '#editor': function(element, renderer){
        return true;
    }
};

फिर इस कोड को क्लिक इवेंट में लिखें:

doc.fromHTML($('body').get(0), 15, 15, {
    'width': 170, 
    'elementHandlers': specialElementHandlers
        });

var pdfOutput = doc.output();
            console.log(">>>"+pdfOutput );

यह मानते हुए कि आप पहले से ही डॉक चर घोषित कर चुके हैं। और फिर आपने फ़ाइल-प्लगिन का उपयोग करके इस पीडीएफ फाइल को सहेज लिया है।

Question 7

नवीनतम संस्करण (1.5.3) के अनुसार fromHTML()अब कोई विधि नहीं है। इसके बजाय आपको jsPDF HTML प्लगइन का उपयोग करना चाहिए, देखें: https://rawgit.com/MrRio/jsPDF/master/docs/module-html.html#~html

इसके ठीक से काम करने के लिए आपको html2canvas लाइब्रेरी को भी जोड़ना होगा: https://github.com/niklasvh/html2canvas

JS (API डॉक्स से):

var doc = new jsPDF();   

doc.html(document.body, {
   callback: function (doc) {
     doc.save();
   }
});

आप DOM तत्व के संदर्भ में भी HTML स्ट्रिंग प्रदान कर सकते हैं।

Question 8

यह कैसे लागू होता है?

function onClick() {
  var pdf = new jsPDF('p', 'pt', 'letter');
  pdf.canvas.height = 72 * 11;
  pdf.canvas.width = 72 * 8.5;

  pdf.fromHTML(document.body);

  pdf.save('test.pdf');
};

var element = document.getElementById("clickbind");
element.addEventListener("click", onClick);

<h1>Dsdas</h1>

<a id="clickbind" href="#">Click</a>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.min.js"></script>

स्निपेट का विस्तार करें