前端解析二进制流实现文件下载和文件预览（预览只支持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('

// $(\"#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预览效果：