浏览器实现pdf下载、ms http下载、IE不兼容

浏览器实现pdf下载、ms http下载、IE不兼容

pdf下载

后台返回MemoryStream流到JS，JS接收流触发浏览器下载。

步骤：

1. 设置Response.ContentType = “application/octet-stream”;
2. ajax下载 仅支持xml、json、script、html
3. xhr下载，doc、pdf等大文件类型用blob

var blob = this.response;
var a = document.createElement('a');
a.href = window.URL.createObjectURL(blob);
a.download = fileName;
a.click();

文件预览

window.open(url);

IE浏览器不兼容

if (window.ActiveXObject || "ActiveXObject" in window) {
                    //判断是否为IE浏览器，"ActiveXObject" in window判断是否为IE11
                    //判断是否安装了adobe Reader
                    for (x = 2; x < 10; x++) {
                        try {
                            oAcro = eval("new ActiveXObject('PDF.PdfCtrl." + x + "');");
                            if (oAcro) {
                                flag = true;
                            }
                        } catch (e) {
                            flag = false;
                        }
                    }
                    try {
                        oAcro4 = new ActiveXObject('PDF.PdfCtrl.1');
                        if (oAcro4) {
                            flag = true;
                        }
                    } catch (e) {
                        flag = false;
                    }

                    try {
                        oAcro7 = new ActiveXObject('AcroPDF.PDF.1');
                        if (oAcro7) {
                            flag = true;
                        }
                    } catch (e) {
                        flag = false;
                    }
                    if (flag) {//支持
                        window.open(previewUrl, '_blank')； //打开地址pdf预览
                    } else {//不支持
                        //$("#pdfContent").append("对不起,您还没有安装PDF阅读器软件呢,为了方便预览PDF文档,请选择安装！");
                        alert("对不起,您还没有安装PDF阅读器软件呢,为了方便预览PDF文档,请选择安装！");
                        location = "http://ardownload.adobe.com/pub/adobe/reader/win/9.x/9.3/chs/AdbeRdr930_zh_CN.exe";
                    }
                } else {
                    window.open(previewUrl,'_blank');  
                }

ajax触发 下载

var url = '/XXX/XX';
                            var fileName = "XXX.pdf";
                            var xhr = model.XHR();
                            xhr.open('post', url);
                            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')  //加密url中的字符串 post必须设置header
                            xhr.responseType = "blob";  //读取后台response流存储为blob链接
                            xhr.onload = function () {
                                if (this.status == 200 || this.readyState == 4) { 
                             //可以只判断statuse  若为onreadystatechange 需要先判断readystate 再status
                                    //获取响应流
                                    var blob = this.response; //IE9-取不到response
                                    if ('msSaveOrOpenBlob' in navigator) {
                                        //处理IE生成的blob链接 支持IE10+
                                        window.navigator.msSaveOrOpenBlob(blob, fileName); 
                                       // 或window.navigator.msSaveBlob(blob,fileName); 判断浏览器是否支持
                                    } else {
                                        //处理非IE的 blob链接
                                        var a = document.createElement('a'); 
                                 // 最好在html中预先创建a标签，设置hidden， a =document.getElementById()
                                        a.href = window.URL.createObjectURL(blob);
                                        a.download = fileName; // 必须有download属性实现下载 否则为打开链接
                                        a.click();
                                    }
                                    layer.closeAll();
                                } else {
                                    model.popError("下载失败：" + this.status);
                                    layer.closeAll();
                                }
                            };
                            xhr.send('filePath=' + res.Data); //发送ajax请求

注意：

• 判断a标签是否支持download属性

  var isSupportDownload = 'download' in document.createElement('a');
  

​ 目前仅支持firefox、chrome、microsoft edge

• 判断浏览器是否支持msSaveOrOpenBlob、msSaveBlob：

  window.navigator.msSaveOrOpenBlob //是否为 undefined -- IE9-不支持
  window.navigator.msSaveBlob // 是否为 undefined -- IE9-不支持
  

• 判断浏览器是否支持blob：

  new Blob()  == undefined  //IE9-不支持
  

• ie浏览器不兼容$.post 改用原始 $.ajax

附：

原生xhr初始化格式：

var xhr = null;
        if (window.XMLHttpRequest) {//判断当前浏览器是否支持XMLHttpRequest
            xhr = new XMLHttpRequest();
        } else if (window.ActiveXObject) {//判断当前浏览器是否支持ActiveXObject，这是对于IE浏览器的判断
            try {
                xhr = new ActiveXObject("Msxml2.XMLHTTP");//IE6及以后的版本支持的
            } catch (e) {

                try {
                    xhr = new ActiveXObject('Microsoft.XMLHTTP');//IE6以下版本的支持
                } catch (e) {
                    return xhr;
                }
            }
        }
        return xhr;

浏览器兼容设置：

IE浏览器兼容强力总结！！请看

https://blog.csdn.net/xiaoxiaohui520134/article/details/52352922

这样写可以达到的效果是如果安装了GCF（Google Chrome Frame 谷歌内嵌浏览器框架的简称），则使用GCF来渲染页面，如果没安装GCF，则使用最高版本的IE内核进行渲染。这个插件可以让用户的IE浏览器外不变，但 用户在浏览网页时，实际上使用的是Google Chrome浏览器内核，而且支持IE6、7、8等多个版本的IE浏览器。