สร้าง PDF จาก HTML ใน div โดยใช้ Javascript

232

ฉันมีรหัส html ต่อไปนี้:

<!DOCTYPE html>
<html>
    <body>
        <p>don't print this to pdf</p>
        <div id="pdf">
            <p><font size="3" color="red">print this to pdf</font></p>
        </div>
    </body>
</html>

สิ่งที่ฉันต้องการทำคือการพิมพ์เป็น pdf สิ่งที่พบใน div ด้วยรหัส "pdf" สิ่งนี้จะต้องทำโดยใช้ JavaScript ควรดาวน์โหลดเอกสาร "pdf" โดยอัตโนมัติด้วยชื่อไฟล์ "foobar.pdf"

ฉันใช้ jspdf เพื่อทำสิ่งนี้ แต่ฟังก์ชั่นเดียวที่มีคือ "text" ซึ่งยอมรับเฉพาะค่าสตริงเท่านั้น ฉันต้องการส่ง HTML เป็น jspdf ไม่ใช่ข้อความ

javascript jspdf

— John Crawford
แหล่งที่มา

1

ตามที่กล่าวไว้ข้างต้นฉันไม่ต้องการใช้ฟังก์ชัน "text" ฉันต้องการให้ HTML ลิงก์ของคุณเกี่ยวข้องเฉพาะกับข้อความธรรมดาและไม่ใช่ html

— John Crawford

2

jsPDF จะมีfromHTMLฟังก์ชั่น; ดูตัวอย่าง "HTML Renderer" ที่: mrrio.github.io/jsPDF

— mg1075

ลองใช้ jsPDF บทช่วยสอนที่นี่freakyjolly.com/create-multipage-html-pdf-jspdf-html2canvas

— รหัส Spy

228

jsPDF สามารถใช้ปลั๊กอินได้ ในการเปิดใช้งานเพื่อพิมพ์ HTML คุณต้องรวมปลั๊กอินบางตัวและดังนั้นจึงต้องทำสิ่งต่อไปนี้:

ไปที่https://github.com/MrRio/jsPDFและดาวน์โหลดเวอร์ชันล่าสุด
รวมสคริปต์ต่อไปนี้ในโครงการของคุณ:
- jspdf.js
- jspdf.plugin.from_html.js
- jspdf.plugin.split_text_to_size.js
- jspdf.plugin.standard_fonts_metrics.js

หากคุณต้องการละเว้นองค์ประกอบบางอย่างคุณต้องทำเครื่องหมายด้วย ID ซึ่งคุณสามารถละเว้นในตัวจัดการองค์ประกอบพิเศษของ jsPDF ดังนั้น HTML ของคุณควรมีลักษณะดังนี้:

<!DOCTYPE html>
<html>
  <body>
    <p id="ignorePDF">don't print this to pdf</p>
    <div>
      <p><font size="3" color="red">print this to pdf</font></p>
    </div>
  </body>
</html>

จากนั้นคุณใช้รหัส JavaScript ต่อไปนี้เพื่อเปิด PDF ที่สร้างขึ้นใน PopUp:

var doc = new jsPDF();          
var elementHandler = {
  '#ignorePDF': function (element, renderer) {
    return true;
  }
};
var source = window.document.getElementsByTagName("body")[0];
doc.fromHTML(
    source,
    15,
    15,
    {
      'width': 180,'elementHandlers': elementHandler
    });

doc.output("dataurlnewwindow");

สำหรับฉันสิ่งนี้สร้าง PDF ที่สวยงามและเป็นระเบียบเรียบร้อยซึ่งรวมเฉพาะบรรทัด 'พิมพ์เป็น pdf' เท่านั้น

โปรดทราบว่าตัวจัดการองค์ประกอบพิเศษจัดการเฉพาะกับ ID ในเวอร์ชันปัจจุบันซึ่งระบุไว้ในฉบับ GitHubด้วย มันระบุว่า:

เนื่องจากการจับคู่ถูกทำกับทุก ๆ องค์ประกอบในทรีโหนดความต้องการของฉันคือทำให้มันเร็วที่สุด ในกรณีนั้นมันหมายถึง "เฉพาะองค์ประกอบของรหัสที่ตรงกัน" รหัสองค์ประกอบยังคงทำในรูปแบบ jQuery "#id" แต่ไม่ได้หมายความว่ารองรับ jQuery selectors ทั้งหมด

ดังนั้นการแทนที่ '#ignorePDF' ด้วยตัวเลือกคลาสเช่น '.ignorePDF' ไม่ทำงานสำหรับฉัน แต่คุณจะต้องเพิ่มตัวจัดการที่เหมือนกันสำหรับแต่ละองค์ประกอบซึ่งคุณต้องการละเว้นเช่น:

var elementHandler = {
  '#ignoreElement': function (element, renderer) {
    return true;
  },
  '#anotherIdToBeIgnored': function (element, renderer) {
    return true;
  }
};

จากตัวอย่างมีการระบุด้วยว่าคุณสามารถเลือกแท็กเช่น 'a' หรือ 'li' นั่นอาจเป็นข้อ จำกัด เล็กน้อยสำหรับการใช้งานส่วนใหญ่ แต่:

เรารองรับเครื่องมือจัดการองค์ประกอบพิเศษ ลงทะเบียนพวกเขาด้วยตัวเลือก ID สไตล์ jQuery สำหรับ ID หรือชื่อโหนด ("#iAmID", "div", "span" ฯลฯ ) ไม่มีการสนับสนุนตัวเลือกประเภทอื่น ๆ (คลาสของสารประกอบ) ในขณะนี้

สิ่งหนึ่งที่สำคัญมากในการเพิ่มคือการที่คุณสูญเสียข้อมูลสไตล์ทั้งหมดของคุณ (CSS) โชคดีที่ jsPDF สามารถฟอร์แมต h1, h2, h3 และอื่น ๆ ซึ่งเพียงพอสำหรับวัตถุประสงค์ของฉัน นอกจากนี้มันจะพิมพ์ข้อความภายในโหนดข้อความเท่านั้นซึ่งหมายความว่ามันจะไม่พิมพ์ค่าของ textareas และสิ่งที่คล้ายกัน ตัวอย่าง:

<body>
  <ul>
    <!-- This is printed as the element contains a textnode -->        
    <li>Print me!</li>
  </ul>
  <div>
    <!-- This is not printed because jsPDF doesn't deal with the value attribute -->
    <input type="textarea" value="Please print me, too!">
  </div>
</body>

— snrlx
แหล่งที่มา

3

ฉันจะเดาว่าตัวจัดการองค์ประกอบสามารถเป็นคลาสได้หรือไม่ ซึ่งจะมีความหมายมากขึ้นตามมาตรฐาน HTML5 ID ไม่เพียง แต่มีน้ำหนักที่เกินจริงใน CSS เท่านั้น แต่ยังต้องไม่ซ้ำกัน

— ความจำเป็น

ไม่เท่าที่ฉันรู้คลาสไม่มีตัวเลือกที่ถูกต้องในขณะนี้ตามที่ระบุไว้ในตัวอย่างของพวกเขา: "เราสนับสนุนตัวจัดการองค์ประกอบพิเศษลงทะเบียนพวกเขาด้วยตัวเลือก ID สไตล์ jQuery สำหรับ ID หรือชื่อโหนด (" #iAmID ", "div", "span" ฯลฯ ) ไม่มีการรองรับตัวเลือกประเภทอื่น ๆ (คลาสของสารประกอบ) ในขณะนี้ ". ยังคงเป็นไปได้ที่จะใช้ชื่อแท็กหากสอดคล้องกับกรณีการใช้งานของคุณและไม่ซ่อนองค์ประกอบที่สำคัญอื่น ๆ ในหน้าของคุณ

— snrlx

ในหน้าของพวกเขาparall.ax/products/jspdfพวกเขาระบุว่าพวกเขาสนับสนุน IE6 + ผ่านชิม ยังไม่ได้ลองด้วยตัวเอง

— snrlx

2

@snrlx ฉันได้รับไฟล์ PDF ว่างเปล่าและข้อผิดพลาดนี้: renderer.pdf.sHashCode ไม่ใช่ฟังก์ชั่น

— Lisa Solomon

5

"ถ้าคุณต้องการที่จะเพิกเฉยต่อองค์ประกอบบางอย่างคุณต้องทำเครื่องหมายด้วย ID" - ห้องสมุดที่ยอดเยี่ยมซึ่งถูกทำลายโดยการกลับใจใหม่ OP ต้องการพิมพ์เดี่ยว<div>ซึ่งอาจเป็นหนึ่งในหลายร้อย - ดังนั้นเขาต้องทำเครื่องหมายองค์ประกอบ DOM ที่ไม่ต้องการทั้งหมดหรือไม่

— Mawg กล่าวว่าคืนสถานะโมนิก้า

53

นี่คือทางออกที่ง่าย สิ่งนี้ใช้ได้ผลกับฉันคุณสามารถใช้แนวคิดการพิมพ์จาวาสคริปต์และง่าย ๆ ในการบันทึกเป็น pdf

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $("#btnPrint").live("click", function () {
            var divContents = $("#dvContainer").html();
            var printWindow = window.open('', '', 'height=400,width=800');
            printWindow.document.write('<html><head><title>DIV Contents</title>');
            printWindow.document.write('</head><body >');
            printWindow.document.write(divContents);
            printWindow.document.write('</body></html>');
            printWindow.document.close();
            printWindow.print();
        });
    </script>
</head>
<body>
    <form id="form1">
    <div id="dvContainer">
        This content needs to be printed.
    </div>
    <input type="button" value="Print Div Contents" id="btnPrint" />
    </form>
</body>
</html>

— vaibhav kulkarni
แหล่งที่มา

27

"และง่าย ๆ บันทึกเป็น pdf" - ฉันพลาดส่วนนั้นไป คุณจะทำอย่างไรมันได้หรือไม่?

— Mawg กล่าวว่าคืนสถานะโมนิก้า

9

สิ่งนี้ใช้งานได้สำหรับฉันในการแก้ปัญหาการใส่สไตล์ CSS ฉันสร้างไฟล์ css อีกอันชื่อว่า printPDF.css และเพิ่มโดยใช้แท็กลิงก์เช่นนี้ในตัวอย่างด้านบน: printWindow.document.write ('<html> <head> <title> เนื้อหา DIV </title> '); printWindow.document.write ('<link rel = "สไตล์ชีท" href = "../ css / printPDF.css" />'); printWindow.document.write ('</head> <body>');

— Prime_Coder

2

ความคิดเห็นบางส่วน: 1) คุณไม่จำเป็นต้องมีสไตล์ชีทเฉพาะสำหรับการพิมพ์ ในสไตล์ชีทปัจจุบันของคุณให้ทำดังนี้: @media print {.pageBreak {page-break-before: always; } .labelPdf {font-weight: ตัวหนา; ขนาดตัวอักษร: 20px; } .noPrintPdf {display: none; }} และใช้คลาสเหล่านี้ตามความต้องการของคุณ 2) .live ("คลิก", ... ) ไม่ทำงานกับฉันดังนั้นฉันจึงใช้. on ("คลิก", ... ) แทน

— Davidson Lima

1

@DavidsonLima รหัสนี้สร้างหน้าต่างใหม่ซึ่งจะไม่เห็นหน้าต่างเก่า css นั่นเป็นสาเหตุที่มัน "เพิกเฉย" css ไม่ใช่การเพิกเฉยเพียงในหน้าต่างใหม่ที่ไม่ได้โหลด เพียงโหลดเข้าที่หัวและจะทำการเรนเดอร์

— Lukas Liesis

1

ในกรณีที่มีคนพยายามทำให้เรื่องนี้เกิดขึ้นกับ Angular โปรดใส่ไฟล์ CSS ของคุณลงในโฟลเดอร์ asset

— rgantla

16

คุณสามารถใช้ autoPrint () และตั้งค่าผลลัพธ์เป็น 'dataurlnewwindow' เช่นนี้:

function printPDF() {
    var printDoc = new jsPDF();
    printDoc.fromHTML($('#pdf').get(0), 10, 10, {'width': 180});
    printDoc.autoPrint();
    printDoc.output("dataurlnewwindow"); // this opens a new popup,  after this the PDF opens the print window view but there are browser inconsistencies with how this is handled
}

— มาร์โก
แหล่งที่มา

1

ฉันอยากรู้อยากเห็นมันเคยทำงานให้กับคนอื่นที่ไม่ใช่ OP ไหม? จากการอ่านรหัสฉันดูเหมือนจะเข้าใจว่ามันจะทำงานกับองค์ประกอบที่มี ID เท่านั้น มันอาจจะซับซ้อนกว่านี้อีกเล็กน้อย แต่ก็ไม่รู้ว่าจะใช้งานอย่างไร

— Michael

14

จากสิ่งที่ฉันสังเกตเห็นมากแดกดันจาก HTML จะทำงานเฉพาะในกรณีที่องค์ประกอบที่ส่งเป็นพารามิเตอร์ไม่มี HTML ใด ๆ : สนับสนุนข้อความธรรมดาเท่านั้น Kinda ฆ่าจุดประสงค์ของ imo ทั้งหมด

— Michael

ทำงานอย่างสมบูรณ์แบบสำหรับฉัน องค์ประกอบที่คุณต้องการส่งผ่านไม่จำเป็นต้องมี ID นั่นเป็นเพียงวิธีที่ผู้ลอกเลียนแบบพบโหนดที่เขาต้องการส่งผ่านนอกจากนี้โซลูชันนี้ยังทำงานได้โดยไม่ต้อง 'printDoc.autoPrint ()' หากคุณต้องการปล่อยให้บรรทัดนี้อยู่ในรหัสคุณจะต้องรวม autoPrint-Plugin

— snrlx

13

หากคุณต้องการดาวน์โหลดไฟล์ PDF ของหน้าใดหน้าหนึ่งเพียงแค่เพิ่มปุ่มแบบนี้

<h4 onclick="window.print();"> Print </h4>

ใช้ window.print () เพื่อพิมพ์หน้าทั้งหมดของคุณไม่ใช่แค่ div

— Wael Mahmoud
แหล่งที่มา

2

เพียงแค่เพิ่มเข้าไปอย่างง่าย ๆ หากคุณต้องการสร้างไฟล์ PDF ของ iframe ที่สามารถดาวน์โหลดได้ให้ใช้คอนโซลนักพัฒนาซอฟต์แวร์: document.querySelector("#myIframe").contentWindow.print()

— ioCron

11

เป็นที่กล่าวถึงคุณควรใช้jsPDFและhtml2canvas ฉันยังพบฟังก์ชันภายในปัญหาของ jsPDF ซึ่งแยก pdf ของคุณโดยอัตโนมัติออกเป็นหลาย ๆ หน้า (ที่มา )

function makePDF() {

    var quotes = document.getElementById('container-fluid');

    html2canvas(quotes, {
        onrendered: function(canvas) {

        //! MAKE YOUR PDF
        var pdf = new jsPDF('p', 'pt', 'letter');

        for (var i = 0; i <= quotes.clientHeight/980; i++) {
            //! This is all just html2canvas stuff
            var srcImg  = canvas;
            var sX      = 0;
            var sY      = 980*i; // start 980 pixels down for every new page
            var sWidth  = 900;
            var sHeight = 980;
            var dX      = 0;
            var dY      = 0;
            var dWidth  = 900;
            var dHeight = 980;

            window.onePageCanvas = document.createElement("canvas");
            onePageCanvas.setAttribute('width', 900);
            onePageCanvas.setAttribute('height', 980);
            var ctx = onePageCanvas.getContext('2d');
            // details on this usage of this function: 
            // https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images#Slicing
            ctx.drawImage(srcImg,sX,sY,sWidth,sHeight,dX,dY,dWidth,dHeight);

            // document.body.appendChild(canvas);
            var canvasDataURL = onePageCanvas.toDataURL("image/png", 1.0);

            var width         = onePageCanvas.width;
            var height        = onePageCanvas.clientHeight;

            //! If we're on anything other than the first page,
            // add another page
            if (i > 0) {
                pdf.addPage(612, 791); //8.5" x 11" in pts (in*72)
            }
            //! now we declare that we're working on that page
            pdf.setPage(i+1);
            //! now we add content to that page!
            pdf.addImage(canvasDataURL, 'PNG', 20, 40, (width*.62), (height*.62));

        }
        //! after the for loop is finished running, we save the pdf.
        pdf.save('test.pdf');
    }
  });
}

— BaptWaels
แหล่งที่มา

3

มันไม่แปลงภาพ

— Probosckie

1

ขอบคุณสำหรับคำตอบคุณช่วยให้คำแนะนำเกี่ยวกับวิธีการจัดรูปแบบหน้า A4 ได้ไหม?

— johannesMatevosyan

3

นี่ไม่ใช่การสร้างเวกเตอร์ pdf ที่ดีจริงๆมันทำบิตแมปด้วยผ้าใบจำนวนมากและวางเป็นรูปภาพ ผลลัพธ์มีข้อเสียมากมาย - ขนาดใหญ่คุณภาพต่ำไม่สามารถคัดลอก & วางจาก PDF และอื่น ๆ ...

— Roman Zenka

6

วิธีหนึ่งคือใช้ฟังก์ชัน window.print () ซึ่งไม่ต้องใช้ห้องสมุดใด ๆ

ข้อดี

1. ไม่จำเป็นต้องใช้ไลบรารีภายนอก

2. เราสามารถพิมพ์ส่วนของร่างกายที่เลือกเท่านั้น

3. ไม่มีปัญหา css และ js

ฟังก์ชั่น 4.Core html / js

--- เพียงเพิ่มรหัสด้านล่าง

CSSถึง

@media print {
        body * {
            visibility: hidden; // part to hide at the time of print
            -webkit-print-color-adjust: exact !important; // not necessary use         
               if colors not visible
        }

        #printBtn {
            visibility: hidden !important; // To hide 
        }

        #page-wrapper * {
            visibility: visible; // Print only required part
            text-align: left;
            -webkit-print-color-adjust: exact !important;
        }
    }

รหัส JS -โทรฟังก์ชั่น bewlow เมื่อคลิก btn

$scope.printWindow = function () {
  window.print()
}

หมายเหตุ: ใช้! สำคัญในทุกวัตถุ css

ตัวอย่าง -

.legend  {
  background: #9DD2E2 !important;
}

— Rohit Parte
แหล่งที่มา

มีปัญหากับฟังก์ชั่นการพิมพ์ของเบราว์เซอร์ ผู้ใช้มักจะมีตัวเลือกเริ่มต้นที่เลือกไว้สำหรับมุมมองพิมพ์ (ระยะขอบขนาดหน้ากระดาษและอื่น ๆ ) ดังนั้นมันจึงเป็นเรื่องยากมากที่จะสร้าง PDF ที่จำเป็นต้องมีการจัดแต่งทรงผมโดยไม่ต้องฝึกอบรมผู้ใช้ซึ่งเป็นวิธีที่ยากและเป็นไปไม่ได้ประมาณ ...

— Rahmat Ali

4

ฉันใช้jspdfและhtml2canvasสำหรับการแสดงผล css และฉันส่งออกเนื้อหาของ div เฉพาะเนื่องจากนี่คือรหัสของฉัน

$(document).ready(function () {
    let btn=$('#c-oreder-preview');
    btn.text('download');
    btn.on('click',()=> {

        $('#c-invoice').modal('show');
        setTimeout(function () {
            html2canvas(document.querySelector("#c-print")).then(canvas => {
                //$("#previewBeforeDownload").html(canvas);
                var imgData = canvas.toDataURL("image/jpeg",1);
                var pdf = new jsPDF("p", "mm", "a4");
                var pageWidth = pdf.internal.pageSize.getWidth();
                var pageHeight = pdf.internal.pageSize.getHeight();
                var imageWidth = canvas.width;
                var imageHeight = canvas.height;

                var ratio = imageWidth/imageHeight >= pageWidth/pageHeight ? pageWidth/imageWidth : pageHeight/imageHeight;
                //pdf = new jsPDF(this.state.orientation, undefined, format);
                pdf.addImage(imgData, 'JPEG', 0, 0, imageWidth * ratio, imageHeight * ratio);
                pdf.save("invoice.pdf");
                //$("#previewBeforeDownload").hide();
                $('#c-invoice').modal('hide');
            });
        },500);

        });
});

— ghazaleh javaheri
แหล่งที่มา

สิ่งนี้ใช้งานได้ แต่มันจะแปลงเนื้อหาเป็นรูปภาพ

— Samad

นอกจากนี้วิธีการตั้งค่าตัวแบ่งหน้าเพื่อให้เนื้อหา / ภาพจะพิมพ์บนหน้าใหม่ถ้ามันไม่พอดีกับหน้าปัจจุบัน?

— SHEKHAR SHETE

4

ไม่มีการพึ่งพา JS บริสุทธิ์
หากต้องการเพิ่ม CSS หรือภาพ - ไม่ได้ใช้ URL ญาติใช้ URL แบบเต็มรูปแบบhttp://...domain.../path.cssหรือดังนั้น มันสร้างเอกสาร HTML แยกต่างหากและไม่มีบริบทของสิ่งสำคัญ
คุณสามารถฝังภาพเป็น base64

เรื่องนี้ทำหน้าที่ฉันมานานหลายปีแล้ว:

export default function printDiv({divId, title}) {
  let mywindow = window.open('', 'PRINT', 'height=650,width=900,top=100,left=150');

  mywindow.document.write(`<html><head><title>${title}</title>`);
  mywindow.document.write('</head><body >');
  mywindow.document.write(document.getElementById(divId).innerHTML);
  mywindow.document.write('</body></html>');

  mywindow.document.close(); // necessary for IE >= 10
  mywindow.focus(); // necessary for IE >= 10*/

  mywindow.print();
  mywindow.close();

  return true;
}

— Lukas Liesis
แหล่งที่มา

1

ปัญหานี้คือไฟล์ pdf จะไม่มีผลกระทบใด ๆ กับ CSS

— Shadab Faiz

@ShadabFaiz มันจะ แต่อาจไม่เหมือนกับหน้าต่างหลัก คุณยังสามารถเพิ่ม css ที่กำหนดเองนี้ได้เช่นกัน

— Lukas Liesis

ใช่. Iagree กับคุณสามารถเพิ่ม css ในหน้าต่าง แต่พิมพ์ผลลัพธ์ในไฟล์ pdf ได้อย่างไร?

— Mirko Cianfarani

1

ไม่แสดงภาพ

— Jan Pi

1

ฉันรักสิ่งนี้! ปรับแต่งบางอย่างที่นี่และที่นั่นและมันก็ดูดี และสิ่งหนึ่งเล็ก ๆ ไม่ได้ลบระยะห่างพิเศษที่<body >ต้องการ: P

— Phil Roggenbuck

2

หากคุณต้องการส่งออกตารางคุณสามารถดูตัวอย่างการส่งออกนี้ได้จากวิดเจ็ต Shield UI Grid

ทำได้โดยขยายการกำหนดค่าดังนี้:

...
exportOptions: {
    proxy: "/filesaver/save",
    pdf: {
        fileName: "shieldui-export",
        author: "John Smith",
        dataSource: {
            data: gridData
        },
        readDataSource: true,
        header: {
            cells: [
                { field: "id", title: "ID", width: 50 },
                { field: "name", title: "Person Name", width: 100 },
                { field: "company", title: "Company Name", width: 100 },
                { field: "email", title: "Email Address" }
            ]
        }
    }
}
...

— วลาดิมีร์ Georgiev
แหล่งที่มา

ฟังก์ชัน "ส่งออกเป็น PDF" ทำให้เอกสาร PDF ว่างเปล่า

— Richard Nalezynski

การกำหนดค่าผิดที่อาจเป็นไปได้ในตอนท้ายของคุณ ... หากคุณต้องการโพสต์คำถามด้วยแท็ก shieldui

— Vladimir Georgiev

2

ใช้pdfMake.jsและสรุปสาระสำคัญนี้

(ฉันพบส่วนสำคัญที่นี่พร้อมกับลิงก์ไปยังแพ็คเกจhtml-to-pdfmakeซึ่งตอนนี้ฉันไม่ได้ใช้แล้ว)

หลังจากnpm install pdfmakeและบันทึกสาระสำคัญในhtmlToPdf.jsฉันใช้มันเช่นนี้:

const pdfMakeX = require('pdfmake/build/pdfmake.js');
const pdfFontsX = require('pdfmake-unicode/dist/pdfmake-unicode.js');
pdfMakeX.vfs = pdfFontsX.pdfMake.vfs;
import * as pdfMake from 'pdfmake/build/pdfmake';
import htmlToPdf from './htmlToPdf.js';

var docDef = htmlToPdf(`<b>Sample</b>`);
pdfMake.createPdf({content:docDef}).download('sample.pdf');

หมายเหตุ:

กรณีการใช้งานของฉันคือการสร้าง html ที่เกี่ยวข้องจากเอกสาร markdown (มีmarkdown มัน ) และต่อมาได้สร้างรูปแบบไฟล์ PDF และอัปโหลดเนื้อหาไบนารี (ซึ่งผมจะได้รับกับpdfMakeของgetBuffer()ฟังก์ชั่น) ทั้งหมดจากเบราว์เซอร์ ไฟล์ PDF ที่สร้างขึ้นกลายเป็น nicer สำหรับ html ประเภทนี้มากกว่าโซลูชันอื่น ๆ ที่ฉันได้ลอง
ฉันไม่พอใจกับผลลัพธ์ที่ได้จากjsPDF.fromHTML()ข้อเสนอแนะในคำตอบที่ยอมรับเนื่องจากวิธีการแก้ปัญหาสับสนโดยตัวละครพิเศษใน HTML ของฉันซึ่งเห็นได้ชัดว่าถูกตีความว่าเป็นมาร์กอัปและสับสนกับ PDF ที่เกิดขึ้นทั้งหมด
การใช้โซลูชันที่ยึดตาม Canvas (เช่นjsPDF.from_html()ฟังก์ชันที่เลิกใช้แล้วเพื่อไม่ให้สับสนกับคำตอบที่ยอมรับ) ไม่ใช่ตัวเลือกสำหรับฉันเนื่องจากฉันต้องการให้ข้อความใน PDF ที่สร้างขึ้นสามารถวางได้ในขณะที่โซลูชันจาก Canvas สร้าง PDF บิตแมปที่ใช้
markdown โดยตรงไปยังตัวแปลง PDF เช่นmd-to-pdfเป็นฝั่งเซิร์ฟเวอร์เท่านั้นและจะไม่ทำงานสำหรับฉัน
การใช้ฟังก์ชั่นการพิมพ์ของเบราว์เซอร์จะไม่ทำงานสำหรับฉันเพราะฉันไม่ต้องการแสดง PDF ที่สร้างขึ้น แต่อัปโหลดเนื้อหาไบนารีของมัน

— ilmiacs
แหล่งที่มา

หากฉันอ่านรหัสอย่างถูกต้องสิ่งนี้จะไม่สนับสนุนรูปแบบเส้นขอบ CSS (เช่นบนตาราง) ถูกต้องหรือไม่

— ninjagecko

1

ฉันสามารถรับ jsPDF เพื่อพิมพ์ตารางที่สร้างขึ้นแบบไดนามิกจาก div

$(document).ready(function() {

        $("#pdfDiv").click(function() {

    var pdf = new jsPDF('p','pt','letter');
    var specialElementHandlers = {
    '#rentalListCan': function (element, renderer) {
        return true;
        }
    };

    pdf.addHTML($('#rentalListCan').first(), function() {
        pdf.save("caravan.pdf");
    });
    });
});

ใช้งานได้ดีกับ Chrome และ Firefox ... การจัดรูปแบบเป็นไปอย่างราบรื่นใน IE

ฉันรวมสิ่งเหล่านี้ด้วย:

<script src="js/jspdf.js"></script>
    <script src="js/jspdf.plugin.from_html.js"></script>
    <script src="js/jspdf.plugin.addhtml.js"></script>
    <script src="//mrrio.github.io/jsPDF/dist/jspdf.debug.js"></script>
    <script src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
    <script type="text/javascript" src="./libs/FileSaver.js/FileSaver.js"></script>
    <script type="text/javascript" src="./libs/Blob.js/Blob.js"></script>
    <script type="text/javascript" src="./libs/deflate.js"></script>
    <script type="text/javascript" src="./libs/adler32cs.js/adler32cs.js"></script>

    <script type="text/javascript" src="js/jspdf.plugin.addimage.js"></script>
    <script type="text/javascript" src="js/jspdf.plugin.sillysvgrenderer.js"></script>
    <script type="text/javascript" src="js/jspdf.plugin.split_text_to_size.js"></script>
    <script type="text/javascript" src="js/jspdf.plugin.standard_fonts_metrics.js"></script>

— Wasskinny
แหล่งที่มา

2

คุณสามารถโพสต์ตัวอย่างได้

— ไหม

แต่รหัสของคุณคือ <script src = " html2canvas.hertzen.com/build/html2canvas.js " > </ … > ซึ่งแปลว่าต้องการอินเทอร์เน็ตหรือไม่

— Erum

1

@Erum คุณสามารถดาวน์โหลดไฟล์ได้

— Eduardo Cuomo

0

ในการจับภาพ div เป็น PDF คุณสามารถใช้https://grabz.it solution มันมี JavaScript API ซึ่งง่ายและยืดหยุ่นและจะช่วยให้คุณสามารถจับภาพเนื้อหาขององค์ประกอบ HTML เดียวเช่น div หรือ 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>

ในการจับภาพสิ่งที่อยู่ภายใต้ฟีเจอร์ id คุณจะต้อง:

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

โปรดทราบtarget: #featureว่า #featureคุณคือตัวเลือก CSS เช่นในตัวอย่างก่อนหน้า ตอนนี้เมื่อโหลดหน้าจอภาพหน้าจอจะถูกสร้างขึ้นในตำแหน่งเดียวกับแท็กสคริปต์ซึ่งจะมีเนื้อหาทั้งหมดของ div คุณสมบัติและไม่มีอะไรอื่น

นี่คือการกำหนดค่าและการปรับแต่งอื่น ๆ ที่คุณสามารถทำได้กับกลไก div-screenshot โปรดตรวจสอบที่นี่

— จอห์นนี่
แหล่งที่มา