html 화면 png로 저장

1. js파일 다운로드

  • html2canvas : html 객체를 canvas로 변환해주는 라이브러리

html2canvas.js
0.36MB

2. html

  • 저장영역 div id값 설정
<div class="card card-default pb-5">
  <div class="save_btn"><a class="hover" href='javascript:void(0);' onclick="PrintDiv($('#bar_chart2'));">이미지로 저장</a></div> //저장 div id
  <div id="bar_chart2" > //저장 div
    <div class="card-header justify-content-center">
    	<h2 class="text-center">현재 습도 데이터</h2>
    </div>
    <div class="card-body" style="height: 300px;">
    	<canvas id="bar2"></canvas>
   		<div id='customLegend_humi' class='customLegend'></div>
    </div>
  </div>
</div>
    다운받은 js 추가
<script src="/js/html2canvas.js"></script>

3. javascript 함수 작성

//이미지(png)로 다운로드
function PrintDiv(div){
	div = div[0]
	html2canvas(div).then(function(canvas){
		var myImage = canvas.toDataURL();
		downloadURI(myImage, "저장이미지이름.png") 
	});
}

function downloadURI(uri, name){
	var link = document.createElement("a")
	link.download = name;
	link.href = uri;
	document.body.appendChild(link);
	link.click();
}

 

4. 실행

 

5. 결과

Javascript로 화면 PDF로 저장

1. 필요한 js파일 다운로드

  • html2canvas : html 객체를 canvas로 변환해주는 라이브러리
  • jspdf : html, 이미지, canvas 객체를 pdf로 변환해주는 라이브러리

html2canvas.js
0.36MB
jspdf.min.js
0.29MB

 

2. 사용되는 jsp 파일에 추가

<script src="/js/html2canvas.js"></script>
<script src="/js/jspdf.min.js"></script>

 

3. javascript 

<script>
$(document).ready(function() {
	$('#savePdf').click(function() { // pdf저장 button id
		
	    html2canvas($('#pdfDiv')[0]).then(function(canvas) { //저장 영역 div id
		
	    // 캔버스를 이미지로 변환
	    var imgData = canvas.toDataURL('image/png');
		     
	    var imgWidth = 190; // 이미지 가로 길이(mm) / A4 기준 210mm
	    var pageHeight = imgWidth * 1.414;  // 출력 페이지 세로 길이 계산 A4 기준
	    var imgHeight = canvas.height * imgWidth / canvas.width;
	    var heightLeft = imgHeight;
	    var margin = 10; // 출력 페이지 여백설정
	    var doc = new jsPDF('p', 'mm');
	    var position = 0;
	       
	    // 첫 페이지 출력
	    doc.addImage(imgData, 'PNG', margin, position, imgWidth, imgHeight);
	    heightLeft -= pageHeight;
	         
	    // 한 페이지 이상일 경우 루프 돌면서 출력
	    while (heightLeft >= 20) {
	        position = heightLeft - imgHeight;
	        doc.addPage();
	        doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
	        heightLeft -= pageHeight;
	    }
	 
	    // 파일 저장
	    doc.save('file-name.pdf');

		  
	});

	});
	
	
})



</script>
  • A4 이미지 가로길이: 210mm 
  • A4 출력여백(margin) : 20mm (좌우:10+10)
  • imgWidth : 210 - 20 = 190mm
  • 아래 그림(6) 참조

4. html

<button type="button" class="btn btn-primary" id="savePdf" >PDF 저장</button>

<div id="pdfDiv">
    (PDF 저장 내용)...
</div>

 

5. 실행

저장 버튼 클릭시 저장화면

 

6. PDF 파일

Spring MVC 에러 페이지 처리

1. web.xml에 코드 추가

<!-- error page -->
<error-page>
    <error-code>400</error-code>
    <location>/WEB-INF/views/error/400.jsp</location>
</error-page>
<error-page>
    <error-code>404</error-code>
    <location>/WEB-INF/views/error/404.jsp</location>
</error-page>
  • <error-code /> :  400, 404, 500 등 에러 코드 (정수)
  • <location /> :  에러페이지로 설정할 jsp 절대경로

 

2. 해당 경로에 jsp 파일 생성 (/WEB-INF/views/error/400.jsp)

 

 

 

Spring MVC 에러

원인 : controller에서 json으로 변환이 되지 않음.

No converter found for return value of type: class java.util.HashMap 해결 방법

 

pom.xml에 의존성 추가

<!-- jackson -->
<dependency>
  <groupId>com.fasterxml.jackson.core</groupId>
  <artifactId>jackson-core</artifactId>
  <version>2.9.2</version>
</dependency>
<dependency>
  <groupId>com.fasterxml.jackson.core</groupId>
  <artifactId>jackson-databind</artifactId>
  <version>2.9.2</version>
</dependency>

Spring MVC 에러

Handler dispatch failed; nested exception is java.lang.NoClassDefFoundError 해결 방법

 

 

pom.xml 에 의존성 추가

<dependency>
   <groupId>org.apache.httpcomponents</groupId>
   <artifactId>httpclient</artifactId>
   <version>4.5.2</version>
   <scope>runtime</scope>
 </dependency>

 

정상적으로 작동 완료 ~

1. pom.xml에 라이브러리 삽입

<!-- MySQL -->
<dependency>
	<groupId>mysql</groupId>
    <artifactId>mysql-connector-java</artifactId>
    <version>6.0.5</version>
</dependency>
 
<!-- MyBatis 3.4.1 -->
<!-- https://mvnrepository.com/artifact/org.mybatis/mybatis -->
<dependency>
  <groupId>org.mybatis</groupId>
  <artifactId>mybatis</artifactId>
  <version>3.4.1</version>
</dependency>
 
<!-- MyBatis-Spring -->
<!-- https://mvnrepository.com/artifact/org.mybatis/mybatis-spring -->
<dependency>
  <groupId>org.mybatis</groupId>
  <artifactId>mybatis-spring</artifactId>
  <version>1.3.0</version>
</dependency>
 
<!-- Spring-jdbc -->
<!-- https://mvnrepository.com/artifact/org.springframework/spring-jdbc -->
<dependency>
  <groupId>org.springframework</groupId>
  <artifactId>spring-jdbc</artifactId>
  <version>${org.springframework-version}</version>
</dependency>
 
<!-- Spring-test -->
<!-- https://mvnrepository.com/artifact/org.springframework/spring-test -->
<dependency>
  <groupId>org.springframework</groupId>
  <artifactId>spring-test</artifactId>
  <version>${org.springframework-version}</version>
</dependency>

 

2.  root-context.xml 

   <bean id="dataSource" class="org.springframework.jdbc.datasource.DriverManagerDataSource">
        <property name="driverClassName" value="com.mysql.cj.jdbc.Driver"></property>
        <property name="url" value="jdbc:mysql://URL:3306/sg?useUnicode=yes&amp;characterEncoding=utf8&amp;useSSL=false&amp;serverTimezone=UTC"></property>
        <property name="username" value="ID"></property>
        <property name="password" value="PASSWORD"></property>
    </bean> 

    <!-- mybatis SqlSessionFactoryBean -->
    <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
        <property name="dataSource" ref="dataSource"></property>
        <property name="mapperLocations" value="/WEB-INF/database/*-mapper.xml" />
    </bean>
    
    <!-- mybatis -->
    <bean id="sqlSession" class="org.mybatis.spring.SqlSessionTemplate"  destroy-method="clearCache">
        <constructor-arg name="sqlSessionFactory" ref="sqlSessionFactory"></constructor-arg> 
    </bean>
		

- WEB-INF 하위에 database 폴더 생성 : 데이터베이스 쿼리 파일(xml) 경로

 

Spring Framework 시작!

 

  •  프로젝트 생성

  1.  File > New > Other... > Wizards: spring > Spring Legacy Project 선택

 

   2. Project name 입력 > Spring MVC Project 선택

 

   3. Next > 패키지명 입력 > Finish

 

 

 

프로젝트 생성 완료!

 

 

  • Home.jsp 띄우기

 

1. tomcat 설정 ( localhost:8080/ 로 접속하기 위한 설정)

- server > 사용할 tomcat 더블클릭 

- Web Modeules > Edit... > Path > / 입력 > OK > Save 

 

2. Project Run 

- Project 선택 > 오른쪽 버튼 > Run As > Run On Server

 

- 성공!

 

+ Recent posts