Angular.JS에서 PDF를 받고 다운로드하는 방법-JS 튜토리얼-php.cn

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

高洛峰

풀어 주다： 2016-12-05 11:13:52

원래의

1798명이 탐색했습니다.

소개

jsPDF는 Javascript 언어를 사용하여 PDF를 생성하는 오픈 소스 라이브러리입니다. Firefox 플러그인, 서버측 스크립트 또는 브라우저 스크립트에서 사용할 수 있습니다.

클라이언트 Safari와 iPhone Safari가 가장 잘 지원되며 Windows에서는 Opera와 Firefox 3가 그 뒤를 따릅니다. IE는 아직 지원하지 않습니다.

샘플 코드:

var doc = new jsPDF();
doc.text(20, 20, &#39;Hello world.&#39;);
doc.save(&#39;Test.pdf&#39;);

로그인 후 복사

서버 측이 완벽하게 실행될 수 있습니다.

jsPDF는 사용하기 쉽지만 중국어를 지원하지 않습니다.

pdfmake는 중국어를 지원하지만 글꼴 파일도 도입해야 하기 때문에 파일 크기가 10MB를 넘을 수 있습니다. 프론트 엔드에는 적합하지 않습니다.

pdfmake는 전적으로 JavaScript를 기반으로 개발된 클라이언트-서버 기반 PDF 인쇄 솔루션입니다. 강력한 조판 엔진 제공

설치:

client-version bower install pdfmake
server-version npm install pdfmake

로그인 후 복사

마지막으로 백엔드는 PDF를 생성하는 데 사용되며 프런트엔드는 인터페이스를 통해 요청합니다. , 백엔드는 PDF 스트림을 반환하고 마지막으로 프런트 엔드는 Blob을 통해 PDF를 생성하고 다운로드합니다.

AngularJS 솔루션

$http.get(&#39;/receivePDFUrl&#39;, {responseType: &#39;arraybuffer&#39;}) // 设置$http get请求的responseType为arraybuffer
 .success(function(data){
  var file = new Blob([data], {type: &#39;application/pdf&#39;}); // 使用Blob将PDF Stream 转换为file
  var fileUrl = URL.createOjectURL(file);
  window.open(fileUrl); // 在新的页面中打开PDF
 })

로그인 후 복사

PDF 파일 이름 설정 방법

$http.get(&#39;/receivePDFUrl&#39;, {responseType: &#39;arraybuffer&#39;}) // 设置$http get请求的responseType为arraybuffer
 .success(function(data){
  var file = new Blob([data], {type: &#39;application/pdf&#39;}); // 使用Blob将PDF Stream 转换为file
  var fileUrl = URL.createOjectURL(file);
  var a = document.createElement(&#39;a&#39;);
  a.href = fileURL;
  a.target = &#39;_blank&#39;;
  a.download = &#39;yourfilename.pdf&#39;;  
  document.body.appendChild(a);  
   a.click();
 })

로그인 후 복사

발생한 문제

백엔드는 재설정 API를 사용하여 인터페이스를 작성합니다. 프런트엔드 프레임워크는 AngularJS를 사용하므로 $resouce를 사용하여 인터페이스를 호출합니다. ResponseType: arraybuffer도 설정되어 있지만 생성된 PDF를 열 수 없습니다. 결국에는 $http.get() 메소드를 사용하십시오.

호환성 문제

HTML5 API: Bolb를 사용하기 때문에 IE10+만 지원할 수 있습니다.