当前位置：首页 > news >正文

做网站优化步骤上海优化网站公司哪家好

news 2026/4/6 23:49:08

做网站优化步骤,上海优化网站公司哪家好,建娱乐网站,中国舆情观察网1、使用window.open方法 url: 可以为文件存放的地址 function downloadFile(url) {window.open(url); }2、使用<a>标签进行文件下载 <a href"/多因素登录说明文档.pdf" class"link-text">说明文档</a> 3、使用fetch和Blob对象这种…

1、使用window.open方法

url: 可以为文件存放的地址

function downloadFile(url) {window.open(url);
}

2、使用<a>标签进行文件下载

<a href="/多因素登录说明文档.pdf" class="link-text">说明文档</a>

3、使用fetch和Blob对象

这种方法适用于需要处理响应数据为Blob的情况，比如从API获取文件流。

async function downloadFile(url, name) {const response = await fetch(url);const blob = await response.blob();const link = document.createElement('a');link.href = URL.createObjectURL(blob);link.setAttribute('download', name);link.click();URL.revokeObjectURL(link.href);
}

4、使用Axios和Blob对象

如果你的项目中使用了Axios进行HTTP请求，可以结合Blob对象来实现文件下载。

import axios from 'axios';function downloadFile(url, filename) {axios({url: url,method: 'GET',responseType: 'blob', // 重要}).then((response) => {const blob = new Blob([response.data], { type: 'application/octet-stream' });const link = document.createElement('a');link.href = URL.createObjectURL(blob);link.setAttribute('download', filename);link.click();URL.revokeObjectURL(link.href);});
}

5、vue中，实现文件下载，且能看到进度条

<template><div><button @click="startDownload">Download</button><div v-if="downloadProgress > 0"><p>Download Progress: {{ downloadProgress }}%</p><progress :value="downloadProgress" max="100"></progress><button @click="cancelDownload">Cancel Download</button></div><div v-if="error"><p>Error: {{ error }}</p></div></div>
</template><script setup>
import { ref } from 'vue';
import axios from 'axios';const downloadProgress = ref(0);
const error = ref(null);
const cancelTokenSource = axios.CancelToken.source();const startDownload = () => {error.value = null; // 重置错误信息downloadProgress.value = 0; // 重置下载进度axios({method: 'get',url: 'your-file-url', // 接口urlresponseType: 'blob',cancelToken: cancelTokenSource.token,onDownloadProgress: (progressEvent) => {if (progressEvent.lengthComputable) {downloadProgress.value = Math.round((progressEvent.loaded * 100) / progressEvent.total);}},}).then((response) => {// 创建一个URL对象并下载文件const url = window.URL.createObjectURL(new Blob([response.data]));const link = document.createElement('a');link.href = url;link.setAttribute('download', 'filename.ext'); // 设置下载文件名document.body.appendChild(link);link.click();link.remove();}).catch((error) => {if (axios.isCancel(error)) {console.log('Request canceled', error.message);} else {error.value = error.message; // 设置错误信息}});
};const cancelDownload = () => {cancelTokenSource.cancel('Download canceled by the user.');downloadProgress.value = 0; // 重置下载进度
};
</script><style>
progress[value] {width: 100%;height: 20px;
}
</style>