FileSaver.js是一个HTML5版本的saveAs()实现,支持客户端文件保存,适用于Web应用。
FileSaver.js简介
描述 | |
定义 | FileSaver.js是一个用于在客户端保存文件的解决方案,非常适合在客户端生成文件的Web应用程序。 |
功能 | 实现浏览器端的文件保存功能,支持将Blob、File或Url类型的数据保存为文件。 |
兼容性 | 支持大多数主流浏览器,包括FireFox和Chrome。 |
基本使用
安装与引入
npm install file-saver --save
在Vue项目中:
import { saveAs } from 'file-saver'
在HTML中:
<script src="https://cdn.bootcdn.net/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
示例代码
保存文本
function saveText() { let blob = new Blob(['保存一个文本'], { type: 'text/plain;charset=utf-8' }); saveAs(blob, 'a.txt'); }
结果:保存一个名为“a.txt”的文本文件。
保存URL
function saveUrl() { saveAs('https://ppt.1ppt.com/uploads/soft/2202/1-2202231A334.zip', 'a.zip'); }
注意:对于图片、视频等可以在浏览器打开的文件,不会下载而是会在新窗口中打开,可以通过设置文件类型或将文件转成二进制流来解决此问题。
保存Canvas
var canvas = document.getElementById("my-canvas"); canvas.toBlob(function(blob) { saveAs(blob, "pretty image.png"); });
保存文件
function saveFile() { let file = new File(['保存一个文件'], 'a.txt', { type: 'text/plain;charset=utf-8' }); saveAs(file); }
CDN引入方式
<script src="//cdn.bootcdn.net/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script> <script src="//cdn.bootcdn.net/ajax/libs/FileSaver.js/2.0.5/FileSaver.js"></script>
在使用CDN引入时,如果遇到FileSaver.saveAs is not a function
的问题,可以尝试将FileSaver.saveAs
改为window.saveAs
。
FileSaver.js是一个强大的工具,可以方便地在客户端实现文件保存功能,适用于各种Web应用程序,通过简单的API调用,可以轻松地将不同类型的数据保存为文件,并且支持大多数主流浏览器。
以上内容就是解答有关“filesaver cdn”的详细内容了,我相信这篇文章可以为您解决一些疑惑,有任何问题欢迎留言反馈,谢谢阅读。
原创文章,作者:未希,如若转载,请注明出处:https://www.kdun.com/ask/1291132.html
本网站发布或转载的文章及图片均来自网络,其原创性以及文中表达的观点和判断不代表本网站。如有问题,请联系客服处理。
发表回复