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

変換用のHTMLの作成に関するヒント

GrabzIt の API を使用すると、あらゆる HTML を変換できます into PDF、DOCX、画像など。 これを行うには、通常の HTML を API に渡す必要があります。 たとえば、次の例に示す HTML のようなものです。

<html>
<body>
<h1>Hello World</h1>
</body>
</html>

この HTML の例には HTML タグと BODY タグが含まれていますが、HTML のスニペットを変換するだけの場合はこれは必要ありません。 ただし、HTML タグと BODY タグを追加しない場合、これらは通常のブラウザと同様に自動的に追加されます。 これに対処するには、以下に示すように、CSS を指定して BODY タグの余分なパディングとマージンを削除します。

<style>
body{margin:0;padding:0}
</style>

変換する HTML に JavaScript、画像、または CSS を含める場合は、これらのリソースをインラインまたは参照された形式で提供できます。 たとえば、以下のコードは、HTML 内にインラインでリソースを作成する方法を示しています。

<html>
<head>
<script>
document.getElementsByTagName('H1')[0].innerText = 'Goodbye';
</script>
<style>
h1{
color:red;
}
</style>
</head>
<body>
<img width="16" height="16" alt="star" src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOV
SKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGA
iqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7" />
<h1>Hello World</h1>
</body>
</html>

上の例でわかるように、JavaScript と CSS は HTML ページ内に直接含まれており、画像がどのように変換されているかがわかります。 intまたは データURL.

代わりにこれらのリソースを参照したい場合は、これらのファイルへのすべての URL リンクが絶対 URL を使用していることを確認する必要があります。これはパブリックにアクセス可能です。 これは、URL にはリソースを見つけるために必要なすべての情報が含まれていることを意味します。 絶対 URL を使用していないことが主な理由です 画像、CSS、JavaScript がレンダリングされていない HTMLを変換するとき。

これを行うには、JavaScript、CSS、画像を配置する必要があります into 個別のファイルを作成し、HTML 内で参照します。これは、以下の例のようになります。

<html>
<head>
<script src="http://www.example.com/myscript.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.example.com/mystyle.css">
</head>
<body>
<h1>Hello World</h1>
<img width="16" height="16" alt="star" src="http://www.example.com/star.gif" />
</body>
</html>