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タグを追加しない場合、これらは通常のブラウザーと同様に自動的に追加されます。 これに対抗するために、以下に示すように、BODYタグの余分なパディングとマージンを削除するCSSを指定できます。

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