أدوات لالتقاط وتحويل الويب

التقاط Div مع JavaScript Screenshot API

واجهة برمجة تطبيقات جافا سكريبت

يتمثل أحد المتطلبات الشائعة في كيفية التقاط محتويات عنصر HTML واحد فقط في صفحة HTML. على سبيل المثال عنصر div أو span أو canvas.

ومع ذلك ، قبل أن تتمكن من التقاط عنصر HTML واحد باستخدام كود جانب العميل. مثل صورة أو PDF أو لقطة شاشة DOCX. سوف تحتاج إلى الاشتراك مجانا ثم قم بتنزيل ملف مكتبة جافا سكريبت الحرة.

بمجرد القيام بذلك ، يكون من السهل التقاط عنصر 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>

لذلك على سبيل المثال لقطة فقط div أعلاه مع معرف features، يمكنك تحميل مكتبة جافا سكريبت GrabzIt ثم استخدم كود JavaScript أدناه.

إضافة إلى ذلك ، يقوم JavaScript تلقائيًا بتجميع لقطة شاشة الصورة الناتجة بنفس أبعاد عنصر HTML المستهدف من خلال تعيين bheight, height و width المعلمات إلى -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 إلى صورة أو PDF أو DOCX. مجرد استبدال الطريقة ConvertURL مع ConvertHTML في الاعلى.

التقاط محتوى ديناميكي

غالبًا ما تريد التقاط محتوى الصفحة بعد حصول المستخدم intتم تشييدها بطريقة ما ، على سبيل المثال بعد ملء نموذج. GrabzIt تمكنك من القيام بذلك من خلال توفير ConvertPage طريقة، أسلوب. يؤدي هذا إلى إرسال HTML الحالي لصفحة الويب إلى جانب عنوان URL لصفحة الويب إلى GrabzIt. ثم يتم إعادة إنشائها في متصفح وتحويلها into صورة أو مستند DOCX أو PDF.

ولكن من أجل حل أي موارد مثل CSS أو الصور التي يتم الرجوع إليها عبر عناوين 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>

كيف يمكن اقتصاص ملف PDF عند استهداف عنصر HTML تسيطر عليها باستخدام هذه التقنيات.

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

بناءً على طبيعة موقع الويب الذي تقوم بالتقاطه ، يمكنك أيضًا استخدام هذا النهج لالتقاط المحتوى الموجود وراء تسجيل الدخول. ببساطة استخدم النهج أعلاه ، مع أو بدون المعلمات الهدف كما هو مطلوب. ثم طالما أن موارد الصفحة غير مقيدة على أي حال ، يجب أن تكون قادرًا على التقاط محتوى صفحة الويب كما يراها المستخدم.