下载依赖
npm i file-saver --save
在所需页面引入
import * as FileSaver from "file-saver";
下载页面
// 假设 data 是从服务器返回的 ArrayBuffer 数据
const data = res.data;
const fileName = route.query.fileName; //设置文件名字
// 将 ArrayBuffer 转换为 Blob 对象
const blob = new Blob([data]);
// console.log(blob);
// 使用 FileSaver.js 的 saveAs 方法保存文件
FileSaver.saveAs(blob, fileName);
下面是一个小demo,把接口导出方法改一下就可以用了
<template>
<div>
<el-card style="height:100%;">
<el-button @click="downleLoad">下载</el-button>
</el-card>
</div>
</template>
<script lang='ts' setup>
import { useRoute } from 'vue-router';
import { ref, Ref, reactive, onMounted } from "vue";
import { downleFile } from "@/api/student/readFile";
import * as FileSaver from "file-saver";
const route = useRoute()
onMounted(() => {
})
const downleLoad = () => {
let params = {
fileNo: route.query.fileNo
}
downleFile(params).then((res: any) => {
// 假设 data 是从服务器返回的 ArrayBuffer 数据
const data = res.data;
const fileName = route.query.fileName;
// 将 ArrayBuffer 转换为 Blob 对象
const blob = new Blob([data]);
// console.log(blob);
// 使用 FileSaver.js 的 saveAs 方法保存文件
FileSaver.saveAs(blob, fileName);
})
}
</script>
<style lang="scss" scoped></style>
但如果下载的文件打开之后处于损坏了的状态考虑一下时候在请求头添加
responseType: 'arraybuffer',
headers: {
'responseType': 'blob',
}