前端导出/下载文件

单纯的在接口定义文件类型，会导致在一些不能导出的情况下返回的信息不能被获取，所以在页面对数据类型进行判断，错误信息可以进行展示，正确的文件流信息再进行导出文件操作

文件流blob文件

定义接口

// api接口
export function exportFile(obj) {
    return request({
        url: '/api/savePaymentBatch',
        method: 'post',
        data: obj,
        responseType: 'blob',
    })
}

导出文件

1	import { exportFile } from "@/api/stocks";

exportFile(obj).then(res => {
  // 处理返回的文件流，下载文件
  const resData = res.data;
  if (resData.type === "application/json") {
    // 说明是普通对象数据，读取信息
    const fileReader = new FileReader();
    fileReader.readAsText(resData);
    fileReader.onloadend = () => {
      const jsonData = JSON.parse(fileReader.result);
      this.$message.error(jsonData.msg);
      return false;
    };
  } else {
    // 下载文件
    const link = document.createElement("a");
    let blob = new Blob([resData], {
      type:"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8"
    });
		let event = new MouseEvent("click");
    link.href = URL.createObjectURL(blob);
    link.setAttribute("download", `${this.excelName}.xlsx`); // 文件名可自定义
    link.dispatchEvent(event);
    this.$message.success("导出成功");
  }
});

图片url导出文件

相较于上述使用a标签的download属性也可以实现图片的下载功能，但是必须保证同源，如果不是同源的图片，就无法实现图片的下载，会直接打开该图片，亦有使用iframe标签方法的，小伙伴们可以去尝试一下，本文将用canvas实现图片url的下载功能

获取图片的url

接口参考上文的接口，本文以已经拿到图片url开始开发

下载图片

原理：使用画布绘制图片，将画布内容转为base64编码数据，就不会出现由于不同源导致打开图片的问题

let image = new Image();
image.src = res.url;//图片的url
image.setAttribute("crossOrigin", "anonymous");// 解决跨域 Canvas 污染问题
image.onload = function() {
  let canvas = document.createElement("canvas");
  canvas.width = image.width;
  canvas.height = image.height;
  let context = canvas.getContext("2d");
  context.drawImage(image, 0, 0, image.width, image.height);
  let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
  let imgLink = document.createElement("a"); // 生成一个a元素
  let event = new MouseEvent("click"); // 创建一个单击事件
  imgLink.download = photoName || "photo"; // 设置图片名称
  imgLink.href = url; // 将生成的URL设置为a.href属性
  imgLink.dispatchEvent(event); // 触发a的单击事件
};
this.$message.success("下载成功");

vue