Question

我认为这应该是非常简单的，但到目前为止尚无法解决。

我正在使用供应商系统，该系统已经实现了一个非常基本的API供我们使用。我们在标题中发送带有身份验证令牌的GET请求，然后服务器在响应正文中返回一个PDF文档。

我想要做的就是在浏览器中显示PDF，任何方法都可以，在新的标签页或iframe等中。

我已经设法在firefox和chrome中使用以下答案：Request a file with a custom header但这不适用于IE 11，IE11是我们组织中唯一支持的浏览器。

请求标头是：

   Accept:*/*
   Accept-Encoding:gzip, deflate, sdch
   Accept-Language:en-US,en;q=0.8
   Authorization:bearer ZYFXVEnE2Uf3kU0Ud8rFvq5pbV2IfrNzzJBAu8lI8p73reZ6-vdeChtXlGGN7NwUNvo2-5LKNd9FniZlcElplycBL4f2qu6EaHkO-Xb_-G5DR07p62UYq_DErl937Yc-mpLMphBBHC7-0uqYNfrivkbc3xeOvEBnRRtfagz7dYJ8EJive6QjwWjYgGj9HRQUAbcOggbJGxZDXmrlWTveUji-5CKb7w5guBUOhjyDkyB53r8rm2qptGfsp1NsKLU4h4kEDlNaxbbzB_oJQbuyIoG80BTnP-NB0bqOtPJ09FrM9AFVfrdJM0fRwS3BfxRgVNm01FgW-jQwp1GgzeAbS-3uRR1G92Y-rw6L8R17l31PPFlV_CNeK_oAG-AJldmn2lgv6a6l6Cj9s2OqOfXyX09iZIN6vIKXAqedSWb708GTNfJ7iLKjdGVYCYW1zZ9IZKXMyeMoK7nW_rDuMzmoXeLY3tGFeeOf27vuI4RdSaGVCD5kIynrYPe8fU1sp-KZE0i1aJ0qqQ9g7Nvg42ZsFIFHBqhRIY-k4Dxjm1jPloGNbFqhdc-GK5LYHcg_u3DwFbSUKWpXdzCPBn43qJ_yVfDqffQDsDafvGDKP0U4duq0eYNXYWKnB8VR7xytykWjXAj70a9SFPRocqhugiqJIwBMS6a5gfqlUssgEnCfhVGE_eGUSGrYdCvfHHKb-13O9m6dXomYFuK8Ql7H73MjDgzTihtYLULh3nAHrU-FehrBRsUeKpc32hKUVhVvTlw2lTOUcMhlC99EKPMT0hZhLy4t8e-icL2aqcKdN-S1rt-HU60cukw4SnLyM_Nfa-ytD8vtUwMLAV9K5h4DdK7H3LpfbQNbaHRfBjRk5aQ7Q2o
   Content-type:application/json
   Host: /vendor_URL/
   Origin:null
   Proxy-Connection:keep-alive
   User-Agent:Mozilla/5.0 (Windows NT 6.3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.143 Safari/537.36

响应标题：

   Accept-Ranges:none
   Access-Control-Allow-Origin:*
   Cache-Control:no-cache
   Content-Disposition:inline; filename=GoToPlan.pdf
   Content-Length:372483
   Content-Type:application/pdf
   Date:Wed, 26 Oct 2016 19:41:04 GMT
   Expires:-1
   Pragma:no-cache
   Proxy-Connection:keep-alive
   Server:Microsoft-IIS/7.5
   Via:1.1 /proxy_URL/
   X-AspNet-Version:4.0.30319
   X-Powered-By:ASP.NET

目前适用于Firefox和Chrome的代码：

   var document_http = new XMLHttpRequest();    
        var url = /document_URL/
        document_http.open("GET", url, true);
        //DOn'y know why, but needs this to display correctly
        document_http.overrideMimeType( "application/octet-stream; charset=x-user-defined;" );
        //Send the proper header information along with the request
        document_http.setRequestHeader("Content-type", "application/json");
        document_http.setRequestHeader("Authorization", "bearer " + auth_response[3]);

        document_http.onreadystatechange = function() {//Call a function when the state changes.
            if (document_http.readyState == 4 & document_http.status == 200) {
                var data = toBinaryString(this.responseText);
                data = "data:application/pdf;base64,"+btoa(data);
                window.open(data);

            }
        }           
        document_http.send(params);

function toBinaryString(data) {
var ret = [];
var len = data.length;
var byte;
for (var i = 0; i < len; i++) { 
    byte=( data.charCodeAt(i) & 0xFF )>>> 0;
    ret.push( String.fromCharCode(byte) );
}

return ret.join('');

}

Answer 1

数据URI受浏览器对URL的限制。您无法可靠地使用它们来显示长内容。

您可以将文档加载为blob，然后在iframe：

中使用它

var xhr = new XMLHttpRequest();
xhr.open("GET", "/path/to/file.pdf");
xhr.responseType = "blob";
xhr.onload = function(res) {
    iframe.src = URL.createObjectURL(res.response);
};
xhr.send();

这应该适用于所有主流浏览器。 URL.createObjectURL将创建一个blob:http://host/unique-id形式的字符串，该字符串是对blob对象的引用。

当您完成PDF显示时，请记得在给定字符串上调用URL.revokeObjectURL。这将丢弃对blob的引用，可以安全地进行垃圾回收。

想要在IE11中显示由GET请求返回的PDF文档

1 个答案: