使用JavaScript屏幕截图API捕获Div

一个常见的要求是如何仅捕获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代码。

将HTML元素转换为图像
将HTML元素转换为PDF
将HTML元素转换为DOCX

此JavaScript还通过将设置为，将生成的图像屏幕截图自动调整为与目标HTML元素相同的尺寸。 bheight, height 和 width 参数到-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 和 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参数并捕获用户已更新的整个网页。

将动态内容转换为图像
将动态内容转换为PDF
将动态内容转换为DOCX

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

根据您要捕获的网站的性质，您也可以使用这种方法来捕获登录背后。只需使用上述方法，即可根据需要使用或不使用目标参数。然后，只要页面资源没有受到任何限制，您就应该能够捕获用户看到的网页内容。