downloadFile(data) { let blob = new Blob([data?.data], { type: "application/zip" }); let url = window.URL.createObjectURL(blob); let fileName = data?.headers["content-disposition"] .split(";")[1] .split("=")[1]; console.log(fileName, "fileName"); fileName = decodeURI(escape(fileName)); const link = document.createElement("a"); // 创建a标签 link.setAttribute("download", decodeURI(fileName)); link.href = url; link.click(); URL.revokeObjectURL(url); },
时间: 2024-04-05 14:31:01 浏览: 104
这是一个 JavaScript 函数,用于下载文件。函数接收一个参数 `data`,其中包括文件数据和文件名信息。函数的具体步骤如下:
1. 根据 `data` 中的文件数据创建一个 Blob 对象。
2. 使用 `URL.createObjectURL` 方法将 Blob 对象生成一个 URL。
3. 从 `data` 的响应头中获取文件名信息,并对文件名进行解码和转义。
4. 创建一个 `<a>` 标签,并设置 `download` 属性为解码后的文件名。
5. 将 URL 赋值给 `<a>` 标签的 `href` 属性。
6. 触发 `<a>` 标签的点击事件,使得浏览器开始下载文件。
7. 使用 `URL.revokeObjectURL` 方法释放 URL。
总的来说,这个函数的作用是将文件数据转换成可供用户下载的文件,通过浏览器的下载功能实现文件下载。
相关问题
export function downLoadFile(fileType, name, data) { let blob; switch (fileType) { case "jpg": blob = new Blob([data]); break; case "xlsx": case "xls": blob = new Blob([data], { type: 'application/vnd.ms-excel' // type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' }); break; case "doc": blob = new Blob([data], { type: 'word:application/msword' }); break; case "pdf": blob = new Blob([data], { type: 'application/pdf,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' }); break; case "csv": blob = new Blob([data], { type: 'text/csv;charset=utf-8' }); break; } const objectUrl = URL.createObjectURL(blob); const link = document.createElement("a"); // fileName let fileName = `${name}.${fileType}`; link.href = objectUrl; link.setAttribute("download", fileName); document.body.appendChild(link); link.click(); // 释放 window.URL.revokeObjectURL(link.href); }
这是一个JavaScript的文件下载函数,接受三个参数:文件类型(fileType)、文件名(name)和文件数据(data)。在函数中,根据文件类型的不同,使用Blob对象创建对应的文件数据,然后使用URL.createObjectURL方法创建一个指向Blob数据的URL,将URL赋值给一个a标签的href属性,最后通过调用a标签的click方法触发下载。最后使用window.URL.revokeObjectURL方法释放URL对象。该函数支持下载多种类型的文件,包括jpg、xlsx、xls、doc、pdf和csv。
// 导出Excel编辑 handleExportToExcel() { let param = { version: '1681517479352991745', format: 'xlsx' } exportProject(param).then(res => { this.downloadFile(res) this.$message({ message: '操作成功', type: 'success' }); }) }, downloadFile(data) { // const blob = new Blob([data], { type: 'application/octet-stream' }); // const url = window.URL.createObjectURL(blob); // const link = document.createElement('a'); // link.href = url; // link.setAttribute('download', 'filename.xlsx'); // document.body.appendChild(link); // link.click(); // document.body.removeChild(link); const blob = new Blob([data], { type: 'application/octet-stream' }); const url = window.URL.createObjectURL(blob); const link = document.createElement('a'); link.href = url; link.setAttribute('download', 'filename.xlsx'); link.style.display = 'none'; document.body.appendChild(link); link.click(); // 等待下载完成后,移除创建的链接 setTimeout(() => { document.body.removeChild(link); window.URL.revokeObjectURL(url); }, 1000); },没有弹出保存框
如果在调用 `downloadFile()` 方法时没有弹出保存框,可能是因为浏览器的安全策略阻止了自动下载。为了解决这个问题,您可以尝试以下方法:
1. 添加 `target="_blank"` 属性:在创建 `<a>` 元素时,将 `target` 属性设置为 "_blank",这将在新的浏览器标签页中打开下载链接。这可能会绕过浏览器的弹出窗口阻止策略。
```javascript
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', 'filename.xlsx');
link.setAttribute('target', '_blank');
```
2. 手动提示用户保存文件:而不是自动下载文件,您可以改为手动提示用户保存文件。可以使用 `window.open()` 方法来打开下载链接,并在新标签页中显示文件内容。然后,用户可以手动选择保存文件。
```javascript
const link = document.createElement('a');
link.href = url;
link.style.display = 'none';
document.body.appendChild(link);
window.open(url, '_blank');
```
这样做将打开一个新的浏览器标签页,并显示文件内容。用户可以手动选择在该标签页上点击保存按钮。
请尝试以上方法,并根据您的实际情况选择适合您的解决方案。希望能帮到您!