在vue的项目中文件流格式进行下载和导出：使用blob格式

最新推荐文章于 2024-04-08 14:32:11 发布
最新推荐文章于 2024-04-08 14:32:11 发布
阅读量561 收藏
点赞数
分类专栏： vue 前端 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lixu_boke/article/details/123052332
版权
前端 同时被 2 个专栏收录
30 篇文章 0 订阅
订阅专栏
vue
26 篇文章 0 订阅
订阅专栏

在做项目时我们可能会遇到下载功能以及导出功能：

其实这两个功能是一样的只是看客户需求是什么；说一下原生的文件流下载方法

我这里的下载方法分两种，一种是带请求头token的一直是不带的其实本质上没有太大的区别：

我写了一个公共的方法区分有请求头和无请求头；当然还有预览我一般使用window.open() 

lixu_boke
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue项目实现多sheet页导出所需文件Blob.js
11-03
vue项目实现多sheet页导出所需文件Blob.js
vue实现word，pdf文件的导出功能
12-09
vue实现word或pdf文档导出的功能，我的项目是：后端返回一个文档流(下图)，然后前端对文档流做处理进行下载，代码如下： import axios from 'axios'; axios.get(`url`, { //url: 接口地址 responseType: `...
vue 图片下载，下载后端接口返回的blob类型的文件（图片）
qq_46302247的博客
04-07 526
【代码】vue 图片下载，下载后端接口返回的blob类型的文件（图片）
vue中下载图片、下载字符流图片，将图片链接转换成base64格式进行下载
huangfuyk.的博客
05-07 1400
1. 一般情况下，我们可以使用 a 标签进行图片的下载，但有时候只是页面的跳转，并没有进行下载，此时可以加一个download属性。 <a href="http://xxxx.xx.com:xx.jpg" target="_blank" download='xx.jpg'> 2. 将图片链接转换成base64格式，再进行下载。 HTML部分代码如下： // 参数为可选项 <div @click="downloadImg('图片的地址', '图片的名称')">点击下载</d
【vue工作随笔】前端配合后端进行文件下载的方法记录
最新发布
2301_82244343的博客
04-08 1333
整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》PDF完整版点击这里领取整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》PDF完整版点击这里领取。
vue生成并下载文件流图片
TTong_190502的博客
02-07 1342
该文章主要介绍从后端获取到流文件格式的图片，生成图片，并完成下载图片到本地
vue前端处理Blob文件流，实现文件下载
poisons__的博客
03-16 1371
【代码】vue前端处理Blob文件流，实现文件下载。
vue实现blob文档流下载文件
A1123352950的博客
11-20 1580
vue解决blob文档流下载文件
vue-以文件流-blob-的形式-下载-导出文件操作
10-14
主要介绍了vue-以文件流-blob-的形式-下载-导出文件操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
12-13
在 vue 项目中,使用的 axios ,后台 java 提供的 post 接口 api 实现 第一步,在 axios 请求中加入参数,表示接收的数据为二进制文件流 responseType: 'blob' 第二步,在拿到数据流之后,把流转为指定文件格式并创建a标签...
前端如何实现文件下载，防止浏览器自动打开可预览文件
qq_19313497的博客
02-09 1万+
前端如何实现文件下载，防止浏览器自动打开可预览文件欢迎踩坑踩坑记录一**window.open()方法**踩坑记录二**html的a标签**踩坑记录三**window.location.href方法**解决问题**使用XMLHttpRequest对象** 欢迎踩坑 很高兴陌生的coder你能点进来，恭喜你，希望我的这篇博客能帮你解决浏览器自动预览txt，pdf等可预览文件，而不是下载这个文件。这篇...
Vue 之 new Blob() 文件流下载文件不同文件类型的 type 值整理
doujingwei0825的博客
03-31 1037
在 Vue 项目中，经常用 Blob 二进制进行文件下载功能（vue后台返回文件流下载导出函数封装、调用示例），涉及不同后缀名的文件，这里整理一份 Blob 的配置关系对应表，在我们使用Blob做下载功能时 ，根据需要下载的文件类型修改 type 值进行下载即可。链接：https://juejin.cn/post/7043715237433851912。商业转载请联系作者获得授权，非商业转载请注明出处。
在vue中实现多个文件下载&&element ui 实现弹窗
dream_s_a的博客
07-12 3637
在vue中实现多个文件下载&&element ui 实现弹窗
前端vue中文件下载的几种方式
热门推荐
Mia的博客
04-03 18万+
第一种方式是前端创建超链接，通过a标签的链接向后端服务发get请求，接收后端的文件流，非常简单： <a :href='"/user/downloadExcel"' >下载模板</a> 另一种情况是创建div标签，动态创建a标签： <div name="downloadfile" "downloadExcel()">下载</div> function...
Vue选择本地文件并获取流文件
灰海
10-13 2406
Vue选择本地文件并获取流文件
vue 导出下载功能
tumi
03-20 4086
利用a标签 html: <el-button type="text" size="small" plain @click="exportFailNum(scope.$index, scope.row)" :loading="resetLoading" > <a href="javaScript:;" style="color:#409EFF...
poi导出excel，Batik处理svg图片导致 Excel无法打开文件，因为文件格式或文件扩展名无效，请确定文件未损坏，并且文件扩展名与文件格式匹配。
Ping
06-20 1558
Batik处理svg图片导致poi导出Excel无法打开文件简介最近一周生产环境上导出电子表格文件出现了异常，并不确定是什么原因导致的排查也没有结果。问题现象问题排查及解决1、期间poi的jar包升级了一次版本。怀疑是poi版本问题导致下载后无法打开2、怀疑poi文件流被修改，改用easyExcel。3、怀疑poi和easyExcel同时存在导致文件流出现什么异常4、只能怀疑近期其他功能干扰近期上线儿 Word文档的导入和导出、word里面视频导入导出、 Svg图片转换为编辑图片。5、开始还原svg图片转P
vue 文件导出（下载）时打不开、空白或者乱码的情况
大雄笑哈哈的博客
04-27 2279
文件下载或导出时打不开、空白或乱码： 可能是没有设置responseType，默认为空，值可以为blob、arrayBuffer、json、text、document、json 一般后端返回文件流，所以需要进行返回数据的处理：根据后台返回情况设不同的值 axios.get({ url: 'xxxxxx', method: 'get', data:{}, responseType: 'blob' }).then(res => { ...
Java后端与Vue前端导出Excel表格文件并解决乱码和文件打不开
江湖人称小程的博客
11-26 8726
Java 需要用到 poi 两个依赖包，Maven如下： <!-- https://mvnrepository.com/artifact/org.apache.poi/poi --> <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi</artifactId> <version>5.0.0</version> </depende
vue前端导出.pcap文件无法在wireshark中打开 如何正确使用vue导出后端文件流
05-26
要正确使用Vue导出后端文件流，您需要确保您的导出文件是正确的.pcap格式，以便Wireshark可以正确读取它。以下是一些可能有用的步骤： 1. 确保您的后端API正确地生成.pcap文件，并且文件内容是正确的。 2. 在Vue...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值