我有一个难题要问你，我已经为此苦苦挣扎了一段时间了。
我正在寻找一种解决方案，我可以将文件保存到用户计算机，而无需本地存储，因为本地存储有 5MB 的限制。我想要“保存到文件”对话框，但我想要保存的数据只能在 JavaScript 中使用，我想阻止将数据发送回服务器，然后再次发送。
用例是，我正在处理的服务正在保存用户数据的压缩和加密块，因此服务器不知道这些块中的内容，并且通过将数据发送回服务器，这将导致流量增加 4 倍并且服务器正在接收未加密的数据，这将使整个加密变得毫无用处。
我发现了一个 JavaScript 函数，可以使用“保存到文件”对话框将数据保存到用户计算机，但是这方面的工作已停止，并且不受完全支持。是这样的：http://www.w3.org/TR/file-writer-api/
既然我没有 window.saveAs，那么如何从 Blob 对象保存数据而不将所有内容发送到服务器？
如果我能得到提示，搜索什么，那就太好了。
我知道这是可行的，因为 MEGA 正在这样做，但我想要自己的解决方案:)
最好的选择是使用 blob url（这是一个特殊的 url，指向浏览器内存中的对象）：
var myBlob = ...;
var blobUrl = URL.createObjectURL(myBlob);
现在您可以选择简单地重定向到此网址 (
window.location.replace(blobUrl)var link = document.createElement("a"); // Or maybe get it from the current document
link.href = blobUrl;
link.download = "aDefaultFileName.txt";
link.innerText = "Click here to download the file";
document.body.appendChild(link); // Or append it whereever you want
FileSaver.js 为某些没有它的浏览器实现
saveAshttps://github.com/eligrey/FileSaver.js
在 Chromium 75 和 Firefox 68 上使用 FileSaver.js 1.3.8 进行测试，两者都没有
saveAs工作原理似乎只是 创建一个
<a这是一个演示，它将使用
canvas.toBlobmypng.pngvar canvas = document.getElementById("my-canvas");
var ctx = canvas.getContext("2d");
var pixel_size = 1;
function draw() {
console.log("draw");
for (x = 0; x < canvas.width; x += pixel_size) {
for (y = 0; y < canvas.height; y += pixel_size) {
var b = 0.5;
ctx.fillStyle =
"rgba(" +
(x / canvas.width) * 255 + "," +
(y / canvas.height) * 255 + "," +
b * 255 +
",255)"
;
ctx.fillRect(x, y, pixel_size, pixel_size);
}
}
canvas.toBlob(function(blob) {
saveAs(blob, 'mypng.png');
});
}
window.requestAnimationFrame(draw);<canvas id="my-canvas" width="512" height="512" style="border:1px solid black;"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>这是下载多个图像的动画版本：将 HTML5 Canvas 序列转换为视频文件
另请参阅：
这是直接的方法。
canvas.toBlob(function(blob){
console.log(typeof(blob)) //let you have 'blob' here
var blobUrl = URL.createObjectURL(blob);
var link = document.createElement("a"); // Or maybe get it from the current document
link.href = blobUrl;
link.download = "image.jpg";
link.innerHTML = "Click here to download the file";
document.body.appendChild(link); // Or append it whereever you want
document.querySelector('a').click() //can add an id to be specific if multiple anchor tag, and use #id
}, 'image/jpeg', 1); // JPEG at 100% quality
花了一段时间才提出这个解决方案，如果有帮助请发表评论。 感谢 Sebastien C 的回答。
这个节点依赖更多的是 utils fs-web;
npm i fs-web
使用方法
import * as fs from 'fs-web';
async processFetch(url, file_path = 'cache-web') {
const fileName = `${file_path}/${url.split('/').reverse()[0]}`;
let cache_blob: Blob;
await fs.readString(fileName).then((blob) => {
cache_blob = blob;
}).catch(() => { });
if (!!cache_blob) {
this.prepareBlob(cache_blob);
console.log('FROM CACHE');
} else {
await fetch(url, {
headers: {},
}).then((response: any) => {
return response.blob();
}).then((blob: Blob) => {
fs.writeFile(fileName, blob).then(() => {
return fs.readString(fileName);
});
this.prepareBlob(blob);
});
}
}
从文件选择器或输入类型=文件文件选择器中，将文件名保存到本地存储：
HTML：
<audio id="player1">Your browser does not support the audio element</audio>
JavaScript：
function picksinglefile() {
var fop = new Windows.Storage.Pickers.FileOpenPicker();
fop.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.musicLibrary;
fop.fileTypeFilter.replaceAll([".mp3", ".wav"]);
fop.pickSingleFileAsync().then(function (file) {
if (file) {
// save the file name to local storage
localStorage.setItem("alarmname$", file.name.toString());
} else {
alert("Operation Cancelled");
}
});
}
然后在代码中，当您想要播放所选的文件时，请使用以下命令，该命令仅使用音乐库中的名称来获取文件。 （在 UWP 包清单中，将“功能”设置为包含“音乐库”。）
var l = Windows.Storage.KnownFolders.musicLibrary;
var f = localStorage.getItem("alarmname$").toString(); // retrieve file by name
l.getFileAsync(f).then(function (file) {
// storagefile file is available, create URL from it
var s = window.URL.createObjectURL(file);
var x = document.getElementById("player1");
x.setAttribute("src", s);
x.play();
});