捕獲和轉換Web的工具

使用JavaScript屏幕截圖API捕獲Div

JavaScript API

一個常見的要求是如何僅捕獲HTML頁面中單個HTML元素的內容。 例如div,span或canvas元素。

但是,在使用客戶端代碼捕獲單個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>

因此,例如,僅對ID為的div進行屏幕截圖 features,您可以下載 GrabzIt JavaScript庫 然後使用下面的JavaScript代碼。

此JavaScript還通過將設置為,將生成的圖像屏幕截圖自動調整為與目標HTML元素相同的尺寸。 bheight, heightwidth 參數 到-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轉換為圖像,PDF或DOCX時,您也可以捕獲HTML元素。 只需更換方法 ConvertURL with ConvertHTML 以上。

捕獲動態內容

通常,您想要在用戶擁有 int以某種方式使用它,例如填寫表格後。 GrabzIt可讓您通過提供 ConvertPage 方法。 這會將網頁的當前HTML以及網頁的URL發送到GrabzIt。 然後在瀏覽器中重新創建它並進行轉換 into圖片,DOCX或PDF文檔。

但是為了 解析所有通過URL引用的資源,例如CSS或圖像。 必須在可通過以下方式訪問的網頁上調用此方法: 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" 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>

定位HTML元素時如何裁剪PDF 使用這些技術進行控制.

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

根據您要捕獲的網站的性質,您也可以使用這種方法來捕獲 登錄背後。 只需使用上述方法,即可根據需要使用或不使用目標參數。 然後,只要頁面資源沒有受到任何限制,您就應該能夠捕獲用戶看到的網頁內容。