JavaScriptスクリーンショットAPIでDivをキャプチャする

一般的な要件は、HTMLページ内の単一のHTML要素のコンテンツのみをキャプチャする方法です。たとえば、div、span、またはcanvas要素。

ただし、クライアント側のコードを使用して単一のHTML要素をキャプチャする前に。画像、PDF、DOCXスクリーンショットなど。あなたがする必要があります無料でサインアップその後、私たちをダウンロードします無料のJavaScriptライブラリ.

これが完了すると、HTML要素を簡単にキャプチャできます。あなただけを渡す必要があります CSSセレクターキャプチャしたい要素のターゲットパラメータに一致する最初のデバイスのリモートコントロール URL を返します。

CSSセレクターを構築するには、キャプチャーするHTML要素を見つける必要があります。これを行うには、ターゲットWebページのソースを確認します。その例を以下に示します。

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

したがって、たとえば、上記のdivのスクリーンショットを作成するには、 features、ダウンロードできます GrabzIt JavaScriptライブラリ次に、以下のJavaScriptコードを使用します。

HTML要素を画像に変換
HTML要素をPDFに変換
HTML要素をDOCXに変換

このJavaScriptはさらに、結果の画像のスクリーンショットを、ターゲットHTML要素と同じサイズに自動サイズ設定します。 bheight, height and 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 方法。これにより、Webページの現在のHTMLとWebページのURLがGrabzItに送信されます。その後、ブラウザで再作成され、変換されます into画像、DOCXまたはPDFドキュメント。

ただし、 URLを介して参照されるCSSや画像などのリソースを解決します。 このメソッドは、でアクセス可能なWebページで呼び出す必要があります internet。

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

この例では、Webページのソースのコピーを作成し、フォームの値で更新し、GrabzItに渡して変換します。 divのみをキャプチャしたいので divSection、上に示したように、それをターゲットとして渡します。ただし、ユーザーが更新したため、JSONパラメーターを指定してWebページ全体をキャプチャすることはできませんでした。

動的コンテンツを画像に変換する
ダイナミックコンテンツを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>

キャプチャするWebサイトの性質に応じて、このアプローチを使用してコンテンツをキャプチャすることもできますログインの背後。必要に応じて、ターゲットパラメータの有無にかかわらず、上記のアプローチを使用します。その後、ページリソースが制限されない限り、ユーザーに表示されるWebページコンテンツをキャプチャできるはずです。