VUE前端导出文件之file-saver插件安装使用教程

更新时间：2024年05月15日 09:55:35 作者：xyphf_和派孔明

这篇文章主要给大家介绍了关于VUE前端导出文件之file-saver插件安装使用的相关资料,file-saver是一个用于保存文件的JavaScript库,它提供了一种简单的方式来生成和保存文件,支持各种文件类型,例如文本文件、图片、PDF等,需要的朋友可以参考下

安装

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; charset=utf-8'
Content-Disposition: attachment; filename="filename.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;charset=utf-8"});
FileSaver.saveAs(blob, "hello world.txt");

保持txt文本文件

var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-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()

总结

到此这篇关于VUE前端导出文件之file-saver插件安装使用的文章就介绍到这了,更多相关VUE前端导出文件file-saver插件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue实现轮播图片
这篇文章主要为大家详细介绍了vue实现简单的轮播图片，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
详解Element-ui NavMenu子菜单使用递归生成时使用报错
这篇文章主要介绍了详解Element-ui NavMenu子菜单使用递归生成时使用报错，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-04-04
Vue中nextTick的原理分析
本文详细介绍了Vue中nextTick的原理和使用方法,Vue采用异步渲染机制,通过nextTick可以确保在DOM更新后执行回调,nextTick依赖微任务和宏任务,优先使用Promise,降级到MutationObserver/setTimeout,Vue3进一步优化了nextTick,减少了复杂度并提升了性能
2025-02-02
深入了解Vue3组件传值方式
学习过 vue2 的宝子们肯定知道，组件传值是 vue 项目开发过程中必不可少的功能场景，在 vue2 里面有很多传值的方式。今天就来和大家讲讲Vue3的组件传值方式，需要的可以参考一下
2022-07-07
Vue 2.0 中依赖注入 provide/inject组合实战
这篇文章主要介绍了Vue 2.0 依赖注入 provide/inject组合，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下
2019-06-06
Vue驼峰与短横线分割命名中有哪些坑
这篇文章主要介绍了Vue驼峰与短横线分割命名中的注意事项，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧
2023-02-02
自定义Vue组件打包、发布到npm及使用教程
这篇文章主要介绍了自定义Vue组件打包、发布到npm及使用教程 ,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-05-05
vue实现多个tab标签页的切换与关闭详细代码
这篇文章主要给大家介绍了关于vue实现多个tab标签页的切换与关闭的相关资料,使用vue.js实现tab切换很简单,文中通过代码示例介绍的非常详细,需要的朋友可以参考下
2023-10-10
vue引用外部JS并调用JS文件中的方法实例
我们在做vue项目时,经常会需要引入js,下面这篇文章主要给大家介绍了关于vue引用外部JS并调用JS文件中的方法的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-02-02
整理项目中vue.config.js打包优化配置方法
这篇文章主要介绍了整理项目中vue.config.js打包优化,包括配置 webpack-bundle-analyzer 插件查看文件大小及配置compression-webpack-plugin 用gzip压缩打包的文件大小，本文结合实例代码介绍的非常详细，需要的朋友可以参考下
2023-02-02