Webをキャプチャして変換するツール

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

JavaScript API

一般的な要件は、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 & 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ページコンテンツをキャプチャできるはずです。