下载各种文件

方法一

导出excel，zip(下载的内容是有后端返回的数据，前端直接调用这个就可以)

export function excelDownload(type, name, data) {
  const link = document.createElement("a");
  const blob = new Blob([data]);
  link.style.display = "none";
  link.href = URL.createObjectURL(blob);
  link.setAttribute("download", `${name}.` + type);
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

在页面上引入即可,案列：

前端根据连接下载相关的文档

// 下载文件
export const downloadFile = (link, filename) => {
  let DownloadLink = document.createElement('a');
  DownloadLink.style = 'display: none'; // 创建一个隐藏的a标签
  DownloadLink.download = filename;
  DownloadLink.href = link;
  document.body.appendChild(DownloadLink);
  DownloadLink.click(); // 触发a标签的click事件
  document.body.removeChild(DownloadLink);
}

//支持gif下载
export function downloadIamge(imgsrc, name) {
  const image = new Image()
  // 解决跨域 Canvas 污染问题
  image.setAttribute('crossOrigin', 'anonymous')
  image.onload = () => {
    const canvas = document.createElement('canvas')
    canvas.width = image.width
    canvas.height = image.height
    const context = canvas.getContext('2d')
    context.drawImage(image, 0, 0, image.width, image.height)
    canvas.toBlob((blob) => {
      const url = URL.createObjectURL(blob)
      const a = document.createElement('a')
      a.download = name || 'photo'
      a.href = url
      a.click()
      a.remove()
      URL.revokeObjectURL(url)
    })
  }
  image.src = imgsrc
}


// pdf文件下载 安装 yarn add file-saver ,yarn addaxios
//import axios from 'axios';
//import FileSaver from "file-saver";
export function fileLinkToStreamDownload(url, fileName) {
  axios({
    url: url, // 服务器上pdf路径
    method: 'get',
    responseType: 'blob'
  }).then(res => {
    console.log(res.data)
    const blob = new Blob([res.data], { type: 'application/pdf;charset=utf-8' }) // 此处type根据你想要的
    FileSaver.saveAs(blob, fileName) // 下载的name文件名
  }).catch(err => {
    console.log(err)
  })
}

在页面上引入即可,案列：
downloadIamge下载的格式有jpg，png，jpeg，gif
imgUrl是一个地址，file.url是一个相对路径

方法二

安装 yarn add file-saver ,yarn addaxios

import axios from 'axios';
import FileSaver from "file-saver";
//url文件路径，fileName文件名称，type文件格式
// 文件下载
export function fileLinkToStreamDownload(url, fileName,type) {
  axios({
    url: url, // 服务器上路径
    method: 'get',
    responseType: 'blob'
  }).then(res => {
    console.log(res.data)
    const blob = new Blob([res.data], { type: `application/${type};charset=utf-8` }) // 此处type根据你想要的
    FileSaver.saveAs(blob, fileName) // 下载的name文件名
  }).catch(err => {
    console.log(err)
  })


}
//例如
import { fileLinkToStreamDownload } from "@/utils/util"
function downloadClick(item) {
    let index = item.fileName.indexOf(".");
    let result = item.fileName.substr(index + 1, item.fileName.length);
    fileLinkToStreamDownload(imgUrl + item.fileUrl,item.fileName, result)
}