Angular.JS에서 PDF를 받고 다운로드하는 방법

소개

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+만 지원할 수 있습니다.