html rendered html page copy ( 소스가 변환되어 생성된 html 페이지 복사 )

DevOps/Web 2022. 7. 27. 17:40

내용

html 페이지를 복사 이후 메일내용에 첨부하고 싶을때,

렌더링된 이후 페이지와 동일한 형태를 클립보드에 복사하여 붙여넣기

 

방법

html

<div id="test_div" name="test_div">
      ~~~~~~~~
</div>

 

javascript

function page_page(){

    var htmlEditor = document.getElementById("test_div")

    var container = document.createElement('div')
    container.innerHTML = htmlEditor.outerHTML
    container.style.position = 'fixed'
    container.style.pointerEvents = 'none'
    container.style.opacity = 0
    document.body.appendChild(container)
    window.getSelection().removeAllRanges()
    var range = document.createRange()
    range.selectNode(container)
    window.getSelection().addRange(range)
    document.execCommand('copy')
    document.body.removeChild(container);

    showAlert('Page Copy', 'Page Copy Successful !!', 2, 2000);
}

참고

https://stackoverflow.com/questions/62833657/is-there-any-way-to-copy-the-rendered-html-of-a-div

저작자표시 비영리 변경금지

'DevOps > Web' 카테고리의 다른 글

javascript로 html page parameter 추출  (0) 2022.07.28
html div page code copy ( html 페이지 코드 복사 )  (0) 2022.07.27
html page snapshot -> html2canvas ( html 화면 이미지로 변환 )  (0) 2022.07.27
html <div>, <span> tag 개념과 차이점  (0) 2022.07.27
html div style display 속성을 사용하여 화면 출력/숨김  (0) 2022.07.27
  • By SJinDBA

html page snapshot -> html2canvas ( html 화면 이미지로 변환 )

DevOps/Web 2022. 7. 27. 17:23

내용

html page를 이미지 형태로 변환하여 저장 or 확인하는 기능

 

방법

html2canvas 사용

 

html

<!-- jQuery -->
<script src="~/plugins/jquery/jquery.min.js"></script>
<!-- html2canvas -->
<script src="~/plugins/html2canvas/html2canvas.min.js"></script>


<div id='myCanvas' class='target' style='border:1px solid gray;width:200px;height:200px'>
    <div style='border:1px solid green;width:180px;height:250px'>Hello world</div>
 </div>

 

javascript

    saveAS 함수를 생성해두고 호출하는 방식

    canvas_height, canvas_widtht 의 경우 설정하지 않아도 상관없으나, 옵션 설정 방법을 위해 작성됨

function saveAs(uri, filename) {
    var link = document.createElement('a');
    if (typeof link.download === 'string') {
        link.href = uri;
        link.download = filename;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    } else {
        window.open(uri);
    }
}

function page_snapshot()
{
    const canvas_height = document.querySelector('#myCanvas').offsetHeight
    const canvas_widtht = document.querySelector('#myCanvas').offsetWidth

    html2canvas(document.querySelector("#myCanvas"),{"width": canvas_widtht, "height": canvas_height}).then(canvas => {
        canvas_filename = 'myCanvas_img.jpeg'
        saveAS(canvas.toDataURL("image/jpeg"), canvas_filename);
    });
}

참고

https://lts0606.tistory.com/270

https://html2canvas.hertzen.com/

https://every-time-i-pass-this-place.tistory.com/entry/html2canvas-%EC%82%AC%EC%9A%A9%EB%B2%95-%EC%BA%A1%EC%B2%98%EB%A5%BC-%EC%9D%B4%EB%AF%B8%EC%A7%80%EB%A1%9C-%EB%8B%A4%EC%9A%B4%EB%A1%9C%EB%93%9C

저작자표시 비영리 변경금지

'DevOps > Web' 카테고리의 다른 글

html div page code copy ( html 페이지 코드 복사 )  (0) 2022.07.27
html rendered html page copy ( 소스가 변환되어 생성된 html 페이지 복사 )  (0) 2022.07.27
html <div>, <span> tag 개념과 차이점  (0) 2022.07.27
html div style display 속성을 사용하여 화면 출력/숨김  (0) 2022.07.27
javascript 프로그램 실행 지연(sleep)  (0) 2022.07.27
  • By SJinDBA

html <div>, <span> tag 개념과 차이점

DevOps/Web 2022. 7. 27. 17:03

1. <div> 태그란?

<div>tag란 division, 분할, 분배, 분류를 뜻합니다. html 안에 존재하는 여러 개의 태그들을 <div>라는 큰 단위로 묶어주는 주머니 역할을 한다. 큰 단위인 <div>로 묶어주면, 나중에 css로 <div>에만 수식을 해도 <div>태그 안에 속해있는 태그들이 모두 같은 명령을 받아 동일하게 적용된다.

​

만약 코드가 1,000줄이 넘고 코드도 다른 코드 30개들이 있는데 여기에 모두 동일한 효과를 적용시켜야 된다고 하면, 코드 하나하나에 효과를 넣는 게 아니라 <div> 태그로 묶어 나중에 css로 30여 개의 코드에 동일한 효과를 적용시킬 때 사용한다.

​

<div> 태그는 block level element (블록 라벨 엘리먼트)라 해당하는 코드의 행 전체를 차지한다. 다만, <div> 태그는 이렇게 묶어주는 주머니 역할이기 때문에 <div>태그 자체로는 시각적인 변화를 나타낼 수 없다.

 

 

2. <span> 태그란?

<span> 태그도 <div>태그와 같이 여러 개의 태그들을 묶어주는 주머니 역할을 한다. <span>태그는 inline element (인라인 엘리먼트)라 자신의 content 만큼 공간을 차지한다. <span> 태그는 이렇게 묶어주는 주머니 역할이기 때문에 <span>태그 자체로는 시각적인 변화를 나타낼 수 없다.

​

3. <div>, <span> tag 출력하기

​

■ <div> tag 출력하기

<div> 텍스트 텍스트 </div>
<div> 텍스트 텍스트 </div>

■ <span> tag 출력하기

 

<span> 텍스트 텍스트 </span>
<span> 텍스트 텍스트 </span>

​

4.<p>, <div>, <span>tag의 차이점

​

<p>, <div>, <span> 태그가 뭐가 다른 건지 의문을 품게 될 때가 있다. 웹 제작 수업 선생님께 여쭤보니 아래처럼 가르쳐주셨다. 궁금하셨던 분들은 참고하시면 좋을듯하다.

​

■ <p> : 문단 분량의 content + 상하 margin이 있음

▲ <p> tag css box 조회화면 / 파란색 : content, 주황색 : margin

​

■ <div> : block level element (블록 라벨 엘리먼트) - 화면 전체를 쓰는 애들. content에 해당하는 <div>라는 텍스트가 행 전체를 차지하고 있다.

▲ <div> tag css box 조회화면 / 파란색 : content

​

■ <span> : inline element (인라인 엘리먼트) - 자기 content 만큼의 테두리를 쓰는 애들. content에 해당하는 <span>이라는 텍스트가 자기만큼의 공간을 차지하는 것을 볼 수 있다.

저작자표시 비영리 변경금지

'DevOps > Web' 카테고리의 다른 글

html rendered html page copy ( 소스가 변환되어 생성된 html 페이지 복사 )  (0) 2022.07.27
html page snapshot -> html2canvas ( html 화면 이미지로 변환 )  (0) 2022.07.27
html div style display 속성을 사용하여 화면 출력/숨김  (0) 2022.07.27
javascript 프로그램 실행 지연(sleep)  (0) 2022.07.27
summernote reset 이후 pasteHTML 사용시 <p><br></p> 제거  (0) 2022.07.14
  • By SJinDBA

to Top

티스토리툴바