जावास्क्रिप्ट का उपयोग करके div में HTML से पीडीएफ जेनरेट करें

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" दस्तावेज़ को फिर "foobar.pdf" के फ़ाइल नाम के साथ स्वचालित रूप से डाउनलोड किया जाना चाहिए

मैं यह करने के लिए jspdf का उपयोग कर रहा हूं, लेकिन इसका एकमात्र कार्य "टेक्स्ट" है जो केवल स्ट्रिंग मानों को स्वीकार करता है। मैं HTML को jspdf में सबमिट करना चाहता हूं, टेक्स्ट पर नहीं।

javascript jspdf

— जॉन क्रॉफोर्ड
स्रोत

1

जैसा कि ऊपर उल्लेख किया गया है कि मैं "पाठ" फ़ंक्शन का उपयोग नहीं करना चाहता हूं । मैं इसे HTML देना चाहता हूं। आपका लिंक केवल सादे पाठ से संबंधित है न कि html

— जॉन क्रॉफोर्ड

2

jsPDF करता है एक है fromHTMLसमारोह; "HTML रेंडरर" उदाहरण देखें: mrrio.github.io/jsPDF

— mg1075

यहाँ jsPDF ट्यूटोरियल ट्राई करें freakyjolly.com/create-multipage-html-pdf-jspdf-html2canvas

— कोड जासूस

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

यदि आप कुछ तत्वों को अनदेखा करना चाहते हैं, तो आपको उन्हें एक आईडी के साथ चिह्नित करना होगा, जिसे आप 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>

फिर आप पॉपअप में निर्मित पीडीएफ को खोलने के लिए निम्न जावास्क्रिप्ट कोड का उपयोग करते हैं:

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");

मेरे लिए इसने एक अच्छा और सुव्यवस्थित पीडीएफ बनाया, जिसमें केवल लाइन 'प्रिंट टू पीडीएफ' शामिल थी।

कृपया ध्यान दें कि विशेष तत्व हैंडलर केवल मौजूदा संस्करण में आईडी के साथ सौदा करते हैं, जिसे एक GitHub इश्यू में भी कहा गया है । य़ह कहता है:

क्योंकि नोड पेड़ में प्रत्येक तत्व के खिलाफ मिलान किया जाता है, मेरी इच्छा इसे जितनी जल्दी हो सके बनाने की थी। उस स्थिति में, इसका मतलब था "केवल तत्व आईडी का मिलान किया जाता है" तत्व आईडी अभी भी jQuery की शैली "#id" में किया जाता है, लेकिन इसका मतलब यह नहीं है कि सभी jQuery चयनकर्ता समर्थित हैं।

इसलिए select .ignorePDF ’जैसे श्रेणी के चयनकर्ताओं के साथ repl #ignorePDF’ की जगह मेरे लिए काम नहीं आई। इसके बजाय आपको प्रत्येक और हर तत्व के लिए एक ही हैंडलर जोड़ना होगा, जिसे आप अनदेखा करना चाहते हैं:

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

से उदाहरण यह भी कहा गया है कि यह 'एक' या 'ली' की तरह टैग का चयन करने के लिए संभव है। हालांकि यह सबसे बेकार के लिए अप्रतिबंधित करने के लिए थोड़ा सा हो सकता है:

हम विशेष तत्व हैंडलर का समर्थन करते हैं। उन्हें या तो आईडी या नोड नाम के लिए jQuery के शैली आईडी चयनकर्ता के साथ पंजीकृत करें। ("#iAmID", "div", "span" आदि) इस समय किसी भी अन्य प्रकार के चयनकर्ताओं (वर्ग, यौगिक) के लिए कोई समर्थन नहीं है।

जोड़ने के लिए एक बहुत महत्वपूर्ण बात यह है कि आप अपनी सभी शैली जानकारी (CSS) खो देते हैं। सौभाग्य से jsPDF अच्छी तरह से h1, h2, h3 आदि को प्रारूपित करने में सक्षम है, जो मेरे उद्देश्यों के लिए पर्याप्त था। इसके अतिरिक्त यह केवल टेक्स्ट नोड्स के भीतर पाठ को प्रिंट करेगा, जिसका अर्थ है कि यह टेक्स्टारिस और इस तरह के मूल्यों को प्रिंट नहीं करेगा। उदाहरण:

<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

मुझे लगता है कि तत्व हैंडलर एक वर्ग हो सकता है? यह एचटीएमएल 5 मानकों के अनुरूप बहुत अधिक शब्दार्थ होगा। एक आईडी न केवल सीएसएस में बहुत अधिक वजन का भार उठाती है, यह भी अद्वितीय होना चाहिए।

— शाही

नहीं, जहां तक मुझे पता है, कक्षाएं उनके उदाहरण में बताए गए समय में कोई वैध चयनकर्ता नहीं हैं: "हम विशेष तत्व संचालकों का समर्थन करते हैं। उन्हें या तो आईडी या नोड नाम के लिए jQuery- शैली आईडी चयनकर्ता के साथ पंजीकृत करें। (" #iAmID ") "div", "स्पान" आदि) इस समय किसी अन्य प्रकार के चयनकर्ताओं (वर्ग, यौगिक) के लिए कोई समर्थन नहीं है। " फिर भी, टैग नामों का उपयोग करना संभव है यदि वह आपके उपयोग के मामले के अनुरूप है और आपके पृष्ठ पर अन्य महत्वपूर्ण तत्वों को छिपाता नहीं है।

— snrlx

अपने पेज parall.ax/products/jspdf पर वे कहते हैं कि वे IE6 + एक शिम के माध्यम से समर्थन करते हैं। हालांकि यह खुद की कोशिश नहीं की है।

— Snrlx

2

@ snrlx मुझे रिक्त पीडीऍफ़ मिलती है और यह त्रुटि है: रेंडरर। pdf.sHashCode कोई फ़ंक्शन नहीं है

— लिसा सोलोमन

5

"यदि आप कुछ तत्वों को अनदेखा करना चाहते हैं, तो आपको उन्हें एक आईडी के साथ चिह्नित करना होगा" - एक अद्भुत पुस्तकालय, जो कि उलटा खरीद द्वारा बर्बाद हो गया है। ओपी एक प्रिंट करना चाहता था <div>, जो सैकड़ों में से एक हो सकता है - इसलिए उसे सभी अवांछित डोम तत्वों को चिह्नित करना होगा ??

— मावग का कहना है कि मोनिका

53

यह सरल उपाय है। यह मेरे लिए काम करता है। आप जावास्क्रिप्ट प्रिंट अवधारणा का उपयोग कर सकते हैं और इसे पीडीएफ के रूप में सरल रूप से सहेज सकते हैं।

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

— वैभव कुलकर्णी
स्रोत

27

"और इसे पीडीएफ के रूप में सरल सहेजें" - मैंने उस हिस्से को याद किया। आप इसे कैसे करते हो?

— मावग का कहना है कि मोनिका

9

यह मेरे लिए काम करता है, सीएसएस स्टाइलिंग की समस्या को हल करने के लिए, मैंने एक और सीएसएस फ़ाइल बनाई, जिसका नाम प्रिंटप डीएफ.एससीएस है और लिंक टैग का उपयोग करके इसे उपरोक्त उदाहरण में जोड़ा गया है: PrintWindow.document.write ('<html> <शीर्षक> <शीर्षक> DIV सामग्री </ शीर्षक> '); PrintWindow.document.write ('<लिंक rel = "स्टाइलशीट" href = "../ सीएसएस / PrintPDF.css" />'); PrintWindow.document.write ('</ head> <body>');

— प्राइम_कोडर

2

कुछ टिप्पणियाँ: 1) आपको मुद्रण के लिए एक विशिष्ट स्टाइलशीट की आवश्यकता नहीं है। अपनी वर्तमान स्टाइलशीट में, कुछ इस तरह करें: @media प्रिंट {.page। क्रेक {पेज-ब्रेक-से पहले: हमेशा; } .LabelPdf {फ़ॉन्ट-वजन: बोल्ड; फ़ॉन्ट-आकार: 20 पीएक्स; } .noPrintPdf {प्रदर्शन: कोई नहीं; }} और इन वर्गों को अपनी आवश्यकताओं के रूप में उपयोग करें। 2) .live ("क्लिक", ...) मेरे लिए काम नहीं करता है, इसलिए मैं इसके बजाय .on ("क्लिक", ...) का उपयोग करता हूं।

— डेविडसन लीमा

1

@DavidsonLima यह कोड नई विंडो बनाता है जिसमें पुरानी विंडो सीएसएस नहीं दिखाई देगी। इसलिए यह "अनदेखा करना" सीएसएस है, यह अनदेखी नहीं कर रहा है, बस नई विंडो में यह लोड नहीं किया गया है। बस इसे सिर में लोड करें और यह प्रतिपादन होगा।

— लुकास लाइजिस

1

बस किसी भी मामले में कोणीय के साथ ऐसा करने की कोशिश कर रहा है, तो कृपया अपने CSS फ़ाइल को संपत्ति फ़ोल्डर में रखें।

— रिगंला

16

आप ऑटोप्रिंट () का उपयोग कर सकते हैं और आउटपुट को '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

मैं उत्सुक हूं, क्या इसने कभी ओपी के अलावा किसी और के लिए काम किया है? कोड पढ़ने से, मुझे यह समझ में आ रहा है कि यह केवल उन तत्वों के साथ काम करेगा जिनके पास आईडी है। यह शायद उससे थोड़ा अधिक जटिल है, किसी भी तरह मुझे नहीं पता कि यह काम कैसे करना है।

— माइकल

14

मैंने जो देखा, उससे बहुत विडंबना यह है कि HTML से केवल तभी काम होता है जब पैरामीटर के रूप में भेजे गए तत्व में कोई HTML न हो: केवल सादा पाठ समर्थित हो। किंडा ने पूरी बात इमो के उद्देश्य को मार दिया।

— माइकल

मेरे लिए पूरी तरह से काम किया। जिस तत्व को आप पास करना चाहते हैं, उसके लिए आईडी होना आवश्यक नहीं है। यह ठीक उसी तरह से है जिस तरह से रेप्लिकेंट को वह नोड मिला, जिसे वह पास करना चाहता था। इसके अलावा यह समाधान 'printDoc.autoPrint ()' के बिना भी काम करता है। यदि आप इस विशिष्ट लाइन को कोड में छोड़ना चाहते हैं, तो आपको ऑटोप्रिंट-प्लगिन को शामिल करना होगा।

— Snrlx

13

यदि आपको किसी विशिष्ट पृष्ठ का पीडीएफ डाउनलोड करने की आवश्यकता है तो बस इस तरह का बटन जोड़ें

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

अपने सभी पेज को सिर्फ एक div प्रिंट करने के लिए window.print () का उपयोग करें

— वाल महमूद
स्रोत

2

बस इसके लिए एक सरल जोड़, यदि आप एक iframe की डाउनलोड करने योग्य पीडीएफ बनाना चाहते हैं, तो डेवलपर कंसोल का उपयोग करें: document.querySelector("#myIframe").contentWindow.print()

— ioCron

11

जैसा कि उल्लेख किया गया है, आपको jsPDF और html2canvas का उपयोग करना चाहिए । मैंने jsPDF के मुद्दों के अंदर एक फ़ंक्शन भी पाया है जो आपके पीडीएफ को कई पृष्ठों ( स्रोतों ) में स्वचालित रूप से विभाजित करता है

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

यह छवियों को परिवर्तित नहीं करता है

— प्रोबॉस्की

1

उत्तर के लिए धन्यवाद, क्या आप इसे ए 4 पृष्ठ प्रारूप में डाल सकते हैं?

— johannesMatevosyan

3

यह वास्तव में एक अच्छा वेक्टर पीडीएफ नहीं बनाता है, यह कैनवास के साथ बहुत सारे बिटमैप बनाता है, और उन्हें छवियों के रूप में स्टैक करता है। परिणाम के कई नुकसान हैं - बड़ी, निम्न गुणवत्ता, पीडीएफ से कॉपी और पेस्ट नहीं कर सकते, आदि ...

— रोमन ज़ेनका

6

एक तरीका है window.print () फ़ंक्शन का उपयोग करना। जिसे किसी पुस्तकालय की आवश्यकता नहीं है

पेशेवरों

1. कोई बाहरी पुस्तकालय की आवश्यकता नहीं है।

2. हम शरीर के केवल चयनित भागों को भी मुद्रित कर सकते हैं।

3. कोई सीएसएस संघर्ष और जेएस मुद्दों।

4.Core html / js कार्यक्षमता

--- बस नीचे कोड जोड़ें

सीएसएस को

@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 कोड - btn क्लिक पर bewlow फ़ंक्शन को कॉल करें

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

नोट: हर css ऑब्जेक्ट में महत्वपूर्ण!

उदाहरण -

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

— रोहित परते
स्रोत

ब्राउज़र के प्रिंट फ़ंक्शन के साथ समस्याएं हैं। उपयोगकर्ताओं के पास आमतौर पर प्रिंट दृश्य (मार्जिन, पृष्ठ आकार और अधिक) के लिए डिफ़ॉल्ट विकल्प होते हैं। इसलिए, प्रशिक्षण उपयोगकर्ता के बिना आवश्यक स्टाइल के साथ आवश्यक पीडीएफ का उत्पादन करना बहुत मुश्किल है, जो कि अधिक कठिन और लगभग असंभव है ...

— रहमत अली

4

मैं सीएसएस रेंडरिंग के लिए jspdf और html2canvas का उपयोग करता हूं और मैं विशिष्ट 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);

        });
});

— ग़ज़लेह जवहेरी
स्रोत

इस काम कर रहा है, लेकिन यह छवि के लिए सामग्री परिवर्तित

— समद

इसके अलावा, पेज ब्रेक कैसे सेट करें ताकि कंटेंट / इमेज नए पेज पर प्रिंट हो जाए अगर यह करंट पेज पर फिट नहीं होता है?

— शेखर शेटे

4

शुद्ध नहीं जेएस
CSS या छवियों को जोड़ने के लिए - सापेक्ष URL का उपयोग न करें, पूर्ण URL http://...domain.../path.cssया तो का उपयोग करें। यह अलग HTML डॉक्यूमेंट बनाता है और इसमें मुख्य बात का कोई संदर्भ नहीं है।
आप छवियों को बेस 64 के रूप में भी एम्बेड कर सकते हैं

इसने मुझे अब वर्षों तक सेवा दी:

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

— लुकास लिसिस
स्रोत

1

इस के साथ समस्या यह है कि pdf में कोई css प्रभाव नहीं होगा।

— शादाब फैज़

@ शादाब फैज़ यह होगा लेकिन यह मुख्य विंडो के समान नहीं हो सकता है। आप अभी भी कस्टम html tho को इस html में भी जोड़ सकते हैं।

— लुकास लाइसिस

हाँ। आप के साथ Iagree खिड़की में सीएसएस जोड़ सकते हैं लेकिन फ़ाइल पीडीएफ में परिणाम कैसे प्रिंट करें?

— मिरको सियानफ़रानी

1

हालांकि, छवियों को प्रस्तुत नहीं करता है।

— Jan Pi

1

मुझे यह पसंद है! कुछ इधर-उधर की बातें करते हैं और यह अच्छा लगता है। और एक छोटी सी बात इस पर अतिरिक्त रिक्ति को दूर नहीं करती है <body >: पी

— फिल रोजगेनबक

2

यदि आप एक तालिका निर्यात करना चाहते हैं, तो आप शील्ड UI ग्रिड विजेट द्वारा प्रदान किए गए इस निर्यात नमूने पर एक नज़र डाल सकते हैं ।

यह विन्यास को इस तरह बढ़ाकर किया जाता है:

...
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 दस्तावेज़ में हुई।

— रिचर्ड नेलज़िनस्की

संभवतः आपके अंत में गलत कॉन्फ़िगरेशन ... यदि आप चाहते हैं, तो शिलूई टैग के साथ एक प्रश्न पोस्ट करें

— व्लादिमीर

2

PdfMake.js और इस Gist का उपयोग करें ।

(मुझे पैकेज html-to-pdfmake के लिंक के साथ यहाँ Gist मिला , जिसे मैं अब तक उपयोग नहीं कर रहा हूँ।)

npm install pdfmakeGist को htmlToPdf.jsI में उपयोग करने के बाद और इस तरह से सेव करना :

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

टिप्पणियों:

मेरे उपयोग के मामले में markdown दस्तावेज़ से (के साथ प्रासंगिक एचटीएमएल बनाने के लिए है markdown-यह और बाद में पीडीएफ पैदा करने, और अपने द्विआधारी सामग्री अपलोड करने (जो मैं के साथ प्राप्त कर सकते हैं) pdfMakeके getBuffer()ब्राउज़र से समारोह), सभी। जेनरेट किया गया pdf इस तरह के html के लिए अच्छा है जो मेरे द्वारा किए गए अन्य समाधानों की तुलना में अच्छा है।
मैं jsPDF.fromHTML()स्वीकार किए गए उत्तर में सुझाए गए परिणामों से असंतुष्ट हूं , क्योंकि यह समाधान मेरे HTML में विशेष वर्णों द्वारा आसानी से भ्रमित हो जाता है जिसे स्पष्ट रूप से मार्कअप के रूप में व्याख्या किया जाता है और परिणामी पीडीएफ को पूरी तरह से गड़बड़ कर देता है।
कैनवास आधारित समाधानों का उपयोग करना (जैसे कि अस्वीकृत jsPDF.from_html()फ़ंक्शन, स्वीकृत उत्तर में से एक के साथ भ्रमित नहीं होना) मेरे लिए एक विकल्प नहीं है क्योंकि मैं चाहता हूं कि उत्पन्न पीडीएफ में पाठ चिपकाने योग्य हो, जबकि कैनवास आधारित समाधान बिटमैप आधारित पीडीएफ उत्पन्न करते हैं।
Md-to-pdf जैसे पीडीएफ कन्वर्टर्स के लिए डायरेक्ट मार्कडाउन केवल सर्वर साइड हैं और मेरे लिए काम नहीं करेंगे।
ब्राउज़र की मुद्रण कार्यक्षमता का उपयोग करना मेरे लिए काम नहीं करेगा क्योंकि मैं उत्पन्न पीडीएफ को प्रदर्शित नहीं करना चाहता हूं लेकिन इसकी बाइनरी सामग्री अपलोड करना चाहता हूं।

— ilmiacs
स्रोत

यदि मैं कोड को सही ढंग से पढ़ता हूं, तो यह सीएसएस सीमा शैलियों (जैसे तालिकाओं पर) का समर्थन नहीं करता है, सही है?

— Ninjagecko

1

मैं डायन से डायनामिक रूप से बनाए गए टेबल को प्रिंट करने के लिए jsPDF प्राप्त करने में सक्षम था।

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

क्रोम और फ़ायरफ़ॉक्स के साथ महान काम करता है ... स्वरूपण सभी 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 " > बुटीक / ... > जिसका अर्थ है कि इसे इंटरनेट की आवश्यकता है?

— एरुम

1

@ इससे आप फ़ाइल डाउनलोड कर सकते हैं।

— एडुआर्डो क्युमो

0

पीडीएफ के रूप में div पर कब्जा करने के लिए आप https://grabz.it समाधान का उपयोग कर सकते हैं। यह एक जावास्क्रिप्ट एपीआई है जो आसान और लचीला है और आपको किसी भी HTML तत्व की सामग्री को कैप्चर करने की अनुमति देगा जैसे कि div या स्पैन

ताकि इसे लागू करने के लिए आपको पहले एक पाने के लिए की आवश्यकता होगी एप्लिकेशन कुंजी और गोपनीयता और डाउनलोड (मुक्त) एसडीके।

और अब एक उदाहरण है।

मान लें कि आपके पास 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>

कृपया ध्यान दें target: #feature। #featureक्या आप पिछले उदाहरण की तरह CSS चयनकर्ता हैं। अब, जब पृष्ठ लोड किया जाता है तो एक छवि स्क्रीनशॉट अब स्क्रिप्ट टैग के रूप में उसी स्थान पर बनाया जाएगा, जिसमें सभी विशेषताओं की सामग्री होगी जिसमें div और कुछ नहीं होगा।

अन्य कॉन्फ़िगरेशन और अनुकूलन आप div- स्क्रीनशॉट तंत्र के लिए कर सकते हैं, कृपया उन्हें यहां देखें

— छोकरा
स्रोत