vue项目中如何实现附件下载？

1.在main.js进行封装打开文件方法。

Vue.prototype.getServerUrl = function () {

  if (process.env.NODE_ENV === "development") {

    return "http://114.242.205.124:9000/";

  } else {

    return "";

  }

};

/**

 * 打开文件。获取文件ID，NAME保持与后端返回字段一致。

 */

Vue.prototype.openFile = function (fileBean) {

  if (fileBean && fileBean.FILE_ID) {

    if (fileBean.FILE_ID.toLowerCase().endsWith(".pdf")) {

      window.open(this.getServerUrl() + "/file/" + fileBean.FILE_ID + "?act=open");

    } else {

      let a = document.createElement("a");

      a.href = this.getServerUrl() + "/file/" + fileBean.FILE_ID;

      a.download = fileBean.FILE_NAME;

      document.body.appendChild(a);

      a.click();

      a.remove();

    }

  }

};

2.前端页面框架书写点击事件。

3.methods中进行书写方法。

 

4.即可实现下载效果。