כלים ללכידה ולהמרה של האינטרנט

צלם Div עם API של תמונת מסך של JavaScriptממשק API של JavaScript

דרישה נפוצה היא כיצד ללכוד רק את התוכן של אלמנט HTML יחיד בדף HTML. למשל אלמנט חלוקה, טווח או בד.

עם זאת, לפני שתוכל ללכוד אלמנט HTML יחיד באמצעות קוד צד לקוח. למשל תמונה, צילום מסך PDF או DOCX. אתה תצטרך ל להירשם בחינם ואז להוריד את ספריית JavaScript בחינם.

לאחר סיום זה קל לתפוס אלמנט HTML. אתה רק צריך לעבור את בורר CSS של האלמנט שאתה רוצה ללכוד אליו יעד פָּרָמֶטֶר.

על מנת לבנות את בורר ה- CSS שלך תצטרך למצוא את אלמנט ה- 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, אתה יכול להוריד את ספריית JavaScript ואז השתמש בקוד JavaScript למטה.

JavaScript זה גם מבצע אוטומציה של גודל המסך של התמונה המתקבלת לאותם מימדים כמו אלמנט ה- HTML הממוקד על ידי הגדרת ה- bheight, height ו width פרמטרים ל- -1. כאשר העמוד נטען, ייווצר צילום מסך באותו מיקום כמו script תגית. זה יכיל את כל התוכן של ה- features div ושום דבר אחר.

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.4.8/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.8/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.8/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 לתמונה, PDF או DOCX. פשוט החלף את השיטה ConvertURL עם ConvertHTML מֵעַל.

לכידת תוכן דינמי

לעתים קרובות אתה רוצה ללכוד תוכן עמוד לאחר שיש למשתמש intאושר עם זה בדרך כלשהי, למשל לאחר מילוי טופס. GrabzIt מאפשר לך לעשות זאת על ידי מתן ConvertPage שיטה. זה שולח את ה- HTML הנוכחי של דף האינטרנט יחד עם כתובת האתר של דף האינטרנט ל- GrabzIt. לאחר מכן הוא משוחזר בדפדפן ומומר into מסמך תמונה, DOCX או PDF.

עם זאת כדי לפתור משאבים כגון CSS או תמונות שמופנים באמצעות כתובות URL. יש לקרוא לשיטה זו בדף אינטרנט נגיש ב- 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>

הדוגמה יוצרת עותק של מקור דף האינטרנט מעדכן אותו בערכי צורה כלשהם ומעבירה אותו ל- GrabzIt להמרה. כפי שאנו רק רוצים לתפוס את ה div divSectionכפי שמוצג לעיל אנו מעבירים את זה כמטרה. עם זאת לא ניתן היה לציין את הפרמטרים של JSON ולתפוס את כל דף האינטרנט כפי שהוא עודכן על ידי המשתמש.

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

כיצד ניתן לקצץ PDF בעת מיקוד לאלמנט HTML יכול להיות מבוקר באמצעות טכניקות אלה.

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

בהתאם לאופי האתר שאתה מצלם אתה יכול להשתמש בגישה זו גם כדי ללכוד תוכן שהוא מאחורי כניסה. פשוט השתמש בגישה שלעיל, עם או בלי פרמטרי היעד כרצונך. אז כל עוד משאבי הדף לא מוגבלים בכל מקרה, אתה אמור להיות מסוגל לתפוס את תוכן דף האינטרנט כפי שנראה על ידי המשתמש.