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、对于图片、视频这样可以在浏览器打开的文件，不会下载，而是在浏览器新窗口里打开
2、对于不能打开的文件，比如上面的zip文件，可以下载，但是无法重命名

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

FileSaver.js的简单使用相关推荐

FileSaver.js下载文件简单demo
想把自己写的一份问题总结文档转成html好查看,还能进行增加操作,不想通过后端的io流,于是上网查了下,发现FileSaver.js可以实现前端的下载操作,于是就写了一个简单的demo <!DO ...
js怎么实现导出html文件,JS - 使用 FileSaver.js 实现浏览器文件导出
有时我们需要在浏览器上生成文件并保存到本地,这个借助 FileSaver.js 就可以很方便地实现. 一.基本介绍 1,FileSaver.js 功能特点 FileSaver.js是一款基于 HTML ...
游戏开发：js实现简单的板球游戏
js实现简单的板球游戏大家好,本次我们来使用js来实现一个简单的板球游戏.截图如下: 首先,设计页面代码,页面代码很简单,因为整个几乎是使用js编写的,页面几乎没有代码,如下: <!DOCTY ...
js html css淘宝足迹日历效果,js实现简单的日历显示效果函数示例
本文实例讲述了js实现简单的日历显示效果函数.分享给大家供大家参考,具体如下: 用一个函数简单的实现一个月份的日历,效果如下: 这个日历效果有高亮显示,我实现的思维比较简单. 我把上面的日历效果用表格 ...
js实现简单的循环打字效果(思路分享)
1.初始化"打字创建"属性代码类似于这样: <div id="demo"></div> <script>var typin ...
php简单网页制作代码,用HTML和CSS以及JS制作简单的网页菜单界面的代码
这篇文章主要介绍了使用HTML+CSS+JS制作简单的网页菜单界面,这个ABROAD项目所使用的JavaScript部分代码非常简单,需要的朋友可以参考下写ABROAD项目用到了标签这个东东,其实标 ...
JS函数简单的底层原理 -变量重复声明无效，隐式申明，变量提升，函数提升，以及堆栈内存的变化
JS函数简单的底层原理 (个人理解): 1. 已经使用var申明且赋值,若再次申明,则第二次申明(不赋值)无效. 2.在同一个作用域下,只要是发生了同名,且变量完成赋值,后者会覆盖前者.存在两个相同的 ...
python跑酷游戏源码_Phaser.js实现简单的跑酷游戏附源码下载
采用的物理引擎是Phaser.js 在这里对此引擎不做过多介绍(因为我也是小白,嘿嘿) 效果展示: 源码(详细源码图片资源可点击文章下方或屏幕右上方的github链接进行clone) 1.创建游戏舞台 ...
好程序员前端分享使用JS开发简单的音乐播放器
好程序员前端分享使用JS开发简单的音乐播放器,最近,我们在教学生使用JavaScript,今天就带大家开发一款简单的音乐播放器.首先,最终效果如图所示: 首先,我们来编写html界面index.htm ...

FileSaver.js的简单使用

简介

基本使用

FileSaver.js的简单使用相关推荐

最新文章

热门文章