웹 캡처 및 변환 도구

변환을위한 HTML 작성 팁

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>