GrabzIt의 API를 사용하면 모든 HTML을 변환할 수 있습니다. into PDF, DOCX, 이미지 등. 그렇게 하려면 일반 HTML을 API에 전달해야 합니다. 예를 들어, 다음 예에 표시된 HTML과 같습니다.
<html> <body> <h1>Hello World</h1> </body> </html>
이 HTML 예제에는 HTML 및 BODY 태그가 포함되어 있지만 HTML 조각만 변환하려는 경우에는 이것이 필요하지 않습니다. 그러나 HTML 및 BODY 태그를 추가하지 않으면 일반 브라우저에서와 마찬가지로 자동으로 추가됩니다. 이에 대응하려면 아래와 같이 일부 CSS를 지정하여 BODY 태그의 추가 패딩과 여백을 제거할 수 있습니다.
<style> body{margin:0;padding:0} </style>
변환하려는 HTML에 JavaScript, 이미지 또는 CSS를 포함하려는 경우 이러한 리소스를 인라인 또는 참조 매너에 제공할 수 있습니다. 예를 들어, 아래 코드는 HTML에서 인라인 방식으로 리소스를 생성하는 방법을 보여줍니다.
<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>
위의 예에서 볼 수 있듯이 JavaScript와 CSS는 HTML 페이지 내에 직접 포함되어 있으며 이미지가 어떻게 변환되었는지 intOA 데이터 URL.
대신 이러한 리소스를 참조하려면 이러한 파일에 대한 모든 URL 링크가 공개적으로 액세스할 수 있는 절대 URL을 사용하는지 확인해야 합니다. 이는 URL에 리소스를 찾는 데 필요한 모든 정보가 포함되어 있음을 의미합니다. 절대 URL을 사용하지 않는 것이 주된 이유입니다. 이미지, CSS 및 JavaScript가 렌더링되지 않았습니다. HTML을 변환할 때.
이렇게 하려면 JavaScript, CSS 및 이미지를 넣어야 합니다. into 파일을 분리한 다음 HTML에서 참조합니다. 이는 아래 예와 유사합니다.
<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>