A API do GrabzIt permite converter qualquer HTML into PDF, DOCX, imagens e muito mais. Para fazer isso, você precisa passar HTML normal para nossa API. Por exemplo, algo como o HTML mostrado no exemplo a seguir.
<html> <body> <h1>Hello World</h1> </body> </html>
Observe que este exemplo de HTML inclui as tags HTML e BODY, mas isso não é necessário se você deseja apenas converter um trecho de HTML. No entanto, se você não adicionar as tags HTML e BODY, elas serão adicionadas automaticamente como em um navegador normal. Para neutralizar isso, você pode especificar algum CSS para remover qualquer preenchimento e margens extras na tag BODY, conforme mostrado abaixo.
<style>
body{margin:0;padding:0}
</style>
Se você deseja incluir JavaScript, imagens ou CSS no HTML que vai converter, você pode fornecer esses recursos de forma embutida ou referenciada. Por exemplo, o código abaixo mostra como criar recursos no HTML de forma embutida.
<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>
Como você pode ver no exemplo acima, o JavaScript e CSS estão contidos diretamente na página HTML e como a imagem foi transformada intou URL de dados.
Se quisermos fazer referência a esses recursos, precisaremos garantir que todos os URLs vinculados a esses arquivos usem URLs absolutos, que também são acessíveis publicamente. Isso significa que o URL contém todas as informações necessárias para localizar um recurso. Não usar URLs absolutos é o principal motivo imagens, CSS e JavaScript não foram renderizados ao converter HTML.
Para fazer isso, o JavaScript, CSS e imagem precisariam ser colocados into arquivos separados e depois referenciados no HTML, que seria algo parecido com o exemplo abaixo.
<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>