জাভাস্ক্রিপ্ট ব্যবহার করে এইচডিএমএল পৃষ্ঠায় একটি ডিভিডি পিডিএফ হিসাবে ডাউনলোড করুন

Question 1

আইডিটির সাথে আমার "সামগ্রী" হিসাবে একটি সামগ্রী রয়েছে। কন্টেন্ট ডিভিতে আমার কিছু গ্রাফ এবং কিছু টেবিল রয়েছে। ব্যবহারকারী যখন ডাউনলোড বোতামে ক্লিক করেন তখন আমি সেই ডিভিডিটিকে পিডিএফ হিসাবে ডাউনলোড করতে চাই। জাভাস্ক্রিপ্ট বা jQuery ব্যবহার করে এমন করার কোনও উপায় আছে?

Question 2

আপনি এটি jsPDF ব্যবহার করে করতে পারেন

এইচটিএমএল:

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

Question 3

এর ভিতরে থাকা সামগ্রীগুলি jspdf এবং এইচটিএমএল 2 ক্যানভাস<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();
    });
}

তথ্যসূত্র : এইচটিএমএল ক্যানভাস এবং জেএসপিডিএফ থেকে পিডিএফ জেনারেশন ।

হতে পারে এটি কারও সাহায্য করবে।

Question 4

আপনার দ্রবণটির জন্য এইচটিএমএলকে ব্যাক-এন্ড সার্ভারে পিডিএফ সুবিধা দেওয়ার জন্য এইচটিএমএল পাস করার জন্য এবং তারপরে ব্রাউজারে উত্পন্ন পিডিএফ আউটপুট ফিরিয়ে আনতে কিছু অজাক্স পদ্ধতি প্রয়োজন।

প্রথমে ক্লায়েন্টের পাশের কোডটি সেট আপ করে আমরা jquery কোড সেটআপ করব

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

তারপরে এইচটিএমএল 2 পিডিএফ প্রজন্মের স্ক্রিপ্ট থেকে ডেটাটি নীচে বাধা দিন

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

Question 5

আফাইক এমন কোনও নেটিভ জেকারি ফাংশন নেই যা এটি করে। সার্ভারে রূপান্তর প্রক্রিয়া করা সর্বোত্তম বিকল্প হবে। আপনি এটি কীভাবে করবেন তা আপনি কোন ভাষা ব্যবহার করছেন তার উপর নির্ভর করে (। নেট, পিএইচপি ইত্যাদি)। আপনি রূপান্তর পরিচালনা করে এমন ফাংশনে ডিভের সামগ্রীটি পাস করতে পারেন যা ব্যবহারকারীর কাছে পিডিএফ ফিরিয়ে দেয়।

Question 6

হ্যাঁ, জেএস-তে পিডিএফ হিসাবে ডিভ ক্যাপচার করা সম্ভব। আপনি https://grabz.it দ্বারা সরবরাহিত সমাধানটি পরীক্ষা করতে পারেন । তাদের কাছে দুর্দান্ত এবং পরিষ্কার জাভাস্ক্রিপ্ট এপিআই রয়েছে যা আপনাকে কোনও একক এইচটিএমএল উপাদান যেমন ডিভ বা স্প্যানের সামগ্রী ক্যাপচার করতে দেয়।

সুতরাং, আপনি এটি ব্যবহার করুন আপনার প্রয়োজন হবে অ্যাপ্লিকেশন + কী এবং ফ্রি এসডিকে । এটির ব্যবহার নিম্নরূপ:

ধরা যাক আপনার একটি 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আপনার টার্গেট ইউআরএল এবং #featureআপনার সিএসএস নির্বাচনকারীর সাথে প্রতিস্থাপন করতে হবে ।

এখানেই শেষ. এখন, পৃষ্ঠাটি লোড করা হলে একটি চিত্রের স্ক্রিনশটটি এখন স্ক্রিপ্ট ট্যাগের মতো একই স্থানে তৈরি করা হবে, যেখানে ডিভ বৈশিষ্ট্যগুলির সমস্ত বিষয়বস্তু থাকবে এবং অন্য কিছুই থাকবে না।

ডিভ-স্ক্রিনশট প্রক্রিয়াটিতে আপনি যা করতে পারেন তা হ'ল অন্যান্য কনফিগারেশন এবং কাস্টমাইজেশন, দয়া করে সেগুলি এখানে দেখুন