웹 캡처 및 변환 도구

변환을위한 HTML 작성 팁

GrabzIt의 API를 사용하면 HTML을 변환 할 수 있습니다 into PDF, DOCX, 이미지 등. 그렇게하려면 일반 HTML을 API에 전달해야합니다. 예를 들어, 다음 예에 표시된 HTML과 같은 것입니다.

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

이 HTML 예제에는 HTML 및 BODY 태그가 포함되어 있지만 HTML 스 니펫 만 변환하려는 경우에는 필요하지 않습니다. 그러나 HTML 및 BODY 태그를 추가하지 않으면 일반 브라우저 에서처럼 자동으로 추가됩니다. 이를 방지하기 위해 아래와 같이 BODY 태그에서 추가 패딩 및 여백을 제거하도록 일부 CSS를 지정할 수 있습니다.

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