ดาวน์โหลด div ในหน้า HTML เป็น pdf โดยใช้ javascript

ฉันมี div เนื้อหาที่มี id เป็น "content" ในเนื้อหา div ฉันมีกราฟและตารางบางส่วน ฉันต้องการดาวน์โหลด div นั้นเป็น pdf เมื่อผู้ใช้คลิกที่ปุ่มดาวน์โหลด มีวิธีทำโดยใช้ javascript หรือ jQuery หรือไม่?

คุณสามารถทำได้โดยใช้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>

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

เนื้อหาภายใน<div class='html-content'>....</div>สามารถดาวน์โหลดเป็น pdf ที่มีรูปแบบการใช้jspdf & html2canvas

คุณต้องอ้างถึงไลบรารี js ทั้งสอง

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

Ref: รูปแบบไฟล์ PDF genration จาก HTML ผ้าใบและ jspdf

อาจเป็นสิ่งนี้จะช่วยใครบางคน

โซลูชันของคุณต้องใช้วิธีการ ajax เพื่อส่ง html ไปยังเซิร์ฟเวอร์ส่วนหลังที่มีสิ่งอำนวยความสะดวก html เป็น pdf แล้วส่งคืนเอาต์พุต pdf ที่สร้างกลับไปยังเบราว์เซอร์

ขั้นแรกตั้งค่ารหัสฝั่งไคลเอ็นต์เราจะตั้งค่ารหัส 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;

AFAIK ไม่มีฟังก์ชัน jquery ดั้งเดิมที่ทำสิ่งนี้ ตัวเลือกที่ดีที่สุดคือการประมวลผลการแปลงบนเซิร์ฟเวอร์ วิธีการดำเนินการนี้ขึ้นอยู่กับภาษาที่คุณใช้ (.net, php ฯลฯ ) คุณสามารถส่งเนื้อหาของ div ไปยังฟังก์ชันที่จัดการการแปลงซึ่งจะส่งคืน pdf ให้กับผู้ใช้

ใช่มันเป็นไปได้ที่จะจับ div เป็น PDF ใน JS คุณสามารถสามารถตรวจสอบการแก้ปัญหาให้โดยhttps://grabz.it มี JavaScript API ที่ดีและสะอาดซึ่งจะช่วยให้คุณจับเนื้อหาขององค์ประกอบ HTML เดียวเช่น div หรือ a span

ดังนั้นการใช้โย่นั้นคุณจะต้องและที่สำคัญแอป +และฟรีSDK การใช้งานมีดังต่อไปนี้:

สมมติว่าคุณมี 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-screenshot โปรดตรวจสอบที่นี่