前端下载文化部几种方法(excel,zip,html,markdown、图片等等)和导出 zip 压缩包

---

1、location.href

//get请求
window.location.href = url;

2、location.href

//get请求和location.href类似
window.open(url);

3、a标签

//写法1
const download = (filename, url) => {let a = document.createElement('a'); a.style = 'display: none'; // 创建一个隐藏的a标签a.download = filename;a.href = url;document.body.appendChild(a);a.click(); // 触发a标签的click事件document.body.removeChild(a);
}

4、请求后端的方式

axios({method: 'post',headers: {'Content-Type': 'application/json; charset=utf-8'},url: '/robot/strategyManagement/analysisExcel',responseType: 'blob',headers: { //如果需要权限下载的话，加在这里Authorization: '123456'}data: JSON.stringify(params),
}).then(function(res){var content = res.headers['content-disposition'];var name = content && content.split(';')[1].split('filename=')[1];var fileName = decodeURIComponent(name)downloadFile(res.data,fileName)
})

5、文件下载的方式

downloadFile:function(data,fileName){// data为blob格式var blob = new Blob([data]);var downloadElement = document.createElement('a');var href = window.URL.createObjectURL(blob);downloadElement.href = href;downloadElement.download = fileName;document.body.appendChild(downloadElement);downloadElement.click();document.body.removeChild(downloadElement);window.URL.revokeObjectURL(href);
}

6、Blob和Base64

function downloadFile(res, Filename) {// res为接口返回数据，在请求接口的时候可进行鉴权if (!res) return;// IE及IE内核浏览器if ("msSaveOrOpenBlob" in navigator) {navigator.msSaveOrOpenBlob(res, name);return;}const url = URL.createObjectURL(new Blob([res]));//  const fileReader = new FileReader();  使用 Base64 编码生成// fileReader.readAsDataURL(res);// fileReader.onload = function() { ...此处逻辑和下面创建a标签并释放代码一致，可从fileReader.result获取href值... }const a = document.createElement("a");a.style.display = "none";a.href = url;a.download = Filename;document.body.appendChild(a);a.click();document.body.removeChild(a);URL.revokeObjectURL(url); // 释放blob对象
}

7、下载附件方法(excel,zip,html,markdown)

/*** @param data 数据* @param fileName 文件名称* @param type 导出文件类型*/
export const download = (data: Blob, fileName: string, type: string) => {// 创建 blobconst blob = new Blob([data], { type: mineType[type] })// 创建 href 超链接，点击进行下载window.URL = window.URL || window.webkitURLconst href = URL.createObjectURL(blob)const downA = document.createElement('a')downA.href = hrefdownA.download = fileNamedownA.click()// 销毁超连接window.URL.revokeObjectURL(href)
}export const mineType = {excel: 'application/vnd.ms-excel', // 下载 Excelword: 'application/msword', // 下载 Wordzip: 'application/zip', // 下载 Ziphtml: 'text/html', // 下载 Htmlmarkdown: 'text/markdown', // 下载 Markdown
}

使用

download(res, '导出模板.docx', 'word')

8、封装下载函数

export const download = (res, type, filename) => {// 创建blob对象，解析流数据const blob = new Blob([res], {// 设置返回的文件类型// type: 'application/pdf;charset=UTF-8' 表示下载文档为pdf，如果是word则设置为msword，excel为exceltype: type})// 这里就是创建一个a标签，等下用来模拟点击事件const a = document.createElement('a')// 兼容webkix浏览器，处理webkit浏览器中href自动添加blob前缀，默认在浏览器打开而不是下载const URL = window.URL || window.webkitURL// 根据解析后的blob对象创建URL 对象const herf = URL.createObjectURL(blob)// 下载链接a.href = herf// 下载文件名,如果后端没有返回，可以自己写a.download = '文件.pdf'a.download = filenamedocument.body.appendChild(a)// 点击a标签，进行下载 a.click()// 收尾工作，在内存中移除URL 对象document.body.removeChild(a)window.URL.revokeObjectURL(herf)
}

9、导出 zip 压缩包相关方法(流方式)

后端的设置 Content-Type: application/octet-stream(下载用的流）

 // 下载zip方法//zip格式文件下载zipdwonUpload(data) {console.log("干部任免表传递的数据", data);let ids = data.ids;console.log("ids集合数据", ids);// 导出干部任免表接口this.$axios.post(`personnel/exportAppointmentAndDismissal`, ids, {responseType: "blob",}).then((res) => {// reslet blob = res;let that = this;//通过FileReader读取数据，是一种异步文件读取机制let reader = new FileReader();//以下这两种方式我都可以解析出来，因为Blob对象的数据可以按文本或二进制的格式进行读取// reader.readAsBinaryString(blob, 'utf8');reader.readAsText(blob, "utf8");// eadAsText(file, encoding);以纯文本的方式读取，读取到的文本保存在result属性中。第二个参数代表编码格式reader.onload = function (result) {//onload在成功加载后就会触发console.log("result信息", result);console.log("isJson判断是否为json格式",that.isJSON(result.target.result));if (that.isJSON(result.target.result)) {that.$message.warning(JSON.parse(result.target.result).msg);// loading效果// that.loadingBut = false;} else {console.log("下载zip数据", res);// that.downloadFile(res);}};}).catch((error) => {console.log(error);// 打印错误}).finally(() => {// 导出按钮loading效果this.isDownloadingFile = false;});},

使用导出 zip

    // 导出zipdownloadFile(res) {// res 下载转blob二进制或文本数据let blob = new Blob([res], { type: "application/zip" });console.log("导出的blob", blob);if (window.navigator.msSaveOrOpenBlob) {// msSaveOrOpenBlob 提供保存和打开按钮navigator.msSaveOrOpenBlob(blob, "xxx.zip");// navigator.msSaveOrOpenBlob(blob, "xxx.zip");return;}let url = window.URL.createObjectURL(blob);const link = document.createElement("a"); // 创建a标签link.href = url;link.download = `干部任免压缩包`; // 重命名文件link.click();URL.revokeObjectURL(url); // 释放内存// this.loadingBut = false; //loading效果},

总结

如果这篇【文章】有帮助到你💖，希望可以给我点个赞👍，创作不易，如果有对前端或者对python感兴趣的朋友,请多多关注💖💖💖，咱们一起探讨和努力！！！
👨‍🔧 个人主页 : 前端初见