校园网站开发的需求分析,seo推广公司招商,珠海附近交友平台软件,织梦网站动态VUE前端导出文件之file-saver插件
安装
npm install file-saver --save
# 如使用TS开发#xff0c;可安装file-saver的TypeScript类型定义
npm install types/file-saver --save-dev如果需要保存大于 blob 大小限制的非常大的文件#xff0c;或者没有 足够的 RAM#xff0…VUE前端导出文件之file-saver插件
安装
npm install file-saver --save
# 如使用TS开发可安装file-saver的TypeScript类型定义
npm install types/file-saver --save-dev如果需要保存大于 blob 大小限制的非常大的文件或者没有 足够的 RAM然后看看更高级的 StreamSaver.js它可以通过新的流 API 的强大功能将数据直接异步保存到硬盘驱动器。那将有 支持进度、取消和知道何时完成编写;
FileSaver.js 是在客户端保存文件的解决方案非常适合在客户端上生成文件的 Web 应用程序但是如果文件来自 我们建议您首先尝试使用 Content-Disposition 附件响应标头因为它具有更多的跨浏览器兼容性。
Content-Disposition附件标头是从浏览器下载文件的最佳首选方式。它具有更好的跨浏览器兼容性没有任何内存限制也不需要任何 JavaScript。 Content-Type: application/octet-stream使浏览器不兼容呈现页面因此浏览器的后备解决方案是保存资源。
Content-Length是可选的使用它将使用户在进度条中还剩下多少。
Content-Type: application/octet-stream; charsetutf-8
Content-Disposition: attachment; filenamefilename.jpg; filename*filename.jpg
Content-Length: size in bytes寻找保存Canva画布查看 canvas-toBlob.js 以获取跨浏览器实现。canvas.toBlob()
引入使用
import { saveAs } from file-saver保存文件
const blob new Blob([fileStream]) // fileStream 是文件流一般从后台获取
saveAs(blob, fileName) // fileName 保存文件的名称需要带后缀保存文本require()
var FileSaver require(file-saver);
var blob new Blob([Hello, world!], {type: text/plain;charsetutf-8});
FileSaver.saveAs(blob, hello world.txt);保持txt文本文件
var blob new Blob([Hello, world!], {type: text/plain;charsetutf-8});
FileSaver.saveAs(blob, hello world.txt);保存 URL
FileSaver.saveAs(https://wwww.xxxx.org/image, image.jpg);
在同一源中使用 URL 将只使用 . 否则它将首先检查它是否支持具有同步头请求的 cors 标头。 如果是这样它将下载数据并使用 blob URL 进行保存。 如果没有它将尝试使用 .a[download]a[download]标准 W3C 文件 API Blob 接口并非在所有浏览器中都可用。Blob.js 是一种跨浏览器实现可以解决此问题。Blob保存Canvas画布
var canvas document.getElementById(my-canvas);
canvas.toBlob(function(blob) {saveAs(blob, pretty image.png);
});注意标准 HTML5 方法并非在所有浏览器中都可用。canvas-toBlob.js 是一个跨浏览器可以填充这一点。canvas.toBlob()canvas.toBlob()
