Tools om het web vast te leggen en te converteren

Tips voor het schrijven van HTML voor conversie

Met de API van GrabzIt kunt u elke HTML converteren into PDF, DOCX, afbeeldingen en meer. Om dit te doen, moet u gewone HTML doorgeven aan onze API. Bijvoorbeeld zoiets als de HTML die in het volgende voorbeeld wordt getoond.

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

Merk op dat dit HTML-voorbeeld de HTML- en BODY-tags bevat, maar dit is niet vereist als u slechts een stukje HTML wilt converteren. Als u echter de HTML- en BODY-tags niet toevoegt, worden deze automatisch voor u toegevoegd, net als in een normale browser. Om dit tegen te gaan, kunt u wat CSS specificeren om eventuele extra opvulling en marges op de BODY-tag te verwijderen, zoals hieronder weergegeven.

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

Als u JavaScript, afbeeldingen of CSS wilt opnemen in de HTML die u gaat converteren, kunt u deze bronnen in een inline- of referentieland aanleveren. De onderstaande code laat bijvoorbeeld zien hoe u op een inline manier bronnen in de HTML kunt maken.

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

Zoals u in het bovenstaande voorbeeld kunt zien, bevinden JavaScript en CSS zich rechtstreeks in de HTML-pagina en ziet u hoe de afbeelding is getransformeerd intof gegevens URL.

Als we in plaats daarvan naar deze bronnen willen verwijzen, moeten we ervoor zorgen dat alle URL's die naar deze bestanden linken, absolute URL's gebruiken, die ook openbaar toegankelijk zijn. Dit betekent dat de URL alle informatie bevat die nodig is om een ​​bron te lokaliseren. Het niet gebruiken van absolute URL's is de belangrijkste reden afbeeldingen, CSS en JavaScript zijn niet weergegeven bij het converteren van HTML.

Om dit te doen moeten JavaScript, CSS en afbeelding worden geplaatst into afzonderlijke bestanden en waarnaar vervolgens wordt verwezen in de HTML, wat er ongeveer zo uit zou zien als in het onderstaande voorbeeld.

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