白也blog - download
type: channel
link: http://www.baiyeovo.cn/index.php/tag/download/
items: iframe文件下载和blob

iframe文件下载和blob
type: item
date: 2022-08-19T10:22:00+08:00
description: iframe下载前端不能自定义文件名,需要后端处理. // 下载文件 downloadFile(item) { const iframe = document.createElement("iframe"); iframe.style.display = "none"; // 防止影响页面 iframe.style.height = 0; // 防止影响页面 iframe.src = item.url; document.body.appendChild(iframe); // 这一行必须，iframe挂在到dom树上才会发请求 // 5分钟之后删除（onload方法对于下载链接不起作用，就先抠脚一下吧） setTimeout(()=>{ iframe.remove(); }, 5 * 60 * 1000); }当时使用的这个方案下载文件,后端使用的是阿里云的oss对象存储,然后下载MP4文件的时候一直打开预览,不会触发浏览器下载行为.后面查看阿里云文档,可以设置文件的响应头或者,在请求url后面拼接'?response-content-type=application/octet-stream';例子:/** * 下载文件 * @param link 文件下载地址 */ export const download = links => { const iframe = document.createElement("iframe"); iframe.style.display = "none"; // 防止影响页面 iframe.style.height = 0; // 防止影响页面 iframe.src = links+'?response-content-type=application/octet-stream'; document.body.appendChild(iframe); // 这一行必须，iframe挂在到dom树上才会发请求 // 30s之后删除 setTimeout(() => { iframe.remove(); }, 30000); };a标签下载,支持前端自定义文件名,blob要带上 responseType: 'blob'哦常见下载功能download(downloadUrl, data = {}, fileName = '下载.xlsx') { const option = { responseType: 'blob', }; Axios.post(downloadUrl, data, option).then((res) => { const { data: bData } = res; const blob = new Blob([bData], { type: 'application/zip' }); if ('download' in document.createElement('a')) { // 非IE下载 const elink = document.createElement('a'); elink.download = fileName; elink.style.display = 'none'; elink.href = URL.createObjectURL(blob); document.body.appendChild(elink); elink.click(); URL.revokeObjectURL(elink.href); // 释放URL 对象 document.body.removeChild(elink); } else { // IE10+下载 navigator.msSaveBlob(blob, fileName); } }); },下载2-优化export const downloadFile = (downloadUrl, data, fileName = '导出列表.xlsx', type = 'application/octet-stream') => { const option = { responseType: 'blob', } return Axios.post(downloadUrl, data, option).then((res) => { const { data: bData } = res; const blob = new Blob([bData], {type}); // 正常情况下blob.type为空,因为返回的是文件流,而返回json就说明报错了 if (blob.type === 'application/json') { const reader = new FileReader(); reader.o…