捕获和转换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元素。 只需更换方法 ConvertURLConvertHTML 以上。

捕获动态内容

通常,您想要在用户拥有 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>

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