वेब पर कब्जा और परिवर्तित करने के लिए उपकरण

जावास्क्रिप्ट स्क्रीनशॉट एपीआई के साथ एक div पर कब्जा

जावास्क्रिप्ट एपीआई

एक सामान्य आवश्यकता यह है कि HTML पृष्ठ में किसी एकल HTML तत्व की सामग्री को कैसे कैप्चर किया जाए। जैसे एक div, स्पैन या कैनवास एलिमेंट।

हालाँकि, इससे पहले कि आप क्लाइंट साइड कोड का उपयोग करके किसी एक HTML तत्व को पकड़ सकें। जैसे कि इमेज, पीडीएफ या DOCX स्क्रीनशॉट। तुम्हें यह करना पड़ेगा मुफ्त में साइन अप और फिर हमारे डाउनलोड करें मुफ्त जावास्क्रिप्ट पुस्तकालय.

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

अपने सीएसएस चयनकर्ता के निर्माण के लिए आपको उस एचटीएमएल तत्व को खोजना होगा जिसे आप कैप्चर करना चाहते हैं। ऐसा करने के लिए लक्ष्य वेबपेज के स्रोत को देखें। जिसका एक उदाहरण नीचे दिखाया गया है।

<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
risus porttitor tristique at ac diam. Sed nisi risus, rutrum a metus suscipit, euismod tristique nulla. Etiam venenatis rutrum
blandit. In hac habitasse platea dictumst. Suspendisse potenti. Phasellus eget vehicula felis.</p>

उदाहरण के लिए, केवल आईडी के साथ ऊपर के स्क्रीनशॉट को स्क्रीनशॉट के लिए features, आप डाउनलोड कर सकते हैं GrabzIt जावास्क्रिप्ट पुस्तकालय और फिर नीचे दिए गए जावास्क्रिप्ट कोड का उपयोग करें।

यह जावास्क्रिप्ट अतिरिक्त रूप से परिणामी छवि स्क्रीनशॉट को उसी आयाम में लक्षित करता है, जिस पर निर्धारित HTML तत्व लक्षित है bheight, height और width पैरामीटर to -1 जब पृष्ठ लोड किया जाता है तो एक छवि स्क्रीनशॉट उसी स्थान पर बनाया जाएगा script टैग। इसमें सभी सामग्री शामिल होगी features div और कुछ नहीं।

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
<script type="text/javascript">
GrabzIt("Sign in to view your Application Key").ConvertURL("http://www.example.com/my-page.html",
{"target": "#features", "bheight": -1, "height": -1, "width": -1}).Create();
</script>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
<script type="text/javascript">
GrabzIt("Sign in to view your Application Key").ConvertURL("http://www.example.com/my-page.html",
{"target": "#features", "format": "pdf"}).Create();
</script>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
<script type="text/javascript">
GrabzIt("Sign in to view your Application Key").ConvertURL("http://www.example.com/my-page.html",
{"target": "#features", "format": "docx"}).Create();
</script>

बेशक, आप HTML तत्वों को तब भी कैप्चर कर सकते हैं जब HTML को इमेज, पीडीएफ या डॉक्सएक्स में परिवर्तित कर रहे हों। बस विधि की जगह ConvertURL साथ में ConvertHTML ऊपर।

गतिशील सामग्री को कैप्चर करना

अक्सर आप उपयोगकर्ता के बाद पृष्ठ सामग्री पर कब्जा करना चाहते हैं intउदाहरण के लिए किसी फॉर्म को भरने के बाद इसे किसी तरह से तैयार किया जाता है। GrabzIt आपको यह प्रदान करने में सक्षम बनाता है ConvertPage तरीका। यह वेब पेज के वर्तमान HTML को वेब पेज के URL के साथ GrabzIt को भेजता है। फिर इसे ब्राउज़र में रीक्रिएट किया जाता है और परिवर्तित किया जाता है into एक चित्र, DOCX या PDF दस्तावेज़।

हालांकि करने के क्रम में किसी भी संसाधन जैसे सीएसएस या छवियों को URL के माध्यम से संदर्भित किया जाता है। इस विधि को वेब पेज पर बुलाया जाना चाहिए internet।

<div id="divSection">
    <form id="myForm">
        <label>Name</label><input type="text" name="name" />
        <label>Age</label><input type="text" name="age" />
        <input type="button" data-gt-translate-attributes='[{"attribute":"value","format":"json"}]' value="Save"/>
    </form>
</div>

उदाहरण वेबपेज के स्रोत की एक प्रति बनाता है जो इसे किसी भी प्रकार के मूल्यों के साथ अपडेट करता है और इसे GrabzIt में बदल देता है। जैसा कि हम केवल div पर कब्जा करना चाहते हैं divSection, जैसा कि ऊपर दिखाया गया है कि हम एक लक्ष्य के रूप में गुजर रहे हैं। हालाँकि आप JSON मापदंडों को निर्दिष्ट नहीं कर सकते हैं और पूरे वेबपेज को कैप्चर कर सकते हैं क्योंकि यह उपयोगकर्ता द्वारा अपडेट किया गया है।

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertPage({"target": "#divSection", "bheight": -1, "height": -1, "width": -1}).Create();
</script>

HTML एलिमेंट को टारगेट करते समय PDF को कैसे क्रॉप किया जाता है इन तकनीकों का उपयोग करके नियंत्रित किया जाता है.

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertPage({"target": "#divSection", "format": "pdf"}).Create();
</script>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertPage({"target": "#divSection", "format": "docx"}).Create();
</script>

आपके द्वारा कैप्चर की जा रही वेबसाइट की प्रकृति के आधार पर, आप इस सामग्री का उपयोग करने के लिए इस दृष्टिकोण का उपयोग कर सकते हैं एक लॉगिन के पीछे। बस इच्छित दृष्टिकोण के साथ या बिना लक्ष्य मापदंडों के उपरोक्त दृष्टिकोण का उपयोग करें। तब तक जब तक पृष्ठ संसाधन प्रतिबंधित नहीं होते हैं, तब तक आप उपयोगकर्ता द्वारा देखे गए वेबपेज सामग्री को कैप्चर करने में सक्षम होना चाहिए।