jspdf 라이브러리를 server-side에서 사용 시도 (실패)

jspdf란?

jspdf를 활용한 PDF 생성

server-side에서 사용 가능한가?

기본적으로 client-side 동작 방식을 지원하지만 html→pdf 방식이 아닌 pdf를 직접 만드는 방식은 server-side에서도 동작 가능.

var doc = new jsPDF();
doc.text(20, 20, 'Hello world!');
doc.text(20, 30, 'This is client-side Javascript, pumping out a PDF.');
doc.addPage();
doc.text(20, 20, 'Do you like that?');

doc.save('test.pdf');

그렇지만 내가 필요한 건 html→pdf 방식을 server에서 사용하는 것.

 

server-side에서 사용 시도

일단 무작정 파일을 읽어서 변경해 보라고 시도.

import { jsPDF } from "jspdf";

var pdf = new jsPDF('p', 'pt', 'a4');

fs.readFile('../test.html', 'utf8', (err, data) => {
    if (err) {
        console.log(err);
        return;
    }

    pdf.html(data, {
        callback: (pdf) => {
            pdf.save('test.pdf');
        }
    });
})

당연하게 실패. 안된다고 명시된 것을 시도했으니 그럴만하다.

 

뭐가 문제인가 봤더니 html을 단순히 문자열로 읽어왔기에 pdf로 변환이 안된다고 함.

그렇다면 html을 문자열이 아닌 dom 형태로 넣어주면 해결되지 않을까? → jsdom이라는 dom형태로 만들어주는 모듈 추가.

import { jsPDF } from "jspdf";
import { JSDOM } from "jsdom";\

var pdf = new jsPDF('p', 'pt', 'a4');

fs.readFile('../test.html', 'utf8', (err, data) => {
    if (err) {
        console.log(err);
        return;
    }
    
    var { window } = new JSDOM.JSDOM(data);

    pdf.html(window.document, {
        callback: (pdf) => {
            pdf.save('test.pdf');
        }
    });
})

결과는 실패.

이유를 찾아봤더니 jsdom이 만들어준 dom 형태와 html에서의 dom 형태가 차이가 있어서라고함.

아쉽게도 성공적인 결과를 내지는 못했다…