一,接口未在vue文件中,进行了抽离:

import request from '@/utils/request/request.js';

// 查询
export function getDataList(data) {
    return request.post('perfectAnalyse/getPageList',data);
}

接口文件只是一个post请求的例子,不是实际上传的接口,供参考,如果请求写在了方法内,则在then里直接调用以下方法。

二,文件下载(多种类型文件)

// 文件下载方法
    goclick(val) {
      let attachPath = val.attachPath.lastIndexOf('/')
      let pathName = val.attachPath.substring(0,attachPath)
      let fileName = val.attachPath.substring(attachPath - 0 + 1)
      //上传的参数
      postDownload({
        pathName: pathName,
        fileName: fileName,
      }).then((res) => {
        // 动态获取文件名
        let title = val.attachNames
        // 文件流的处理/设置链接
        let url = window.URL.createObjectURL(new Blob([res.data]));
        // 创建a标签
        let link = document.createElement('a');
        // 去掉a标签的样式
        link.style.display = 'none';
        // 设置链接
        link.href = url;
        // 下载后的文件名设置
        link.setAttribute('download', title);
        document.body.appendChild(link);
        // 点击下载
        link.click();
        // 释放内存
        URL.revokeObjectURL(url)
      });
    },

三,文件下载(指定类型文件)

	//res.data是获取接口返回的文件流
	let blob = new Blob([res.data], { type: "application/zip" });
    let url = window.URL.createObjectURL(blob);
    const link = document.createElement("a"); // 创建a标签
    link.href = url;
    link.download = "质量验收报告"; // 重命名文件
    link.click();
    URL.revokeObjectURL(url); // 释放内存

已zip文件未基准,如果切换类型,只需更改type后的类型即可,文件也可动态命名。该方法同样写在then的里面。

该方法只是实现较为简单的文件下载,如有复杂的下载功能,还需在此基础上改进。代码如有编写相对麻烦的步骤,日后会进行改进。

Logo

前往低代码交流专区

更多推荐