一般的な要件は、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コードを使用します。
この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ページ全体をキャプチャすることはできませんでした。
<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ページコンテンツをキャプチャできるはずです。