FileSaver.js的简单使用

简介

FileSaver.js 是在客户端保存文件的解决方案，非常适合在客户端生成文件的 Web 应用程序

基本使用

以下内容基于官方文档，官方文档传送门

注意：存在文件保存的大小限制，具体大小看官方文档

安装

npm install file-saver --save

语法

import FileSaver from 'file-saver';

FileSaver saveAs(Blob/File/Url,fileType)
// 参数1：支持的类型：blob（二进制）、File（文件）、Url（url链接）
// 参数2：文件类型

HTTP Content-type对照表

保存文本

// 保存文本
saveText() {
    // 创建二进制文件
    let blob = new Blob(['保存一个文本'],{type: 'text/plain;charset=utf-8'});
    FileSaver.saveAs(blob,'a.txt');
}

结果：

保存url

 saveUrl() {
     FileSaver.saveAs('https://ppt.1ppt.com/uploads/soft/2202/1-2202231A334.zip', 'a.zip');
 }

碰到了几个问题，知道如何解决的麻烦说一下.
1、对于图片、视频这样可以在浏览器打开的文件，不会下载，而是在浏览器新窗口里打开
这个问题应该可以通过：使用saveAs方法时设置文件类型；或者将文件转成二进制流，下载二进制流（未尝试）

保存canvas

var canvas = document.getElementById("my-canvas");
canvas.toBlob(function(blob) {
    saveAs(blob, "pretty image.png");
});

这个没有试过

保存文件

 saveFile() {
      let file = new File(['保存一个文件'],'a.txt',{type: 'text/plain;charset=utf-8'});
      FileSaver.saveAs(file);
 }