element 将文件下载;失败返回405解决方法。

在使用 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请求。你可以检查以下几点:

  1. 确认服务端接口的HTTP请求方法是否为POST。可能是服务端接口定义错误导致。
  2. 检查服务端接口的URL路径是否正确,并且确保后端服务已经启动并监听了该URL地址。
  3. 检查服务端防火墙或其他安全策略是否限制了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路径错误:请确保fileUrl正确指向要下载的文件URL路径。如果fileUrl已经包含了完整的URL地址,您无需再拼接http://127.0.0.1:8080

        3、参数配置错误:根据(你自己)代码,将请求参数配置传递给了download函数,但实际上并没有在download函数中使用这些配置。你自己可以将参数配置对象解构到service.getservice.post的第三个参数中。

要根据你的实际情况和后端接口的要求,适当调整代码中的这些部分。

那么在一般情况下;根据上面的方法都可以解决了??如果不行可以私信我;

也或者可以选择下面的其它下载方法:

如果你使用的是Vue.js,你还可以考虑使用vue-resource或者axios等第三方HTTP客户端库来发起HTTP请求。这些库提供了更方便的API,并且可以自动处理跨域请求和其他常见问题。
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');
    }
  }
}

如果有其它疑问可以私信我~点个赞,关注下呗 ?