在使用 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'); } } }
如果有其它疑问可以私信我~点个赞,关注下呗 ?