소개
jsPDF는 Javascript 언어를 사용하여 PDF를 생성하는 오픈 소스 라이브러리입니다. Firefox 플러그인, 서버측 스크립트 또는 브라우저 스크립트에서 사용할 수 있습니다.
클라이언트 Safari와 iPhone Safari가 가장 잘 지원되며 Windows에서는 Opera와 Firefox 3가 그 뒤를 따릅니다. IE는 아직 지원하지 않습니다.
샘플 코드:
var doc = new jsPDF(); doc.text(20, 20, 'Hello world.'); doc.save('Test.pdf');
서버 측이 완벽하게 실행될 수 있습니다.
jsPDF는 사용하기 쉽지만 중국어를 지원하지 않습니다.
pdfmake는 중국어를 지원하지만 글꼴 파일도 도입해야 하기 때문에 파일 크기가 10MB를 넘을 수 있습니다. 프론트 엔드에는 적합하지 않습니다.
pdfmake는 전적으로 JavaScript를 기반으로 개발된 클라이언트-서버 기반 PDF 인쇄 솔루션입니다. 강력한 조판 엔진 제공
설치:
client-version bower install pdfmake server-version npm install pdfmake
마지막으로 백엔드는 PDF를 생성하는 데 사용되며 프런트엔드는 인터페이스를 통해 요청합니다. , 백엔드는 PDF 스트림을 반환하고 마지막으로 프런트 엔드는 Blob을 통해 PDF를 생성하고 다운로드합니다.
AngularJS 솔루션
$http.get('/receivePDFUrl', {responseType: 'arraybuffer'}) // 设置$http get请求的responseType为arraybuffer .success(function(data){ var file = new Blob([data], {type: 'application/pdf'}); // 使用Blob将PDF Stream 转换为file var fileUrl = URL.createOjectURL(file); window.open(fileUrl); // 在新的页面中打开PDF })
PDF 파일 이름 설정 방법
$http.get('/receivePDFUrl', {responseType: 'arraybuffer'}) // 设置$http get请求的responseType为arraybuffer .success(function(data){ var file = new Blob([data], {type: 'application/pdf'}); // 使用Blob将PDF Stream 转换为file var fileUrl = URL.createOjectURL(file); var a = document.createElement('a'); a.href = fileURL; a.target = '_blank'; a.download = 'yourfilename.pdf'; document.body.appendChild(a); a.click(); })
발생한 문제
백엔드는 재설정 API를 사용하여 인터페이스를 작성합니다. 프런트엔드 프레임워크는 AngularJS를 사용하므로 $resouce를 사용하여 인터페이스를 호출합니다. ResponseType: arraybuffer도 설정되어 있지만 생성된 PDF를 열 수 없습니다. 결국에는 $http.get() 메소드를 사용하십시오.
호환성 문제
HTML5 API: Bolb를 사용하기 때문에 IE10+만 지원할 수 있습니다.