Tools zum Erfassen und Konvertieren des Webs

Tipps zum Schreiben von HTML für die Konvertierung

Mit der API von GrabzIt können Sie HTML-Code konvertieren into PDF, DOCX, Bilder und mehr. Dazu müssen Sie reguläres HTML an unsere API übergeben. Zum Beispiel so etwas wie das im folgenden Beispiel gezeigte HTML.

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

Beachten Sie, dass dieses HTML-Beispiel die HTML- und BODY-Tags enthält, dies jedoch nicht erforderlich ist, wenn Sie nur einen HTML-Ausschnitt konvertieren möchten. Wenn Sie jedoch die HTML- und BODY-Tags nicht hinzufügen, werden diese wie in einem normalen Browser automatisch für Sie hinzugefügt. Um dem entgegenzuwirken, können Sie CSS angeben, um zusätzliche Auffüllungen und Ränder auf dem BODY-Tag zu entfernen, wie unten gezeigt.

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

Wenn Sie JavaScript, Bilder oder CSS in den zu konvertierenden HTML-Code aufnehmen möchten, können Sie diese Ressourcen in einem Inline- oder referenzierten Manor bereitstellen. Der folgende Code zeigt beispielsweise, wie Ressourcen im HTML-Code inline erstellt werden.

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

Wie Sie im obigen Beispiel sehen können, sind JavaScript und CSS direkt in der HTML-Seite enthalten und wie das Bild transformiert wurde intoa Daten-URL.

Wenn wir stattdessen auf diese Ressourcen verweisen möchten, müssen wir sicherstellen, dass alle URLs, die auf diese Dateien verweisen, absolute URLs verwenden, die auch öffentlich zugänglich sind. Dies bedeutet, dass die URL alle Informationen enthält, die zum Auffinden einer Ressource erforderlich sind. Der Hauptgrund ist, keine absoluten URLs zu verwenden Bilder, CSS und JavaScript wurden nicht gerendert beim Konvertieren von HTML.

Dazu müssten JavaScript, CSS und Bild eingefügt werden into Dateien trennen und dann im HTML referenzieren, was ungefähr so ​​aussieht wie im folgenden Beispiel.

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