前端解析二进制流实现文件下载和文件预览（预览只支持excel、图片、pdf、txt文本）

很多时候需要纯前端解析后台返回的二进制流进行文件的下载和预览，此处主要是使用了xlsx.js文件和css文件，可自行在网上下载

实现下载：

 filedxz(path_, type_) {//附件下载
            let that = this;
            axios({
                method: 'get',
                url:url,
                headers: {
                    "auth": auth,
                },
                responseType: 'blob',//请求的关键，必须加上，负责无法成功（重中之重）
            }).then(response => {
                type_ = type_.toLowerCase();//转小写统一
                if (type_ == ".docx") {
                    that._type_ = "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
                } else if (type_ == ".doc") {
                    that._type_ = "application/msword"
                } else if (type_ == ".gif") {
                    that._type_ = "image/gif"
                } else if (type_ == ".jpeg" || type_ == ".jpg") {
                    that._type_ = "image/jpeg"
                } else if (type_ == ".png") {
                    that._type_ = "image/png"
                } else if (type_ == ".pdf") {
                    that._type_ = "application/pdf"
                } else if (type_ == ".txt") {
                    that._type_ = "text/plain"
                } else if (type_ == ".xls") {
                    that._type_ = "application/vnd.ms-excel"
                } else if (type_ == ".xlsx") {
                    that._type_ = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
                } else if (type_ == ".xlsx") {
                    that._type_ = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
                } else if (type_ == ".zip") {
                    that._type_ = "application/zip"
                } else if (type_ == ".ppt") {
                    that._type_ = "application/vnd.ms-powerpoint"
                } else if (type_ == ".pptx") {
                    that._type_ = "application/vnd.openxmlformats-officedocument.presentationml.presentation"
                } else if (type_ == ".zip") {
                    that._type_ = "application/zip"
                }
                var blob = new Blob([response.data], { type: that._type_ })//第一个参数为数据
                var downloadElement = document.createElement('a');
                var href = window.URL.createObjectURL(blob); //创建下载的链接
                downloadElement.href = href;
                downloadElement.download = path_; //下载后文件名
                document.body.appendChild(downloadElement);
                downloadElement.click(); //点击下载
                document.body.removeChild(downloadElement); //下载完成移除元素
                window.URL.revokeObjectURL(href); //释放掉blob对象
            }).catch(function (err) {
                console.log(err);
            });
        },

文件预览：

 filedyl(path, type_, name_) {
            debugger;
            let that = this;
            axios({
                method: 'get',
                url:url,
                headers: {
                    "auth": auth,
                },
                responseType: 'blob',//同样是重点
            }).then(response => {
                type_ = type_.toLowerCase();
                if (type_ == ".docx") {
                    that._type_ = "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
                } else if (type_ == ".doc") {
                    that._type_ = "application/msword"
                } else if (type_ == ".gif") {
                    that._type_ = "image/gif"
                } else if (type_ == ".jpeg" || type_ == ".jpg") {
                    that._type_ = "image/jpeg"
                } else if (type_ == ".png") {
                    that._type_ = "image/png"
                } else if (type_ == ".pdf") {
                    that._type_ = "application/pdf"
                } else if (type_ == ".txt") {
                    that._type_ = "text/plain;charset=utf-8'"
                } else if (type_ == ".xls") {
                    that._type_ = "application/vnd.ms-excel" 
                } else if (type_ == ".xlsx") {
                    that._type_ = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
                }else if (type_ == ".zip") {
                    that._type_ = "application/zip"
                } else if (type_ == ".ppt") {
                    that._type_ = "application/vnd.ms-powerpoint"
                } else if (type_ == ".pptx") {
                    that._type_ = "application/vnd.openxmlformats-officedocument.presentationml.presentation"
                }
                if (type_ == ".xlsx" || type_==".xls") {
                    $("#excelz").empty();//excel需要在预览的地方自己加dom展示预览
                    let  name =  name_.split(".")[0];//预览文件的名字可以自行定义
                    var nContainer = document.getElementById('excelz');
                    var blob = new Blob([response.data], { type: that._type_ })
                    var href = window.URL.createObjectURL(blob); //创建下载的链接
                    var xlsx = new Plus.Xlsx(nContainer);
                    xlsx.readFile(href);
                    $("#excelz").prepend('<table id="table-preview" class="table table-striped table-hover"><thead style="width: 30%;"><tr><th>' + name + '</th></tr></thead></table>');
                    setTimeout(function () {
                        //去掉空行
                        // $("#excelz tr:gt(10)").each(function () {
                        //     var _hide = true;
                        //     $(this).find("td").each(function () {
                        //         if ($(this).text().trim() != '') {
                        //             _hide = false;
                        //         }
                        //     });
                        //     if (_hide) {
                        //         $(this).hide();
                        //     }
                        // });
                        //td为0时不显示
                        $("#excelz tr td").each(function () {
                            if ($(this).text() == '0' || $(this).text() == '0.00' || $(this).text() == 0 || $(this).text() == 0.00) {
                                $(this).text("");
                            }
                        });
                        //去除表4最后一列空列
                        var _col_hide = true;
                        var len = $("table tr").length;
                        for (var i = 0; i < len; i++) {
                            if ($("#excelz tr").eq(i).find("td:last").text().trim() != '') {
                                _col_hide = false;
                            }
                        }
                        if (_col_hide) {
                            for (var i = 0; i < len; i++) {
                                $("#excelz tr").eq(i).find("td:last").remove();
                            }
                        }
                        $("#table-div, #close-table").show();
                    }, 500);
                } else {
                    var blob = new Blob([response.data], { type: that._type_ })
                    var href = window.URL.createObjectURL(blob); //创建下载的链接
                    window.open(href);
                }
            }).catch(function (err) {
                console.log(err);
            });
        },

从上面可以看出，实际上下载和预览代码基本一样，所以可以通过一次请求来实现下载的同时并且提醒对方预览，预览文件要注意图片、txt、pdf都是重新打开页面实现预览，excel是自己创建dom存放预览信息，无法实现一个excel文件中有多个sheet文件的预览，只能出现一个。

excel预览效果：