一个常见的要求是如何仅捕获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
, 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" 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>
根据您要捕获的网站的性质,您也可以使用这种方法来捕获 登录背后。 只需使用上述方法,即可根据需要使用或不使用目标参数。 然后,只要页面资源没有受到任何限制,您就应该能够捕获用户看到的网页内容。