file-saver 的使用

简介

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

基本使用

以下内容基于官方文档,官方文档传送门icon-default.png?t=N7T8https://gitcode.net/mirrors/eligrey/FileSaver.js

 

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

安装

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对照表icon-default.png?t=N7T8https://tool.oschina.net/commons

保存文本
 

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

结果:

file-saver 的使用_第1张图片

保存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);
 }

file-saver 的使用_第2张图片

原文地址

FileSaver.js的简单使用-CSDN博客 

你可能感兴趣的:(前端技能,前端)