Web Yakalama ve Dönüştürme Araçları

JavaScript Ekran Görüntüsü API'si ile Div Yakalama

JavaScript API'sı

Ortak bir gereksinim, bir HTML sayfasında yalnızca tek bir HTML öğesinin içeriğinin nasıl yakalanacağıdır. Örneğin, bir div, yayılma veya tuval öğesi.

Ancak önce istemci tarafı kodunu kullanarak tek bir HTML öğesini yakalayabilirsiniz. Bir resim, PDF veya DOCX ekran görüntüsü gibi. Kullanmak için JavaScript Ekran Görüntüsü API'dir. İhtiyacın olacak için ücretsiz kaydol ve sonra bizim indir ücretsiz JavaScript kütüphanesi.

Bunu yaptığınızda, bir HTML öğesini yakalamak kolaydır. geçmeniz yeterli CSS seçici yakalamak istediğiniz öğenin hedef parametre.

CSS seçicinizi oluşturmak için yakalamak istediğiniz HTML öğesini bulmanız gerekecektir. Bunu yapmak için, öğeyi yakalamaya çalıştığınız web sayfasının HTML kaynağına bakın. Bunun bir örneği aşağıdadır.

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

Örneğin, sadece kimliği ile yukarıda div ekran görüntüsü features aşağıdaki JavaScript kodunu kullanın.

Bu JavaScript ayrıca elde edilen görüntü ekran görüntüsünü hedeflenen HTML öğesiyle aynı boyutlara otomatik olarak boyutlandırır. Ayarlayarak bheight, height ve width parametreler 1'e. Sayfa yüklendiğinde, sayfayla aynı konumda bir resim ekran görüntüsü oluşturulacaktır. script etiket. Bu, içeriği içerecektir features div ve başka hiçbir şey.

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

Elbette, HTML'yi bir görüntüye, PDF'ye veya DOCX'e dönüştürürken HTML öğelerini de yakalayabilirsiniz. Sadece yöntemi değiştir ConvertURL ile ConvertHTML yukarıdaki.

Dinamik İçeriği Yakalama

Sık sık, kullanıcı girdikten sonra sayfa içeriği yakalamak istersiniz. intbir şekilde, örneğin bir form doldurduktan sonra çıkarıldı. GrabzIt, bunu sağlayarak bunu yapmanızı sağlar. ConvertPage yöntem. Bu, web sayfasının mevcut HTML'sini web sayfasının URL'siyle birlikte GrabzIt'e gönderir. Sistem daha sonra içeriği bir tarayıcıya yükler ve dönüştürür. into bir resim, DOCX veya PDF belgesi.

Mutlak URL tarafından başvurulan CSS veya resimler gibi kaynakları yüklemek için. bir şeye ihtiyacın var intBu yöntemin düzgün çalışması için ernet bağlantısına ihtiyacınız var.

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

Örnek, bir web sayfasının kopyasını oluşturur, form değerleriyle günceller ve dönüştürme için GrabzIt'e gönderir. Sadece div'i yakalamak istediğimiz için divSection, yukarıda gösterildiği gibi, bunu hedef olarak geçiyoruz. Ancak, JSON parametrelerini belirleyemez ve kullanıcı tarafından güncellendiğinden web sayfasının tamamını yakalayamazsınız.

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

Bir HTML öğesini hedeflerken bir PDF nasıl kırpılır? bu teknikleri kullanarak kontrol.

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

Yakaladığınız web sitesinin niteliğine bağlı olarak, bu yaklaşımı içeriği yakalamak için de kullanabilirsiniz. girişin arkasında. İstenildiği gibi hedef parametreler olsun veya olmasın yukarıdaki yaklaşımı kullanmanız yeterlidir. Daha sonra sayfa kaynaklarını kısıtlamadıysanız web sayfası içeriğini kullanıcının gördüğü şekliyle yakalayabilirsiniz.