Herramientas para capturar y convertir la web

Consejos para escribir HTML para la conversión

La API de GrabzIt le permite convertir cualquier HTML into PDF, DOCX, imágenes y más. Para hacerlo, debe pasar HTML normal a nuestra API. Por ejemplo, algo como el HTML que se muestra en el siguiente ejemplo.

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

Tenga en cuenta que este ejemplo HTML ha incluido las etiquetas HTML y BODY, pero esto no es necesario si solo desea convertir un fragmento de HTML. Sin embargo, si no agrega las etiquetas HTML y BODY, éstas se agregarán automáticamente para usted, como en un navegador normal. Para contrarrestar esto, puede especificar algo de CSS para eliminar cualquier margen adicional y márgenes en la etiqueta BODY como se muestra a continuación.

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

Si desea incluir JavaScript, imágenes o CSS en el HTML que va a convertir, puede proporcionar estos recursos en una mansión en línea o referenciada. Por ejemplo, el siguiente código muestra cómo crear recursos en el HTML de una manera en línea.

<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 puede ver en el ejemplo anterior, JavaScript y CSS están contenidos directamente dentro de la página HTML y cómo se ha transformado la imagen into URL de datos.

Si quisiéramos hacer referencia a estos recursos, tendremos que asegurarnos de que todas las URL que enlazan con estos archivos utilicen URL absolutas, que también son de acceso público. Esto significa que la URL contiene toda la información necesaria para localizar un recurso. No usar URL absolutas es la razón principal imágenes, CSS y JavaScript no se han procesado al convertir HTML.

Para hacer esto, JavaScript, CSS y la imagen tendrían que ponerse into archivos separados y luego referenciados en el HTML, que se vería como el siguiente ejemplo.

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