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