前端文件下载

前端文件下载整理，后端接口提供Blob方式，兼容ie

1. 方法1

IE兼容处理：
**Internet Explorer ** 的 msSaveBlob 和 msSaveOrOpenBlob 方法允许用户在客户端上保存文件，方法如同从 Internet 下载文件

1. msSaveBlob：只提供一个保存按钮
2. msSaveOrOpenBlob：提供保存和打开按钮

axios({
    url: url,
    method: 'GET',
    responseType: 'blob'
}).then((response) => {
    const data = new Blob([response.data]);
    if ('msSaveOrOpenBlob' in navigator) {
      // ie11
      window.navigator.msSaveOrOpenBlob(data, filename);
    } else {
      var fileURL = window.URL.createObjectURL(data);
      var fURL = document.createElement('a');

      fURL.href = fileURL;
      fURL.setAttribute('download', filename);
      document.body.appendChild(fURL);

      fURL.click();
    }
});

2. 使用插件 FileSave

github.com/eligrey/Fil…

Saving text using require()

var FileSaver = require('file-saver');
var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
FileSaver.saveAs(blob, "hello world.txt");

Saving text

var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
FileSaver.saveAs(blob, "hello world.txt");

Saving URLs

FileSaver.saveAs("https://httpbin.org/image", "image.jpg");

axios({
    url: url,
    method: 'GET',
    responseType: 'blob'
}).then((response) => {
    if (response.data.code === apiCodeMap.failCode) {
      this.$message.error(response.data.msg);
    } else {
      const data = new Blob([response.data]);
      saveAs(data, filename);
    }
})

注意问题：后端返回数据格式必须是Blob