vue.js - html 화면을 이미지파일로 PDF로 저장 또는 비동기 처리 후 서버로 전송

HTML화면을 이미지로 만들어서 PDF에 넣고 다운로드하거나 서버로 전송하는 기능이 필요했다.
현재 하는프로젝트는 vue.js로 frontend를 구성하고 backend는 REST API로 구성되어 있으며
브라우저의 html화면을 pdf파일로 만들어서 서버로 보내는 기능이 필요했다.

일단 vue.js pdf 라고 구글링하면
https://medium.com/witinweb/vue-js-%ED%8A%B9%EC%A0%95-%ED%99%94%EB%A9%B4%EC%9D%98-%ED%8A%B9%EC%A0%95%EC%98%81%EC%97%AD%EC%9D%84-pdf-%EB%A1%9C-%EB%8B%A4%EC%9A%B4%EB%A1%9C%EB%93%9C%ED%95%98%EB%8A%94-%EA%B8%B0%EB%8A%A5-%EB%A7%8C%EB%93%A4%EA%B8%B0-cd904d479914

[Vue.js] 화면의 특정영역을 PDF 로 다운로드하는 기능 만들기

이분의 블로그가 제일 먼저 나오는데 코드를 너무 잘짜놓으셔서 잘 보고 붙여넣기만 하면 pdf가 생성되었다.
하지만 PDF의 윗부분에 공백이 생기는 문제(이미지 아래가 잘려보이는 느낌과 같다)가 생기길래
페이지높이와 이미지의 높이를 여러번 조정해보다가 결국 html2canvas를 버리고 dom-to-image로 변경하게 되었다.

dom-to-image도 찾아보면 레퍼런스가 있고 따라하면 금방되긴했지만 ie에서 작동하지 않아서 dom-to-image 문서를 살펴보다보니 ie에서 foreignObject를 지원하지 않기때문에 사용불가 하다는 것을 보고 좌절했다.

결국 다시 위 블로그의 html2canvas-jspdf로 원복하고 스택오버플로우에서 해결법을 찾게되었다.
pdf를 생성하는순간 스크롤이 브라우저의 최상단에 위치하고 있어야 한다는 것이고 적용하니 PDF 상단에 공백이 사라졌다.

일단 PDF가 정상적으로 생성되는것을 확인한 후 비동기 처리를 해줘야 했기에 아래와 같이 async await를 사용하여 처리하였다. pdf파일은 BLOB형태로 변경하여 FormData객체에 담아 전송하였다.

async clickBtn(){
	let pdf = await this.makePdf();
		this.formData.append(
			'pdfFile', 
			new Blob([pdf.output("blob")], { type: "application/pdf" })
);
    
    //-------- api호출
}

makePDF() {
	return new Promise(function(resolve) {
    let pdf = new jsPDF("p", "mm", "a4");
    
    // 스크롤이 탑에 있지 않으면 이미지가 아래로 쏠림 또는 상단에 공백이 생기는 문제가 있음
    window.scrollTo(0, 0);
    
    // PDF생성코드
    
    resolve(pdf);
    });
}