[angularjs] AngularJS 앱에서 Blob (.pdf)을 표시하는 방법

Program / 글쓴이

$http.post응답 에서 blob으로 얻고있는 pdf 파일을 표시하려고했습니다 . <embed src>예를 들어 pdf는 앱 내에 표시되어야합니다 .

몇 개의 스택 게시물을 보았지만 어떻게 든 내 예제가 작동하지 않는 것 같습니다.

JS :

이 문서 에 따르면 , 나는 계속해서 시도했습니다 …

$http.post('/postUrlHere',{myParams}).success(function (response) {
 var file = new Blob([response], {type: 'application/pdf'});
 var fileURL = URL.createObjectURL(file);
 $scope.content = fileURL;
});

이제 내가 이해 한 fileURL바에 따르면 블로그가 참조로 사용할 수있는 임시 URL을 만듭니다.

HTML :

<embed src="{{content}}" width="200" height="200"></embed>

Angular에서 이것을 처리하는 방법을 잘 모르겠습니다. 이상적인 상황은 (1) 범위에 할당하고, (2) blob을 pdf로 ‘준비 / 재 작성’ (3) 사용하여 HTML에 전달하는 <embed>것입니다. 앱 내에 표시하고 싶습니다.

나는 지금 하루 이상 연구를 해왔지만 어떻게 든 이것이 Angular에서 어떻게 작동하는지 이해할 수없는 것 같습니다. 그리고 거기에있는 pdf 뷰어 라이브러리에 옵션이 없다고 가정합시다.

답변

먼저을로 설정해야 responseType합니다 arraybuffer. 데이터 Blob을 만들려는 경우 필요합니다. Sending_and_Receiving_Binary_Data를 참조하십시오 . 따라서 코드는 다음과 같습니다.

$http.post('/postUrlHere',{myParams}, {responseType:'arraybuffer'})
  .success(function (response) {
       var file = new Blob([response], {type: 'application/pdf'});
       var fileURL = URL.createObjectURL(file);
});

다음 부분은 $ sce 서비스를 사용하여 URL을 각도 신뢰하도록해야합니다. 이것은 다음과 같은 방법으로 수행 할 수 있습니다.

$scope.content = $sce.trustAsResourceUrl(fileURL);

$ sce 서비스 를 삽입하는 것을 잊지 마십시오 .

이 작업이 모두 완료되면 이제 PDF를 포함 할 수 있습니다.

<embed ng-src="{{content}}" style="width:200px;height:200px;"></embed>

답변

AngularJS v1.3.4를 사용합니다.

HTML :

<button ng-click="downloadPdf()" class="btn btn-primary">download PDF</button>

JS 컨트롤러 :

'use strict';
angular.module('xxxxxxxxApp')
    .controller('xxxxController', function ($scope, xxxxServicePDF) {
        $scope.downloadPdf = function () {
            var fileName = "test.pdf";
            var a = document.createElement("a");
            document.body.appendChild(a);
            a.style = "display: none";
            xxxxServicePDF.downloadPdf().then(function (result) {
                var file = new Blob([result.data], {type: 'application/pdf'});
                var fileURL = window.URL.createObjectURL(file);
                a.href = fileURL;
                a.download = fileName;
                a.click();
            });
        };
});

JS 서비스 :

angular.module('xxxxxxxxApp')
    .factory('xxxxServicePDF', function ($http) {
        return {
            downloadPdf: function () {
            return $http.get('api/downloadPDF', { responseType: 'arraybuffer' }).then(function (response) {
                return response;
            });
        }
    };
});

자바 REST 웹 서비스-Spring MVC :

@RequestMapping(value = "/downloadPDF", method = RequestMethod.GET, produces = "application/pdf")
    public ResponseEntity<byte[]> getPDF() {
        FileInputStream fileStream;
        try {
            fileStream = new FileInputStream(new File("C:\\xxxxx\\xxxxxx\\test.pdf"));
            byte[] contents = IOUtils.toByteArray(fileStream);
            HttpHeaders headers = new HttpHeaders();
            headers.setContentType(MediaType.parseMediaType("application/pdf"));
            String filename = "test.pdf";
            headers.setContentDispositionFormData(filename, filename);
            ResponseEntity<byte[]> response = new ResponseEntity<byte[]>(contents, headers, HttpStatus.OK);
            return response;
        } catch (FileNotFoundException e) {
           System.err.println(e);
        } catch (IOException e) {
            System.err.println(e);
        }
        return null;
    }

답변

michael의 제안은 나를위한 매력처럼 작동합니다. 🙂 $ http.post를 $ http.get으로 바꾸면 .get 메소드가 3 개 대신 2 개의 매개 변수를 허용한다는 점을 기억하세요 … 이것은 내 시간을 낭비하는 곳입니다 …;)

제어 장치:

$http.get('/getdoc/' + $stateParams.id,     
{responseType:'arraybuffer'})
  .success(function (response) {
     var file = new Blob([(response)], {type: 'application/pdf'});
     var fileURL = URL.createObjectURL(file);
     $scope.content = $sce.trustAsResourceUrl(fileURL);
});

전망:

<object ng-show="content" data="{{content}}" type="application/pdf" style="width: 100%; height: 400px;"></object>

답변

Opera Browser에서 “window.URL”을 사용하면 “정의되지 않음”이 발생하므로 어려움에 직면했습니다. 또한 window.URL을 사용하면 PDF 문서가 Internet Explorer 및 Microsoft Edge에서 열리지 않습니다 (영원히 대기 상태로 유지됨). IE, Edge, Firefox, Chrome 및 Opera에서 작동하는 다음 솔루션을 생각해 냈습니다 (Safari에서 테스트하지 않음).

$http.post(postUrl, data, {responseType: 'arraybuffer'})
.success(success).error(failed);

function success(data) {
   openPDF(data.data, "myPDFdoc.pdf");
};

function failed(error) {...};

function openPDF(resData, fileName) {
    var ieEDGE = navigator.userAgent.match(/Edge/g);
    var ie = navigator.userAgent.match(/.NET/g); // IE 11+
    var oldIE = navigator.userAgent.match(/MSIE/g); 

    var blob = new window.Blob([resData], { type: 'application/pdf' });

    if (ie || oldIE || ieEDGE) {
       window.navigator.msSaveBlob(blob, fileName);
    }
    else {
       var reader = new window.FileReader();
       reader.onloadend = function () {
          window.location.href = reader.result;
       };
       reader.readAsDataURL(blob);
    }
}

도움이되었는지 알려주세요! 🙂

답변

angular에서 만들어진 요청에 responseType 을 추가 하는 것이 실제로 해결책이지만, 저에게는 responseType 을 arrayBuffer가 아닌 blob으로 설정 하기 전까지는 작동하지 않았습니다 . 코드는 자명합니다.

    $http({
            method : 'GET',
            url : 'api/paperAttachments/download/' + id,
            responseType: "blob"
        }).then(function successCallback(response) {
            console.log(response);
             var blob = new Blob([response.data]);
             FileSaver.saveAs(blob, getFileNameFromHttpResponse(response));
        }, function errorCallback(response) {   
        });

답변

나는 지난 며칠 동안 pdf와 이미지를 다운로드하려고 애썼다. 내가 다운로드 할 수있는 것은 단순한 텍스트 파일 뿐이었다.

대부분의 질문에는 동일한 구성 요소가 있지만 올바른 순서를 파악하는 데 시간이 걸렸습니다.

@Nikolay Melnikov에게 감사드립니다.이 질문에 대한 귀하의 의견 / 답장은 그것이 효과가 있었던 이유였습니다.

간단히 말해서 내 AngularJS 서비스 백엔드 호출은 다음과 같습니다.

  getDownloadUrl(fileID){
    //
    //Get the download url of the file
    let fullPath = this.paths.downloadServerURL + fileId;
    //
    // return the file as arraybuffer 
    return this.$http.get(fullPath, {
      headers: {
        'Authorization': 'Bearer ' + this.sessionService.getToken()
      },
      responseType: 'arraybuffer'
    });
  }

내 컨트롤러에서 :

downloadFile(){
   myService.getDownloadUrl(idOfTheFile).then( (response) => {
      //Create a new blob object
      let myBlobObject=new Blob([response.data],{ type:'application/pdf'});

      //Ideally the mime type can change based on the file extension
      //let myBlobObject=new Blob([response.data],{ type: mimeType});

      var url = window.URL || window.webkitURL
      var fileURL = url.createObjectURL(myBlobObject);
      var downloadLink = angular.element('<a></a>');
      downloadLink.attr('href',fileURL);
      downloadLink.attr('download',this.myFilesObj[documentId].name);
      downloadLink.attr('target','_self');
      downloadLink[0].click();//call click function
      url.revokeObjectURL(fileURL);//revoke the object from URL
    });
}

답변

가장 최근 답변 (Angular 8+의 경우) :

this.http.post("your-url",params,{responseType:'arraybuffer' as 'json'}).subscribe(
  (res) => {
    this.showpdf(res);
  }
)};

public Content:SafeResourceUrl;
showpdf(response:ArrayBuffer) {
  var file = new Blob([response], {type: 'application/pdf'});
  var fileURL = URL.createObjectURL(file);
  this.Content = this.sanitizer.bypassSecurityTrustResourceUrl(fileURL);
}

  HTML :

  <embed [src]="Content" style="width:200px;height:200px;" type="application/pdf" />