1.封装方法

在src/utils文件夹下新建文件previewDownFile.js

import axios from "axios";
import { ElMessage} from "element-plus";export function previewBtn(url,fileName) { // url-下载预览地址 fileName-文件名if (!fileName) { // 图片预览window.open(url);}else{  // 文件下载axios({url,method: "GET",responseType: "blob"}).then(res => {const elink = document.createElement("a");elink.download = fileName;elink.style.display = "none";elink.href = URL.createObjectURL(res.data);document.body.appendChild(elink);elink.click();URL.revokeObjectURL(elink.href); // 释放URL对象document.body.removeChild(elink);ElMessage.success("下载成功")}).catch(() => {ElMessage.error("下载失败!");});}
}

2.引入使用

import { previewDownFile } from "@/utils/previewDownFile";

<div v-for="(item,index) in row.omsReceiveDto?.attachmentDtos" :key="index"><div @click="previewDownFile(item.attachmentUrl,item.attachmentName)">附件名称：{{ item.attachmentName }}</div>
</div>