क्या जावास्क्रिप्ट या jquery का उपयोग करके HTML पेज को पीडीएफ के रूप में सहेजना संभव है?

Question 1

विस्तार से:

मैंने एक HTML पृष्ठ बनाया है जिसमें एक तालिका है। इसमें एक बटन has PDF के रूप में सेव ’है। यदि उपयोगकर्ता उस बटन पर क्लिक करता है तो उस HTML पेज को पीडीएफ फाइल के रूप में बदलना होगा।

क्या यह जावास्क्रिप्ट या jquery का उपयोग करना संभव है?

Question 2

हां , pdf फ़ाइल बनाने के लिए jspdf का उपयोग करें ।

फिर आप इसे डेटा URI में बदल सकते हैं और DOM में डाउनलोड लिंक इंजेक्ट कर सकते हैं

हालाँकि आपको स्वयं को HTML रूपांतरण पीडीएफ में लिखना होगा।

बस अपने पृष्ठ के प्रिंटर के अनुकूल संस्करणों का उपयोग करें और उपयोगकर्ता को यह चुनने दें कि वह पृष्ठ को कैसे प्रिंट करना चाहता है।

संपादित करें: जाहिर तौर पर इसका न्यूनतम समर्थन है

तो इसका जवाब है कि आप अपना खुद का पीडीएफ लेखक लिखें या मौजूदा पीडीएफ लेखक से इसे आपके लिए (सर्वर पर) करवाएं।

Question 3

हां जावास्क्रिप्ट के साथ करना बहुत आसान है। आशा है कि यह कोड आपके लिए उपयोगी है।

आपको JSpdf लाइब्रेरी की आवश्यकता होगी ।

<div id="content">
     <h3>Hello, this is a H3 tag</h3>

    <p>a pararaph</p>
</div>
<div id="editor"></div>
<button id="cmd">Generate PDF</button>

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

    // This code is collected but useful, click below to jsfiddle link.
</script>

jsfiddle लिंक यहाँ

Question 4

यह देर से उत्तर हो सकता है लेकिन यह सबसे अच्छा है: https://github.com/eKoopmans/html2pdf

शुद्ध जावास्क्रिप्ट कार्यान्वयन। आपको आईडी द्वारा केवल एक तत्व को निर्दिष्ट करने और इसे परिवर्तित करने की अनुमति देता है।

Question 5

आप फैंटमज का उपयोग कर सकते हैं। एचटीएमएल-> पीडीएफ रूपांतरण सुविधा https://github.com/ariya/phantomjs/blob/master/examples/rasterize.js का परीक्षण करने के लिए यहां डाउनलोड करें और निम्न उदाहरण का उपयोग करें

उदाहरण कोड:

phantomjs.exe examples/rasterize.js http://www.w3.org/Style/CSS/Test/CSS3/Selectors/current/xhtml/index.html sample.pdf

Question 6

मैंने इस्तेमाल किया jsPDFऔरdom-to-image पीडीएफ को HTML निर्यात करने के लिए लाइब्रेरी ।

मैं किसकी चिंता के संदर्भ में यहां पोस्ट करता हूं।

$('#downloadPDF').click(function () {
    domtoimage.toPng(document.getElementById('content2'))
      .then(function (blob) {
          var pdf = new jsPDF('l', 'pt', [$('#content2').width(), $('#content2').height()]);
          pdf.addImage(blob, 'PNG', 0, 0, $('#content2').width(), $('#content2').height());
          pdf.save("test.pdf");
      });
});

डेमो: https://jsfiddle.net/viethien/md03wb21/27/

Question 7

यहां बताया गया है कि मैं इसे कैसे करूंगा, इसका विचार बुलेटप्रूफ डिजाइन नहीं है, आपको इसे संशोधित करने की आवश्यकता है

उपयोगकर्ता पीडीएफ बटन के रूप में सहेजें पर क्लिक करता है
सर्वर को अजाक्स का उपयोग करके कॉल भेजा जाता है
सर्वर HTML का उपयोग करके उत्पन्न पीडीएफ के लिए एक यूआरएल के साथ प्रतिक्रिया करता है, मैंने अपाचे एफओपी का उपयोग बहुत सफलतापूर्वक किया है
Ajax रिस्पांस को हैंडल करने वाला js, जेएस द्वारा भेजे गए URL को इंगित करने के लिए एक स्थान देता है। और जैसे ही वह URL लोड होता है, वह फ़ाइल को डाउनलोड करने के लिए अटैचमेंट फोर्सिंग के रूप में कंटेंट डिस्पेंस हेडर का उपयोग करके फाइल भेजता है।

Question 8

Html को pdf server साइड में कन्वर्ट करना बहुत आसान और विश्वसनीय है। हम Google Puppeteer का उपयोग कर रहे हैं। यह आपके चयन के किसी भी सर्वर साइड भाषा के लिए रैपर के साथ अच्छी तरह से बनाए रखा गया है। Puppeteer स्क्रीनशॉट और / या PDF फ़ाइलों को बनाने के लिए हेडलेस क्रोम का उपयोग करता है। यह आपको बहुत सारे सिरदर्द से बचाएगा, खासकर यदि आपको तालिकाओं, छवियों, ग्राफ़, कई पृष्ठों के साथ जटिल पीडीएफ फाइलें उत्पन्न करने की आवश्यकता है

https://developers.google.com/web/tools/puppeteer/

Question 9

जावास्क्रिप्ट का उपयोग करके HTML को पीडीएफ में बदलने का एक और बहुत स्पष्ट तरीका है: उसके लिए एक ऑनलाइन एपीआई का उपयोग करें। यदि उपयोगकर्ता ऑफ़लाइन है तो आपको रूपांतरण करने की आवश्यकता नहीं है, यह ठीक काम करेगा।

PdfMage एक ऐसा विकल्प है जिसमें एक अच्छा एपीआई है और मुफ्त खाते प्रदान करता है। मुझे यकीन है कि आप कई विकल्प पा सकते हैं (उदाहरण के लिए, यहां )

PdfMage API के लिए आपके पास कुछ इस तरह होगा:

 $.ajax({
    url: "https://pdfmage.org/pdf-api/v1/process",
    type: "POST",
    crossDomain: true,
    data: { Html:"<html><body>Hi there!</body></html>" },
    dataType: "json",
    headers: {
        "X-Api-Key": "your-key-here" // not very secure, but a valid option for non-public domains/intranet
    },
    success: function (response) {
        window.location = response.Data.DownloadUrl;
    },
    error: function (xhr, status) {
        alert("error");
    }
});

Question 10

हाँ। उदाहरण के लिए आप https://grabz.it द्वारा समाधान का उपयोग कर सकते हैं ।

यह एक जावास्क्रिप्ट एपीआई है जिसे स्क्रीनशॉट को हथियाने और हेरफेर करने के लिए विभिन्न तरीकों से उपयोग किया जा सकता है। आदेश में अपने ऐप्लिकेशन में इसका इस्तेमाल करने के लिए आपको पहले एक पाने के लिए की आवश्यकता होगी एप्लिकेशन कुंजी और गोपनीयता और डाउनलोड मुक्त जावास्क्रिप्ट एसडीके।

तो, आइए इसे इस्तेमाल करने के लिए एक सरल उदाहरण देखें:

//first include the grabzit.min.js library in the web page
<script src="grabzit.min.js"></script>
//include the code below to add the screenshot to the body tag    
<script>
//use secret key to sign in. replace the url.
GrabzIt("Sign in to view your Application Key").ConvertURL("http://www.google.com").Create();
</script>

फिर बस थोड़ी देर प्रतीक्षा करें और छवि स्वचालित रूप से पृष्ठ के निचले भाग में दिखाई देगी, बिना आपको पृष्ठ को फिर से लोड करने की आवश्यकता होगी।

वह सबसे सरल है। छवि हेरफेर के साथ अधिक उदाहरणों के लिए, तत्वों को स्क्रीनशॉट संलग्न करना और आदि प्रलेखन की जांच करें ।

Question 11

$('#cmd2').click(function() {
  	var options = {
		//'width': 800,
  	};
  	var pdf = new jsPDF('p', 'pt', 'a4');
  	pdf.addHTML($("#content2"), -1, 220, options, function() {
    	pdf.save('admit_card.pdf');
  	});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>

<div id="content2" style="background: #fff;border-bottom: 1px solid #ffffff;">
                    	<div class="tokenDet" style="padding: 15px;border: 1px solid #000;width: 80%;margin: 0 auto;position: relative;overflow: hidden;">
                        	<div class="title" style="text-align: center;border-bottom: 1px solid #000;margin-bottom: 15px;">
                            	<h2>Entrance Exam Hall Ticket</h2>
                            </div>
                            <div class="parentdiv" style="display: inline-block;width: 100%;position: relative;">
                            	<div class="innerdiv" style="width: 80%;float: left;">
                            		<div class="restDet">
                                        <div class="div">
                                            <div class="label" style="width: 30%;float: left;">
                                                <strong>Name</strong>
                                            </div>
                                            <div class="data" style="width: 70%;display: inline-block;">
                                                <span>Santanu Patra</span>
                                            </div>
                                            <div class="label" style="width: 30%;float: left;">
                                                <strong>D.O.B.</strong>
                                            </div>
                                            <div class="data" style="width: 70%;display: inline-block;">
                                                <span>17th April, 1995</span>
                                            </div>
                                            <div class="label" style="width: 30%;float: left;">
                                                <strong>Address</strong>
                                            </div>
                                            <div class="data" style="width: 70%;display: inline-block;">
                                                <span>P.S. Srijan Corporate Park, Saltlake, Sector 5, Kolkata-91</span>
                                            </div>
                                            <div class="label" style="width: 30%;float: left;">
                                                <strong>Contact Number</strong>
                                            </div>
                                            <div class="data" style="width: 70%;display: inline-block;">
                                                <span>9874563210</span>
                                            </div>
                                            <div class="label" style="width: 30%;float: left;">
                                                <strong>Email Id</strong>
                                            </div>
                                            <div class="data" style="width: 70%;display: inline-block;">
                                                <span>santanu@macallied.com</span>
                                            </div>
                                            <div class="label" style="width: 30%;float: left;">
                                                <strong>Parent(s) Name</strong>
                                            </div>
                                            <div class="data" style="width: 70%;display: inline-block;">
                                                <span>S. Patra</span><br /><span>7896541230</span>
                                            </div>
                                            <div class="label" style="width: 30%;float: left;">
                                                <strong>Exam Center</strong>
                                            </div>
                                            <div class="data" style="width: 70%;display: inline-block;">
                                                <span>Institute of Engineering & Management</span>
                                            </div>
                                            <div class="label" style="width: 30%;float: left;">
                                                <strong>Hall Number</strong>
                                            </div>
                                            <div class="data" style="width: 70%;display: inline-block;">
                                                <span>COM-32</span>
                                            </div>
                                        </div>
                                    </div>
                            	</div>
                                <div class="sideDiv" style="width: 20%;float: left;">
                                	<div class="atts" style="float: left;width: 100%;">
                                    	<div class="photo" style="width: 115px;height: 150px;float: right;">
                                        	<img src="images/candidateImg.gif" style="width: 100%;"/>
                                        </div>
                                        <div class="sign" style="position: absolute;bottom: 0;right: 0;border-top: 1px dashed #000;left: 80%;text-align: right;">
                                        	<small>Self Attested</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <button class="btn btn-info" id="cmd2">Download Token</button>

स्निपेट का विस्तार करें

Question 12

संक्षेप में: नहीं। पहली समस्या फाइल सिस्टम तक पहुंच है, जो अधिकांश ब्राउज़रों में सुरक्षा कारणों से डिफ़ॉल्ट रूप से सेट नहीं है। आधुनिक ब्राउज़र कभी-कभी डेटाबेस के रूप में न्यूनतम संग्रहण का समर्थन करते हैं, या आप उपयोगकर्ता से फ़ाइल एक्सेस को सक्षम करने के लिए कह सकते हैं।

यदि आपके पास फ़ाइल सिस्टम तक पहुंच है, तो HTML को सहेजना उतना कठिन नहीं है (जेएस प्रलेखन में फ़ाइल ऑब्जेक्ट देखें) - लेकिन पीडीएफ इतना आसान नहीं है। पीडीएफ एक बहुत ही उन्नत फ़ाइल-प्रारूप है जो वास्तव में जावास्क्रिप्ट के लिए बीमार है। यह आपको शब्द और क्वैड जैसे जावास्क्रिप्ट द्वारा सीधे समर्थित नहीं किए गए डेटाैटिप में जानकारी लिखने की आवश्यकता है। आपको एक शब्दकोश खोज प्रणाली को पूर्व-परिभाषित करने की भी आवश्यकता है जिसे फ़ाइल में सहेजा जाना चाहिए। मुझे यकीन है कि कोई इसे काम कर सकता है, लेकिन इसमें शामिल प्रयास और समय बेहतर होगा C ++ या डेल्फी सीखने में।

यदि उपयोगकर्ता आपको गैर-प्रतिबंधित पहुँच देता है तो HTML निर्यात संभव होना चाहिए