วิธีแสดง blob (.pdf) ในแอพ AngularJS


107

ฉันพยายามแสดงไฟล์ pdf ซึ่งฉันได้รับเป็นหยดจากการ$http.postตอบสนอง pdf ต้องแสดงภายในแอพโดยใช้<embed src>ตัวอย่างเช่น

ฉันเจอโพสต์สแต็กสองสามโพสต์ แต่ตัวอย่างของฉันดูเหมือนจะไม่ได้ผล

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) 'เตรียม / สร้างใหม่' หยดเป็น pdf (3)ส่งต่อไปยัง HTML โดยใช้<embed>เพราะฉัน ต้องการแสดงภายในแอป

ฉันค้นคว้ามานานกว่าหนึ่งวันแล้ว แต่ดูเหมือนว่าฉันจะไม่เข้าใจว่ามันทำงานอย่างไรใน Angular ... และสมมติว่าไลบรารีโปรแกรมดู pdf ไม่มีตัวเลือก


สวัสดี D'lo DeProjuicer คุณจัดการปัญหาในการสร้าง PDF ผ่านเชิงมุมได้หรือไม่?
Raymond Nakampe

@michael D'lo DeProjuicer กรณีเดียวกันใน angular 2 ควรทำอย่างไร
โมนิกา

คำตอบ:


215

ก่อนอื่นคุณต้องตั้งค่าการresponseType arraybufferสิ่งนี้จำเป็นหากคุณต้องการสร้างหยดข้อมูลของคุณ ดู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เพื่อให้ angular เชื่อถือ url ของคุณ สามารถทำได้ด้วยวิธีนี้:

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

อย่าลืมฉีดบริการ$ sce

หากเสร็จสิ้นคุณสามารถฝัง pdf ของคุณได้แล้ว:

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

9
สำหรับฉันสิ่งนี้ใช้ไม่ได้ใน Chrome (35.0.1916.114 ม.) แก้ไขได้โดยใช้ <object> แทน <embed>: <object data = "{{content}}" type = "application / pdf"> </object>
HoffZ

2
สำหรับฉัน (AngularJS 1.25) ฉันต้องทำ: new Blob ([response.data]
Martin Connell

2
@HoffZ: ฉันแทนที่วิธีทางลัด$http.getด้วยวิธีการแบบเต็มโดยระบุresponseTypeฟิลด์: { url: "http://127.0.0.1:8080/resources/jobs/af471106-2e71-4fe6-946c-cd1809c659e5/result/?key="+$scope.key, method: "GET", headers: { 'Accept': 'application/pdf' }, responseType: 'arraybuffer' }และใช้งานได้ :)
Nikolay Melnikov

1
สำหรับฉันวิธีเดียวที่จะทำให้มันใช้งานได้คือการสร้างหยดresponse.dataแทนresponseแบบนี้:var file = new Blob([response.data], {type: 'application/pdf'});
Alekos Filini

1
@ yosep-kim สิ่งนี้ใช้ไม่ได้บน IE เนื่องจากไม่มีวัตถุ URL ใน IE: caniuse.com/#search=URL
Carlos

32

ฉันใช้ 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;
            });
        }
    };
});

Java REST Web Services - 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;
    }

ซาฟารีรุ่นไหน window.URL ใช้ได้ดีใน Safari 9 และหลัง: caniuse.com/#search=createObjectURL
Stéphane GRILLON

ฉันทดสอบและตรวจสอบความถูกต้องกับ MacBook pro และ Safari 9.0.2
Stéphane GRILLON

เหมือนกัน macBook el กัปตัน window.URL.createObjectURL (ไฟล์); ฉันไม่รู้ว่าปัญหาอยู่ที่ไหน แต่รหัสไม่ทำงาน อาจเป็นฉันทำอะไรผิด ใด ๆ ขอบคุณ. ฉันไม่มีเวลาตรวจสอบว่ามันใช้งานไม่ได้และใช้ FileSaver.js
fdrv

หากใบสมัครของคุณออนไลน์กรุณาโพสต์ URL ของคุณ? คุณมี Back-End เหมือนกันหรือไม่?
Stéphane GRILLON

ไม่รองรับแอตทริบิวต์การดาวน์โหลดในซาฟารี caniuse.com/#search=download
Biswanath

21

คำแนะนำของไมเคิลเป็นเสน่ห์สำหรับฉัน :) หากคุณแทนที่ $ http.post ด้วย $ http.get โปรดจำไว้ว่าเมธอด. get ยอมรับพารามิเตอร์ 2 ตัวแทนที่จะเป็น 3 ... นี่คือที่ที่ฉันเสียเวลา ... ;)

ตัวควบคุม:

$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>

responseType:'arraybuffer'เพิ่งช่วยฉันได้สองสามชั่วโมง! +1
svarog

จะทริกเกอร์บันทึกแทนเพื่อพิมพ์เป็น html ได้อย่างไร
fdrv

ขอขอบคุณคุณนี้บันทึกฉันสองสามชั่วโมงคุณยังสามารถแทนที่$scope.content = $sce.trustAsResourceUrl(fileURL);ด้วย$window.open(fileURL, '_self', '');และเปิดไฟล์ในแบบเต็มหน้าจอ
Tavitos

9

ฉันประสบปัญหาในการใช้ "window.URL" กับ Opera Browser เนื่องจากจะส่งผลให้ "ไม่ได้กำหนด" นอกจากนี้ด้วย 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);
    }
}

แจ้งให้เราทราบหากช่วยได้! :)


วิธีนี้ไม่ได้เปิดเอกสาร PDF ในหน้าต่างเบราว์เซอร์ใน IE แต่แจ้งให้ผู้ใช้ดาวน์โหลด มีงานอะไรประมาณนี้ไหม?
sdd

1
รหัสด้านบนคือการดาวน์โหลดไฟล์ PDF และปล่อยให้แอป PDF Reader เริ่มต้นของคุณเข้ามาเพื่อเปิด มันยังทำงานได้ดีบนอุปกรณ์พกพา เหตุผลคือในขณะที่ฉันสามารถเปิด PDF ในบางเบราว์เซอร์ แต่ฉันไม่สามารถเปิดไฟล์นั้นในเบราว์เซอร์อื่นได้ ดังนั้นฉันจึงคิดว่าดีที่สุดที่จะมีโซลูชันที่ทำงานบนเบราว์เซอร์ทั้งหมด (รวมถึงเบราว์เซอร์มือถือ) เพื่อดาวน์โหลดไฟล์ PDF
Manuel Hernandez

คุณสามารถใช้รหัสต่อไปนี้เพื่อดู PDF ในแท็บใหม่: window.open (reader.result, '_blank');
samneric

6

การเพิ่มresponseTypeในคำขอที่สร้างจากเชิงมุมเป็นวิธีแก้ปัญหา แต่สำหรับฉันแล้วมันไม่ได้ผลจนกว่าฉันจะตั้งค่าresponseTypeเป็นblobไม่ใช่ arrayBuffer รหัสนี้อธิบายได้ด้วยตนเอง:

    $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) {   
        });

2
จริงๆแล้วด้วย'blob'ประเภทมันเป็นไปได้ที่จะเขียนให้สั้นลง: FileSaver.saveAs(response.data, getFileNameFromHttpResponse(response));ไม่จำเป็นต้องสร้างBlob
Alena Kastsiukavets

0

ฉันดิ้นรนมาตลอดสองสามวันที่ผ่านมาเพื่อพยายามดาวน์โหลดไฟล์ PDF และรูปภาพทั้งหมดที่ฉันสามารถดาวน์โหลดได้คือไฟล์ข้อความธรรมดา ๆ

คำถามส่วนใหญ่มีส่วนประกอบเหมือนกัน แต่ต้องใช้เวลาสักพักในการหาลำดับที่ถูกต้องเพื่อให้มันใช้งานได้

ขอบคุณ @Nikolay Melnikov ความคิดเห็น / การตอบกลับของคุณสำหรับคำถามนี้คือสิ่งที่ทำให้มันได้ผล

สรุปได้ว่านี่คือการโทรแบ็กเอนด์ AngularJS Service ของฉัน:

  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
    });
}

0

คำตอบล่าสุด (สำหรับ 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" />

-1

คำแนะนำของรหัสที่ฉันเพิ่งใช้ในโครงการของฉันโดยใช้ AngularJS v1.7.2

$http.get('LabelsPDF?ids=' + ids, { responseType: 'arraybuffer' })
            .then(function (response) {
                var file = new Blob([response.data], { type: 'application/pdf' });
                var fileURL = URL.createObjectURL(file);
                $scope.ContentPDF = $sce.trustAsResourceUrl(fileURL);
            });

<embed ng-src="{{ContentPDF}}" type="application/pdf" class="col-xs-12" style="height:100px; text-align:center;" />

1
โปรดเพิ่มบทสรุปด้วย
Farhana
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.