在使用 element-ui 的上传后;想要点击将文件下载下来。首先你在前端要有个按钮吧~
<el-button size="mini" type="text" icon="el-icon-download" @click="handleDownload(scope.row.contractFile)" v-hasPermi="['system:contracts:edit']">下载附件</el-button>
这里直接使用 element 的组件;此处的点击调用了 handleDownload(scope.row.contractFile) 方法的,如果你是其它方法要换名字。
getCaptureName(fileUrl) {
const startIndex = fileUrl.lastIndexOf('/') + 1;
const captureName = fileUrl.substring(startIndex);
return captureName.replace(/_[^_]+(.[a-zA-Z]+)$/, '$1');
},
handleDownload(fileUrl) {
const fileName = this.getCaptureName(fileUrl);
download( fileUrl, {}, fileName)
},
这是其中的方法;当你写完这里就可以去试一试了;看看可不可以;
如果你试完,结果发现不可以那就看看下面的解决方法:
1、你看你是否有存在 request.js 这个文件里面应该要存有一个下载的方法;如果没有你可以自己新增一个方法;
export function download(url, params, filename, config) {
downloadLoadingInstance = Loading.service({ text: "正在下载数据,请稍候", spinner: "el-icon-loading", background: "rgba(0, 0, 0, 0.7)", })
return service.post(url, params, {
transformRequest: [(params) => { return tansParams(params) }],
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
responseType: 'blob',
...config
}).then(async (data) => {
const isBlob = blobValidate(data);
if (isBlob) {
const blob = new Blob([data])
saveAs(blob, filename)
} else {
const resText = await data.text();
const rspObj = JSON.parse(resText);
const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default']
Message.error(errMsg);
}
downloadLoadingInstance.close();
}).catch((r) => {
console.error(r)
Message.error('下载文件出现错误,请联系管理员!')
downloadLoadingInstance.close();
})
}
方法如上??;当然你写完这个request的话还要在前端导入也就是 handleDownload(scope.row.contractFile) 在这边
import {download} from "../../../utils/request";
路径你自己修改
完成上述后再试一试(说不定就可以了呢);也可能不行如果不行不要慌再看下面解决方法??:

如果你和我一样出现了405的错误代码;
根据提供的错误信息,看起来的请求方法被服务器拒绝了,因为服务器返回了405状态码(Method Not Allowed)。该状态码表示服务器不允许使用该HTTP方法(POST)请求指定的资源。
请确保服务器端已正确配置以允许使用POST方法访问该URL,并且该URL对应的资源可以接受POST请求。你可以检查以下几点:
- 确认服务端接口的HTTP请求方法是否为POST。可能是服务端接口定义错误导致。
- 检查服务端接口的URL路径是否正确,并且确保后端服务已经启动并监听了该URL地址。
- 检查服务端防火墙或其他安全策略是否限制了POST方法的访问。
那么多种错误可能,那么解决的方法呢?
1、请求方法错误:根据您提供的错误信息,看起来服务器不允许使用POST方法访问文件下载的URL。您可以尝试将请求方法改为GET方法。
return service.get(url, params, {
transformRequest: [(params) => { return tansParams(params) }],
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
responseType: 'blob',
...config
})

2、URL路径错误:请确保
3、参数配置错误:根据(你自己)代码,将请求参数配置传递给了
要根据你的实际情况和后端接口的要求,适当调整代码中的这些部分。
那么在一般情况下;根据上面的方法都可以解决了??如果不行可以私信我;
也或者可以选择下面的其它下载方法:
如果你使用的是Vue.js,你还可以考虑使用
axios 下载方法的参考代码:
import axios from 'axios';
export default {
methods: {
downloadFile(fileUrl) {
const fileName = this.getCaptureName(fileUrl);
axios({
url: 'http://127.0.0.1:8080' + fileUrl,
method: 'GET',
responseType: 'blob', // important
}).then((response) => {
const url = window.URL.createObjectURL(new Blob([response.data]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', fileName);
document.body.appendChild(link);
link.click();
});
},
getCaptureName(fileUrl) {
const startIndex = fileUrl.lastIndexOf('/') + 1;
const captureName = fileUrl.substring(startIndex);
return captureName.replace(/_[^_]+(.[a-zA-Z]+)$/, '$1');
}
}
}
如果有其它疑问可以私信我~点个赞,关注下呗 ?