जावास्क्रिप्ट स्क्रीनशॉट एपीआयसह एक डिव्ह कॅप्चर करा

एचटीएमएल पृष्ठामध्ये एकाच एचटीएमएल घटकाची फक्त सामग्री कशी कॅप्चर करावी हे एक सामान्य आवश्यकता आहे. उदा. एक डिव्ह, स्पॅन किंवा कॅनव्हास घटक.

तथापि, आपण क्लायंट साइड कोड वापरून एकल एचटीएमएल घटक कॅप्चर करण्यापूर्वी. जसे की प्रतिमा, पीडीएफ किंवा डीओसीएक्स स्क्रीनशॉट. आपल्याला आवश्यक असेल विनामूल्य साइन अप करा आणि नंतर आमच्या डाउनलोड विनामूल्य जावास्क्रिप्ट लायब्ररी.

एकदा हे पूर्ण झाल्यावर HTML घटक कॅप्चर करणे सोपे आहे. आपल्याला फक्त पास करणे आवश्यक आहे सीएसएस निवडकर्ता आपण कॅप्चर करू इच्छित घटकाची लक्ष्य मापदंड

आपला सीएसएस निवडकर्ता तयार करण्यासाठी आपल्याला आपल्याला हव्या असलेल्या 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
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 एलिमेंटला प्रतिमेत रुपांतरित करा
HTML एलिमेंटला पीडीएफमध्ये रुपांतरित करा
एचटीएमएल एलिमेंटला डॉकमध्ये रुपांतरित करा

हे जावास्क्रिप्ट अतिरिक्तरित्या परिणामी प्रतिमा स्क्रीनशॉट सेट करुन लक्ष्यित एचटीएमएल घटकाच्या समान परिमाणांवर स्वयंचलित करते bheight, height आणि width पॅरामिटर्स to -1. जेव्हा पृष्ठ लोड होते तेव्हा त्याच ठिकाणी त्याच ठिकाणी एक स्क्रीन स्क्रीनशॉट तयार केला जाईल script टॅग यात मधील सर्व सामग्री असेल features Div आणि आणखी काही नाही.

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.4.7/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@3.4.7/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@3.4.7/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 पद्धत. हे वेब पृष्ठावरील URL सध्याच्या वेब पृष्ठास ग्रॅबझिटवर पाठवते. त्यानंतर ते ब्राउझरमध्ये पुन्हा तयार केले जाते आणि रूपांतरित केले जाते into एक प्रतिमा, डीओसीएक्स किंवा पीडीएफ दस्तऐवज.

तथापि करण्यासाठी सीएसएस किंवा प्रतिमा यासारख्या कोणत्याही संसाधनांचे निराकरण करा जे यूआरएलद्वारे संदर्भित आहेत. या पध्दतीवर प्रवेश करण्यायोग्य वेब पृष्ठावर कॉल करणे आवश्यक आहे intआर्टनेट

<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" value="Save"/>
    </form>
</div>

उदाहरण एखाद्या वेबपृष्ठाच्या स्रोताची एक प्रत तयार करते जे कोणत्याही फॉर्म मूल्यांसह अद्ययावत करते आणि रुपांतरित करण्यासाठी ते ग्रॅबझीटला देते. आम्हाला फक्त Div कॅप्चर करायचा आहे divSectionवर दर्शविल्याप्रमाणे आम्ही लक्ष्य म्हणून ते पार करत आहोत. तथापि आपण जेएसओएन पॅरामीटर्स निर्दिष्ट करू शकत नाही आणि संपूर्ण वेबपृष्ठ कॅप्चर करू शकत नाही कारण वापरकर्त्याने ते अद्यतनित केले आहे.

डायनॅमिक सामग्री प्रतिमेत रूपांतरित करा
डायनॅमिक सामग्री पीडीएफमध्ये रूपांतरित करा
डायनॅमिक सामग्री डीओसीएक्समध्ये रूपांतरित करा

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

एचटीएमएल घटकाला लक्ष्य करतेवेळी पीडीएफ कसे तयार होते या तंत्राचा वापर करून नियंत्रित केले.

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

आपण हस्तगत करीत असलेल्या वेबसाइटच्या स्वरूपावर अवलंबून असलेली सामग्री कॅप्चर करण्यासाठी आपण हा दृष्टिकोन देखील वापरू शकता लॉगिन मागे. इच्छित पॅरामीटर्ससह किंवा त्याशिवाय केवळ वरील पध्दतीचा वापर करा. नंतर जोपर्यंत पृष्ठ संसाधने कोणत्याही प्रकारे प्रतिबंधित नाहीत आपण वापरकर्त्याने पाहिल्यानुसार आपण वेबपृष्ठ सामग्री हस्तगत करण्यास सक्षम असावे.