কীভাবে সঠিকভাবে জেএসপিডিএফ লাইব্রেরি ব্যবহার করবেন

Question 1

আমি আমার কিছু ডিভগুলি পিডিএফে রূপান্তর করতে চাই এবং আমি জেএসপিডিএফ লাইব্রেরি চেষ্টা করেছি তবে কোনও সাফল্য নেই। দেখে মনে হচ্ছে লাইব্রেরির কাজটি করার জন্য আমার কী আমদানি করা দরকার তা বুঝতে পারি না। আমি উদাহরণগুলির মধ্যে দিয়েছি এবং আমি এখনও এটি বের করতে পারি না। আমি নিম্নলিখিত চেষ্টা করেছি:

<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

আপনি এইচটিএমএল থেকে নিম্নলিখিত হিসাবে পিডিএফ ব্যবহার করতে পারেন,

পদক্ষেপ 1: নিম্নলিখিত স্ক্রিপ্ট শিরোনামে যুক্ত করুন

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

অথবা স্থানীয়ভাবে ডাউনলোড করুন

পদক্ষেপ 2: জেএসপিডিএফ কোড সম্পাদন করতে এইচটিএমএল স্ক্রিপ্ট যুক্ত করুন

শনাক্তকারীকে পাস করার জন্য এটি কাস্টমাইজ করুন বা আপনার প্রয়োজনীয় সনাক্তকারী হতে # কনটেন্টটি পরিবর্তন করুন।

 <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

সর্বশেষতম সংস্করণ (1.5 .3) অনুসারে fromHTML()এখন আর কোনও পদ্ধতি নেই। পরিবর্তে আপনার জেএসপিডিএফ এইচটিএমএল প্লাগইন ব্যবহার করা উচিত, দেখুন: https://rawgit.com/MrRio/jsPDF/master/docs/module-html.html#~html

সঠিকভাবে কাজ করার জন্য আপনাকে এইচটিএমএল 2 ক্যানভাস লাইব্রেরি যুক্ত করতে হবে: https://github.com/niklasvh/html2canvas

জেএস (এপিআই ডক্স থেকে):

var doc = new jsPDF();   

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

আপনি পাশাপাশি ডিওএম উপাদানটির রেফারেন্সের পরিবর্তে এইচটিএমএল স্ট্রিং সরবরাহ করতে পারেন।

Question 6

আপনি কি jspdf.plugin.from_html.js লাইব্রেরি ব্যবহার করবেন না? মূল গ্রন্থাগার (jspdf.js) ছাড়াও, আপনাকে অবশ্যই "বিশেষ ক্রিয়াকলাপগুলির" জন্য (যেমন jspdf.plugin.addimage.js চিত্রগুলি ব্যবহারের জন্য) অন্যান্য গ্রন্থাগার ব্যবহার করতে হবে। পরীক্ষা করে দেখুন https://github.com/MrRio/jsPDF ।

Question 7

প্রথমত, আপনাকে একটি হ্যান্ডলার তৈরি করতে হবে।

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 8

কিভাবে vuejs মধ্যে এটি প্রযোজ্য?

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>

স্নিপেট প্রসারিত করুন