在 Internet Explorer 中从二进制文件打开 PDF

Question

与Need to open blob/PDF in IE window 和Setting window.location or window.open in AngularJS gives "access is denied" in IE 11 相关。

我需要在我的服务中打开一个来自字节数组的 PDF：

@RequestMapping("/{dokumentId}")
public ResponseEntity<byte[]> getDoc(@PathVariable Integer docId, HttpServletRequest request, HttpServletResponse response) throws IOException {       
    byte[] contents = // .. get document 

    HttpHeaders headers = new HttpHeaders();
    headers.setContentType(MediaType.parseMediaType("application/pdf"));
    headers.add("Content-Disposition", "inline;filename=file");
    headers.add("Cache-Control","private, must-revalidate, post-check=0, pre-check=0, max-age=1");
    headers.add("Pragma", "no-cache");
    headers.setContentLength(contents.length);

    return new ResponseEntity<>(contents, headers, HttpStatus.OK);
}

我正在尝试使用以下 JS 在 Internet Explorer 11 中打开：

$scope.openPdf = function(doc){
    var winlogicalname = "document_" + doc.docId;
    var winparams = 'dependent=yes,locationbar=no,scrollbars=yes,menubar=yes,resizable,screenX=50,screenY=50,width=850,height=1050';

    var ieEDGE = navigator.userAgent.match(/Edge/g);
    var ie = navigator.userAgent.match(/.NET/g); // IE 11+
    var oldIE = navigator.userAgent.match(/MSIE/g); 

    if(!ie && !oldIE && !ieEDGE){
        // Open PDF in new browser window
        var detailWindow = window.open("", winlogicalname, winparams);
    }

    xxxService.getDoc(doc).success(function(data){
        //for browser compatibility  
        if (ie || oldIE || ieEDGE) {
            var blob = new window.Blob([data], { type: 'application/pdf' });    
            window.navigator.msSaveOrOpenBlob(blob);
        } else {
            var binaryAsString = ArrayBufferToString(data).replace(/"/g,"");
            var pdfAsDataUri = "data:application/pdf;base64," + binaryAsString;
            var htmlText = '<embed width=100% height=100% type="application/pdf" src="'+ pdfAsDataUri + '"></embed>'; 
            detailWindow.document.write(htmlText);
            detailWindow.document.close();
        }   
    }).error(function(data, status, headers, config){
        console.log(data, status, headers, config);
    });
};

这适用于 Chrome 和 Firefox（在新窗口中打开，直接使用 <embed> 从二进制构建。但是，这种方式似乎不适用于 IE，因此 msSaveOrOpenBlob。但是在 IE 中保存/打开 PDF 时，我在 Adob​​e Reader 中收到错误：“Adobe Acrobat Reader DC could not open 'file.pdf' because it is either not a supported file type or because the file has been damaged (for example, it was sent as an email attachment and wasn't correctly decoded).”。当我尝试将 PDF 拖放到 IE 中时，它显示“File does not begin with '%PDF-'.”。

关于如何在 IE11 中直接使用字节数组或构造 Blob 打开 PDF 的任何想法？

Answer 1

我将我的网络服务更改为：

byte[] contents = // get contents

response.getOutputStream().write(contents);
response.setContentType("application/pdf");
response.setContentLength(contents.length);
response.addHeader("Content-Disposition", "inline;filename="+filename);
response.addHeader("Cache-Control", "private, must-revalidate, post-check=0, pre-check=0, max-age=1");
response.addHeader("Pragma", "public");

然后在客户端使用：

Service.getDocument(docId).success(function(data){
    var file = new Blob([data], {type: 'application/pdf'});
    if(window.navigator.msSaveOrOpenBlob){
        window.navigator.msSaveOrOpenBlob(file, name + ".pdf");
    } else {
        var fileURL = URL.createObjectURL(file);
        $scope.renderPDF(fileURL, detailWindow.document.getElementById('canvas'));
    } 
}

$scope.renderPDF 使用 PDFJS 在新窗口中呈现 PDF。记得在$http.get（或post）方法上设置{responseType:'arraybuffer'})。