VUE前端导出文件之file-saver插件

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; 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()

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/241241.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux创建macvlan 测试bridge、private和vepa模式

Linux创建macvlan&#xff0c;测试bridge、private和vepa模式 最近在看Docker的网络&#xff0c;看到关于macvlan网络的介绍。查阅了相关资料&#xff0c;记录如下。 参考 1.Linux Macvlan 2.图解几个与Linux网络虚拟化相关的虚拟网卡-VETH/MACVLAN/MACVTAP/IPVLAN 环境 操…

Vue如何请求接口——axios请求

1、安装axios 在cmd或powershell打开文件后&#xff0c;输入下面的命令 npm install axios 可在项目框架中的package.json中查看是否&#xff1a; 二、引用axios import axios from axios 在需要使用的页面中引用 三、get方式使用 get请求使用params传参,本文只列举常用参数…

CAS机制的讲解以及实际项目中的使用

首先要明白cas解决的问题&#xff0c;它是乐观锁的一种解决方式&#xff0c;都是多线程并发情况下解决数据线程按全问题的一种手段-----无锁并发 为什么无锁效率高&#xff1f; 无锁情况下&#xff0c;即使重试失败&#xff0c;线程始终在高速运行&#xff0c;没有停歌&#…

QB/T 2658-2017 卫生设备用台盆检测

卫生设备用台盆根据盆体材质的不同分为陶瓷台盆&#xff0c;钢化玻璃台盆&#xff0c;玻璃纤维增强塑料台盆&#xff0c;不锈钢台盆。搪瓷台盆等&#xff0c;主要用于卫生间、公共设施等场合作为洗手、洗脸用台盆。 QB/T 2658-2017 卫生设备用台盆测试 测试项目 测试标准 外…

山西电力市场日前价格预测【2023-12-24】

日前价格预测 预测说明&#xff1a; 如上图所示&#xff0c;预测明日&#xff08;2023-12-24&#xff09;山西电力市场全天平均日前电价为324.41元/MWh。其中&#xff0c;最高日前电价为456.41元/MWh&#xff0c;预计出现在18:00。最低日前电价为0.00元/MWh&#xff0c;预计出…

thinkphp+vue+mysql酒店客房管理系统 b1g8z

本系统包括前台界面、用户界面和管理员界面、员工界面。在前台界面里游客和用户可以浏览客房信息、公告信息等&#xff0c;用户可以预定客房&#xff0c;在用户中心界面里&#xff0c;用户可以管理预定信息&#xff0c;管理员负责用户预定的审核以及客房的发布、用户的入住等。…

【数据库设计和SQL基础语法】--连接与联接--多表查询与子查询基础(一)

一、引言 多表查询和子查询是数据库中强大的工具&#xff0c;用于在复杂数据结构中提取有价值的信息。其目的在于实现数据关联、筛选和汇总&#xff0c;使得用户能够更灵活地从多个表中检索所需的信息。这种查询方式的重要性体现在解决实际业务需求上&#xff0c;通过有效地组…

PHP开发案例:用PHP写一个简单的蜘蛛统计代码

在前面的文章中我们已经学习了怎么来识别蜘蛛(搜素引擎的爬虫),现在我们来运用我们学习到的知识写一个简单的程序。当然你必须在你需要统计的页面引入spider.php,否则是无法统计到的哦! 一、spider.php <?php function spider(){ $spider=0;//首先定义蜘蛛的默认值为…

Android开发中pcm格式的音频转换为wav格式之一

在我们开发中&#xff0c;会遇到pcm格式的音频转为wav&#xff0c;下面讲解一下具体怎么实现&#xff1a; 第一步&#xff1a;pcm文件转wav文件 /*** pcm文件转wav文件** param inFilename 源文件路径* param outFilename 目标文件路径* param deleteOrg 是否删除源文件*/…

要参加微软官方 Copilot 智能编程训练营了

GitHub Copilot 是由 GitHub、OpenAI 和 Microsoft 联合开发的生成式 AI 模型驱动的。 GitHub Copilot 分析用户正在编辑的文件及相关文件的上下文&#xff0c;并在编写代码时提供自动补全式的建议。 刚好下周要参加微软官方组织的 GitHub Copilot 工作坊-智能编程训练营&…

操作系统——进程管理算法和例题

1、概述 1.1 进程调度 当进程的数量往往多于处理机的个数&#xff0c;出现进程争用处理机的现象&#xff0c;处理机调度是对处理机进行分配&#xff0c;就是从就绪队列中&#xff0c;按照一定的算法&#xff08;公平、髙效&#xff09;选择一个进程并将处理机分配给它运行&am…

图像识别中的 Vision Transformers (ViT)

引言 Vision Transformers (ViT) 最近已成为卷积神经网络(CNN) 的竞争替代品&#xff0c;而卷积神经网络 (CNN) 目前在不同的图像识别计算机视觉任务中处于最先进的水平。ViT 模型在计算效率和准确性方面比当前最先进的 (CNN) 模型高出近 4 倍。 Transformer 模型已成为自然语…

【Vulnhub 靶场】【Corrosion: 1】【简单】【20210731】

1、环境介绍 靶场介绍&#xff1a;https://www.vulnhub.com/entry/corrosion-1,730/ 靶场下载&#xff1a;https://download.vulnhub.com/corrosion/Corrosion.ova 靶场难度&#xff1a;简单 发布日期&#xff1a;2021年07月31日 文件大小&#xff1a;7.8 GB 靶场作者&#xf…

SpringBootSQL监控

零、人在地球 一个成熟的生产环境会存在很多sql&#xff0c;测试环境不能完全复现出生产环境的情况。因此我们需要一些数据监控内容 一般用于监控&#xff1a; ①一些重点sql是否正常&#xff08;某些极端数据导致查询异常&#xff09; ②一些跑批任务的执行结果 ③一些表…

【C++】bind绑定包装器全解(代码演示,例题演示)

前言 大家好吖&#xff0c;欢迎来到 YY 滴C系列 &#xff0c;热烈欢迎&#xff01; 本章主要内容面向接触过C的老铁 主要内容含&#xff1a; 欢迎订阅 YY滴C专栏&#xff01;更多干货持续更新&#xff01;以下是传送门&#xff01; YY的《C》专栏YY的《C11》专栏YY的《Linux》…

WPF StackPanel

StackPanel是一个控件容器&#xff0c;它按照一个方向&#xff08;水平或垂直&#xff09;堆叠子元素&#xff0c;使得它们沿一个轴线对齐。你可以在StackPanel中放置其他控件&#xff0c;如按钮、标签、文本框、图片等等。这些控件的排列方式由StackPanel按照指定的方向自动确…

5.OpenResty系列之深入理解(一)

本文基于Centos8进行实践&#xff0c;请读者自行安装OpenResty。 1. 内部调用 进入默认安装路径 cd /usr/local/openresty/nginx/conf vim nginx.conflocation /sum {# 只允许内部调用internal;content_by_lua_block {local args ngx.req.get_uri_args()ngx.print(tonumber…

java进阶学习笔记

学习java深度学习&#xff0c;提升编程思维&#xff0c;适合掌握基础知识的工作者学习 1.反射和代理1.1 概念介绍1.2应用场景1.3 反射-reflect1.3.1 获得类-Class1.3.2 获得类的字段-Field1.3.3 动态访问和修改对象实例的字段1.3.4 获得类方法-Method1.3.5 调用方法.invoke1.3.…

评论回复功能数据库设计

1. 评论的场景 类似csdn博客评论 2. 建表sql CREATE TABLE comment (id varchar(32) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT id,parent_id varchar(32) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT 父级评论id&#xff08;…

【Kafka每日一问】kafka三种压缩方式差别?

Kafka 提供了三种压缩算法&#xff0c;分别是GZIP、Snappy 和 LZ4。 这三种压缩算法的差异主要在以下方面&#xff1a; 压缩比&#xff1a;GZIP 压缩比最高&#xff0c;DEFLATE 算法&#xff0c;但压缩和解压缩速度相对较慢&#xff1b;Snappy 压缩比次之&#xff0c;但压缩和…