捕獲和轉換Web的工具

使用JavaScript屏幕截圖API捕獲Div

JavaScript API

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

However, before you can capture a single HTML element using client side code. Such as an image, PDF or DOCX screenshot. To use the JavaScript Screenshot API. You will need to 免費註冊 然後下載我們的 免費的JavaScript庫.

Once you do this, capturing an HTML element is easy. You just need to pass the CSS選擇器 您希望捕獲到的元素的 目標 參數。

To construct your CSS selector you will need to find the HTML element that you want to capture. To do this look at the HTML source of the webpage you are trying to capture the element from. An example of this is below.

<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 use the JavaScript code below.

This JavaScript additionally autosizes the resultant image screenshot to the same dimensions as the targeted HTML element. By setting the bheight, heightwidth 參數 to -1. When the page loads, it will create an image screenshot in the same location as the script tag. This will contain the contents of the 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 method. This sends the current HTML of the web page along with the URL of the web page to GrabzIt. The system then loads the content in a browser and converts it into an image, DOCX, or PDF document.

To load resources such as CSS or images referenced by absolute URL. You need an internet connection for this method to work properly.

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

The example makes a copy of a webpage, updates it with form values, and sends it to GrabzIt for conversion. As we only want to capture the 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>

根據您要捕獲的網站的性質,您也可以使用這種方法來捕獲 登錄背後. Simply use the above approach, with or without the target parameters as desired. Then if you have not restricted the page resources, you can capture the webpage content as seen by the user.