js 将文件 url 地址转成 Blob 文件流并下载
-
安装 axios（如果还没有安装）：
npm install axios -
创建一个方法来处理文件下载：
在你的 Vue 组件中，可以创建一个方法来处理文件下载。假设你有一个 API 接口返回文件流，你可以使用
axios来发送请求并处理响应。
<template><div><button @click="downloadFile">Download File</button></div>
</template><script>
import axios from 'axios';export default {methods: {async downloadFile() {try {// 假设你的接口是 /api/get-fileconst response = await axios.get('/api/get-file', {responseType: 'blob' // 确保响应类型为blob});const url = window.URL.createObjectURL(new Blob([response.data]));const link = document.createElement('a');link.href = url;link.setAttribute('download', 'file.pdf'); // 设置下载的文件名document.body.appendChild(link);link.click();document.body.removeChild(link);} catch (error) {console.error('Error downloading file:', error);}}}
};
</script>
axios.get('/api/get-file', { responseType: 'blob' })：发送一个GET请求到你的 API 接口，并将响应类型设置为blob，以便接收二进制数据。window.URL.createObjectURL(new Blob([response.data]))：将响应数据转换为一个 Blob 对象，并生成一个临时的URL。- 创建一个隐藏的
<a>标签，并将其href属性设置为生成的临时URL，同时设置download属性以指定下载的文件名。 - 将这个
<a>标签添加到文档中，然后模拟点击事件以触发下载。 - 最后，移除这个临时创建的
<a>标签。
这样，当用户点击按钮时，浏览器会开始下载指定的文件。