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, istemci tarafı kodunu kullanarak tek bir HTML öğesini yakalayabilmeniz için önce. Bir görüntü, PDF veya DOCX ekran görüntüsü gibi. İhtiyacın olacak için ücretsiz kaydol ve sonra bizim indir ücretsiz JavaScript kütüphanesi.

Bu yapıldıktan sonra, bir HTML öğesini yakalamak kolaydır. Sadece geçmek gerekir 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 hedef web sayfasının kaynağına bakın. Bunun bir örneği aşağıda gösterilmiştir.

<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, indirebilirsiniz GrabzIt JavaScript kütüphanesi ve sonra aşağıdaki JavaScript kodunu kullanın.

Bu JavaScript ayrıca, görüntülenen ekran görüntüsünü, hedeflenen HTML öğesiyle aynı boyutlara getirerek bheight, height ve width parametreler -1’e Sayfa yüklendiğinde, aynı ekran görüntüsünde bir ekran görüntüsü oluşturulur. script etiket. Bu, içeriğin tamamını 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 geçerli HTML'sini ve web sayfasının URL'sini GrabzIt'e gönderir. Daha sonra bir tarayıcıda yeniden oluşturulur ve dönüştürülür into bir resim, DOCX veya PDF belgesi.

Ancak için CSS veya URL'ler ile referans verilen görüntüler gibi kaynakları çözün. Bu yöntem, web sitesinde erişilebilir bir web sayfasında çağrılmalıdır. 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>

Örnek, bir web sayfasının kaynağının bir kopyasını herhangi bir form değeriyle günceller ve dönüştürülmek üzere GrabzIt'e iletir. 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. İstediğiniz hedef parametreleri olsun veya olmasın yukarıdaki yaklaşımı kullanın. O halde, sayfa kaynakları zaten kısıtlanmadığı sürece, web sayfası içeriğini kullanıcı tarafından görüldüğü gibi alabilmeniz gerekir.