PDF Blob - 弹出窗口不显示内容

Sim*_*ana 37 javascript pdf angularjs

过去几天我一直在研究这个问题.试图在<embed src>标签上显示流没有运气,我只是试图在新窗口上显示它.

新窗口显示PDF 控件 在此输入图像描述)

知道为什么没有显示pdf的内容吗?

码:

$http.post('/fetchBlobURL',{myParams}).success(function (data) {
    var file = new Blob([data], {type: 'application/pdf'});
    var fileURL = URL.createObjectURL(file);
    window.open(fileURL);
});
Run Code Online (Sandbox Code Playgroud)

mic*_*ael 99

如果要从响应数据中创建a responseType,arraybuffer则需要设置为blob:

$http.post('/fetchBlobURL',{myParams}, {responseType: 'arraybuffer'})
   .success(function (data) {
       var file = new Blob([data], {type: 'application/pdf'});
       var fileURL = URL.createObjectURL(file);
       window.open(fileURL);
});
Run Code Online (Sandbox Code Playgroud)

更多信息:Sending_and_Receiving_Binary_Data


Ale*_*ets 16

如果你设置{ responseType: 'blob' },不需要自己创建Blob.您只需根据响应内容创建网址:

$http({
    url: "...",
    method: "POST",
    responseType: "blob"
}).then(function(response) {
    var fileURL = URL.createObjectURL(response.data);
    window.open(fileURL);
});
Run Code Online (Sandbox Code Playgroud)


sgr*_*lon 8

我使用AngularJS v1.3.4

HTML:

<button ng-click="downloadPdf()" class="btn btn-primary">download PDF</button>
Run Code Online (Sandbox Code Playgroud)

JS控制器:

'use strict';
angular.module('xxxxxxxxApp')
    .controller('MathController', function ($scope, MathServicePDF) {
        $scope.downloadPdf = function () {
            var fileName = "test.pdf";
            var a = document.createElement("a");
            document.body.appendChild(a);
            MathServicePDF.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();
            });
        };
});
Run Code Online (Sandbox Code Playgroud)

JS服务:

angular.module('xxxxxxxxApp')
    .factory('MathServicePDF', function ($http) {
        return {
            downloadPdf: function () {
            return $http.get('api/downloadPDF', { responseType: 'arraybuffer' }).then(function (response) {
                return response;
            });
        }
    };
});
Run Code Online (Sandbox Code Playgroud)

Java REST Web服务 - 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;
    }
Run Code Online (Sandbox Code Playgroud)