前端能不能写文件

Question

问题描述

现在有后端传过来的视频流数据，想要通过写文件的方式存储起来，所以想问问前端能不能写文件，怎样写。

问题出现的环境背景及自己尝试过哪些方法

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

你期待的结果是什么？实际看到的错误信息又是什么？

Answer 1

写文件得用到类似node Stream之类的， 如果简单保存文件，直接a标签就可以触发下载到本地

Answer 2

你需要了解一下 blob

Answer 3

可以用blob，如果要文件格式的话，可以让后端吧视频存到文件夹，把文件夹地址给你，但是那样会占服务器空间

Answer 4

前端可以缓存，但不能直接写文件（因为权限、安全方面的原因）

Answer 5

直接生成一个文件不可以，可以用 blob 写到内存里面处理，也可以用 a 标签模拟下载到本地。

Answer 6

download.js了解一下…具体应该是用了blob和File相关的api来组装文件，然后创建一个 a 标签触发下载……

Answer 7

三种方法：
(1) 当文件比较小时，可以直接生成a标签，即可下载。需注意:

• 文件内容需经过encodeURIComponent, 因为是写在url里面
• 浏览器对url长度有限制(通常是2M左右)，所以这种方法只能处理较小的文件

var a = document.createElement('a');
var txt = '%E5%A7%93%E5%90%8D,%E5%B9%B4%E9%BE%84%0AMofei,18,\n';
for(var i=0; i<15; i++){
  txt = txt + txt;
}
a.href="data:text/csv;charset=utf-8,\uFEFF"+txt;
a.download="text.csv";
a.click()

(2) 对于较大的文件，可以用Blob配合URL.createObjectURL生成下载链接。这种方法能处理的文件大小在500M左右。

var a = document.createElement('a');
var txt = '%E5%A7%93%E5%90%8D,%E5%B9%B4%E9%BE%84%0AMofei,18,\n';
for(var i=0;i<20;i++){
  txt = txt + txt;
}
var t = new Blob([txt], {type : 'application/csv'});
a.href=URL.createObjectURL(t)
a.download=""Mofei的CSV.csv";
a.click();

(3)超大的文件，可以参考这个仓库StreamSaver.js

参考: Web APP/JavaScript 下载大文件解决方案