웹 캡처 및 변환 도구

JavaScript 스크린 샷 API로 Div 캡처

자바 스크립트 API

일반적인 요구 사항은 HTML 페이지에서 단일 HTML 요소의 내용 만 캡처하는 방법입니다. 예를 들어 div, span 또는 canvas 요소.

그러나 클라이언트 측 코드를 사용하여 단일 HTML 요소를 캡처하기 전에. 이미지, PDF 또는 DOCX 스크린 샷과 같은 당신은해야합니다 무료 가입 그런 다음 다운로드 무료 JavaScript 라이브러리.

이 작업이 완료되면 HTML 요소를 쉽게 캡처 할 수 있습니다. 당신은 단지 통과해야합니다 CSS 선택기 캡처하려는 요소의 목표 매개 변수입니다.

CSS 선택기를 구성하려면 캡처 할 HTML 요소를 찾아야합니다. 이렇게하려면 대상 웹 페이지의 소스를 살펴보십시오. 그 예가 아래에 나와 있습니다.

<div id="features">
	<h4>Acme Camera</h4>
	<label>Price</label>$399<br />
	<label>Rating</label>4.5 out of 5
</div>
<p>Cras ut velit sed purus porttitor aliquam. Nulla tristique magna ac libero tempor, ac vestibulum felisvulput ate. Nam ut velit
risus porttitor tristique at ac diam. Sed nisi risus, rutrum a metus suscipit, euismod tristique nulla. Etiam venenatis rutrum
blandit. In hac habitasse platea dictumst. Suspendisse potenti. Phasellus eget vehicula felis.</p>

예를 들어 위의 div 만 스크린 샷을 features다운로드 할 수 있습니다 GrabzIt JavaScript 라이브러리 아래의 JavaScript 코드를 사용하십시오.

이 JavaScript는 결과 이미지 스크린 샷을 대상 HTML 요소와 동일한 크기로 자동 크기 조정합니다. bheight, heightwidth 매개 변수 -1로 페이지가로드되면 이미지와 동일한 위치에 이미지 스크린 샷이 생성됩니다. script 꼬리표. 여기에는 모든 내용이 포함됩니다 features div와 다른 것은 없습니다.

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
<script type="text/javascript">
GrabzIt("Sign in to view your Application Key").ConvertURL("http://www.example.com/my-page.html",
{"target": "#features", "bheight": -1, "height": -1, "width": -1}).Create();
</script>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
<script type="text/javascript">
GrabzIt("Sign in to view your Application Key").ConvertURL("http://www.example.com/my-page.html",
{"target": "#features", "format": "pdf"}).Create();
</script>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
<script type="text/javascript">
GrabzIt("Sign in to view your Application Key").ConvertURL("http://www.example.com/my-page.html",
{"target": "#features", "format": "docx"}).Create();
</script>

물론 HTML을 이미지, PDF 또는 DOCX로 변환 할 때 HTML 요소를 캡처 할 수도 있습니다. 방법을 교체하십시오. ConvertURLConvertHTML 위.

동적 컨텐츠 캡처

사용자가 페이지 내용을 캡처 한 후 종종 int예를 들어 양식을 작성한 후 어떤 식 으로든 오류가 발생했습니다. GrabzIt은 ConvertPage 방법. 웹 페이지의 URL과 함께 웹 페이지의 현재 HTML을 GrabzIt에 보냅니다. 그런 다음 브라우저에서 다시 작성되어 변환됩니다. into 이미지, DOCX 또는 PDF 문서.

그러나하기 위해 URL을 통해 참조되는 CSS 또는 이미지와 같은 리소스를 해결합니다. 이 메소드는 웹 페이지에서 액세스 할 수있는 웹 페이지에서 호출해야합니다. internet.

<div id="divSection">
    <form id="myForm">
        <label>Name</label><input type="text" name="name" />
        <label>Age</label><input type="text" name="age" />
        <input type="button" data-gt-translate-attributes='[{"attribute":"value","format":"json"}]' value="Save"/>
    </form>
</div>

이 예제는 웹 페이지 소스의 사본을 작성하여 양식 값으로 업데이트하고 GrabzIt에 전달하여 변환합니다. 우리는 div 만 캡처하고 싶기 때문에 divSection위에 표시된대로 대상으로 전달합니다. 그러나 사용자가 업데이트 한 JSON 매개 변수를 지정하고 전체 웹 페이지를 캡처 할 수 없습니다.

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertPage({"target": "#divSection", "bheight": -1, "height": -1, "width": -1}).Create();
</script>

HTML 요소를 타겟팅 할 때 PDF가 잘리는 방법 이 기술을 사용하여 제어.

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertPage({"target": "#divSection", "format": "pdf"}).Create();
</script>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertPage({"target": "#divSection", "format": "docx"}).Create();
</script>

캡처하는 웹 사이트의 특성에 따라이 방법을 사용하여 콘텐츠를 캡처 할 수도 있습니다 로그인 뒤에. 원하는대로 대상 매개 변수를 사용하거나 사용하지 않고 위의 방법을 사용하십시오. 그러면 페이지 리소스가 제한되지 않는 한 사용자가 보는 것처럼 웹 페이지 콘텐츠를 캡처 할 수 있어야합니다.