前端下载利器——FileSaver(个人笔记)

npm地址：https://www.npmjs.com/package/file-saver

安装

npm install file-saver --save

使用

// 引入
import { saveAs } from 'file-saver'

// 保存文本
// 生成blob文本
const blob = new Blob(["您好!"], {type: "text/plain;charset=utf-8"});
// 第二个参数指定保存的文件名
saveAs(blob, "hello.txt");

// 保存url
saveAs("https://httpbin.org/image", "image.jpg");

// 把canvas保存成一个图片
const canvas = document.getElementById("myCanvas");
canvas.toBlob(function(blob) {
    saveAs(blob, "image.png");
});

// 保存纯文件
const file = new File(["您好!"], "hello.txt", {type: "text/plain;charset=utf-8"});
saveAs(file);

例子

handleDownload() {
    this.$axios.downloadTemplate({}, {
        responseType: "blob"
    }).then(res => {
        saveAs(res.data)
    })
},

接口返回的是文件流，通过responseType: "blob"可以拿到以下Blob格式数据

调用saveAs(res.data)即可保存blob。

参考文章：https://www.q578.com/s-5-2593068-0/