Interfejs API GrabzIt pozwala na konwersję dowolnego kodu HTML into PDF, DOCX, obrazy i inne. Aby to zrobić, musisz przekazać zwykły kod HTML do naszego API. Na przykład coś w rodzaju kodu HTML pokazanego w poniższym przykładzie.
<html> <body> <h1>Hello World</h1> </body> </html>
Zauważ, że ten przykład HTML zawiera tagi HTML i BODY, ale nie jest to wymagane, jeśli chcesz po prostu przekonwertować fragment kodu HTML. Jeśli jednak nie dodasz tagów HTML i BODY, zostaną one automatycznie dodane, tak jak w zwykłej przeglądarce. Aby temu przeciwdziałać, możesz określić CSS, aby usunąć dodatkowe dopełnienie i marginesy w tagu BODY, jak pokazano poniżej.
<style>
body{margin:0;padding:0}
</style>
Jeśli chcesz uwzględnić JavaScript, obrazy lub CSS w kodzie HTML, który chcesz przekonwertować, możesz udostępnić te zasoby w formie wbudowanej lub referencyjnej. Na przykład poniższy kod pokazuje, jak tworzyć zasoby w kodzie HTML w sposób wbudowany.
<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>
Jak widać w powyższym przykładzie JavaScript i CSS są zawarte bezpośrednio na stronie HTML oraz w jaki sposób obraz został przekształcony intlub adres URL danych.
Jeśli zamiast tego chcielibyśmy odwoływać się do tych zasobów, będziemy musieli upewnić się, że wszystkie adresy URL prowadzące do tych plików używają bezwzględnych adresów URL, które są również publicznie dostępne. Oznacza to, że adres URL zawiera wszystkie informacje niezbędne do zlokalizowania zasobu. Głównym powodem jest nieużywanie bezwzględnych adresów URL obrazy, CSS i JavaScript nie zostały wyrenderowane podczas konwersji HTML.
Aby to zrobić, należy umieścić JavaScript, CSS i obraz into oddzielne pliki, a następnie odniesienia w kodzie HTML, co będzie wyglądać podobnie do poniższego przykładu.
<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>