Vue使用Blob对象进行Excel文件下载

最新推荐文章于 2024-05-31 14:32:47 发布
最新推荐文章于 2024-05-31 14:32:47 发布
阅读量949 收藏
点赞数
分类专栏： js 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44989801/article/details/124661690
版权

Vue使用Blob对象进行Excel文件下载

一、Blob对象

1.介绍

Binary Large Object的缩写，代表二进制类型的大对象。在Web中，Blob类型的对象表示不可变的类似文件对象的原始数据，通俗点说，就是Blob对象是二进制数据，但它是类似文件对象的二进制数据，因此可以像操作File对象一样操作Blob对象，实际上，File继承自Blob。

使用

通过Blob的构造函数创建Blob对象
Blob(blobParts[, options])
blobParts 数组类型，数组中元素可以是ArrayBuffer，ArrayBufferView,Blob,DOMString等。
options:可选参数，字典格式类型。

二、文件下载-Excel为例

1.引入excel处理xlsx.core.min.js(最好下载js文件到本地，避免网络问题)
<script lang="javascript" src="https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.full.min.js"></script>
2.下载数据准备

                

                
                
        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  A-莫天
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
                
  • 
                  
                    打赏
                    
                  
                  
    打赏
    
                
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                  1
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
原生JavaScript JS导出blob后台文件流xlsx、xls文件自动下载（且规避乱码），解决导出Excel文件里面有[object Object]。

				
			

			

				

					我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
				

				

					12-06
					
					1696
					
				

			

		

		

			
				
解决上面的问题，请用如下代码：

			
		

	



                

              
                



	

		

			

				
					
Vue通过Blob对象实现导出Excel功能（2种方法）

				
			

			

				

					好记性，不如烂键盘。
				

				

					08-16
					
					4509
					
				

			

		

		

			
				
控制台输出的可以看到是个正确的Blob对象，这就说明我们的配置是对的。'responseType'表示的是服务器响应的数据类型，可以是'arrayBuffer'、'blob'、'document'、'json'、'txt'、'stream'，默认为json。但是有些需求因为数据量太大，成千上万条数据，所以是需要后端拼接，然后输出二进制流文件，然后前端直接下载，这次我们谈谈后者的做法。后端最好也要配置response头的content-type为对应的类型。扩展名----------MIME类型。

			
		

	



                


  
              

                


	

		

			

				
					
vue blob实现自定义多sheet数据导出到excel文件

					
最新发布

				
			

			

				

					BluerCat的博客
				

				

					05-31
					
					360
					
				

			

		

		

			
				
前端或后端导出文件，可以看自己需求。数据量比较少的时候，或页面展示的是所有数据的时候，使用前端js直接导出文件，比较方便，因为不用重查接口，减少了交互。若数据量比较大，或页面展示的是分页时，推荐走后端接口导出文件，因为没法拿到完整的数据，而且大数据量从接口返回到前端，对前端负担也不友好。背景：最近vue项目遇到一个需求，就是需要将多个表格分成不同sheet页并导出，之前的工具类只能导出一个sheet页，所以在原有的基础上，调整一下，让它支持多sheet导出。

			
		

	





	

		

			

				
					
vue Blob类型导出excel表格的下载

				
			

			

				

					Teemo_shape的博客
				

				

					08-29
					
					295
					
				

			

		

		

			
				
【代码】vue Blob类型导出excel表格的下载。

			
		

	



		

			
		



	

		

			

				
					
vue 中实现下载功能（后端数据是 Blob 类型）

				
			

			

				

					想成为大神的小白
				

				

					03-19
					
					4174
					
				

			

		

		

			
				
昨天实现下载功能的时候，本以为直接使用 window.location.fref, 就可以直接完成下载，但是多次尝试之后无法完成。

在请求中后端要求要加上 token，通过 href 的方式走接口是不会走全局的接口拦截器的，所以就没有办法通过拦截器去往 request header 中添加 token；询问后端在 URL 中取 token 行不，后端说 NO，这样的话之后想办法走接口，询问后端后...

			
		

	





	

		

			

				
					
Vue 之 new Blob() 文件流下载文件不同文件类型的 type 值整理

				
			

			

				

					doujingwei0825的博客
				

				

					03-31
					
					1077
					
				

			

		

		

			
				
在 Vue 项目中，经常用 Blob 二进制进行文件下载功能（vue后台返回文件流下载导出函数封装、调用示例），涉及不同后缀名的文件，这里整理一份 Blob 的配置关系对应表，在我们使用Blob做下载功能时 ，根据需要下载的文件类型修改 type 值进行下载即可。链接：https://juejin.cn/post/7043715237433851912。商业转载请联系作者获得授权，非商业转载请注明出处。

			
		

	





	

		

			

				
					
前端下载文件(Blob)的几种方式使用Blob下载文件

				
			

			

				

					共同进步
				

				

					05-23
					
					1万+
					
				

			

		

		

			
				
前端下载文件(Blob)的几种方式使用Blob下载文件 
a链接  location的href  window.open 使用blob文件流下载

1.直接返回文件的网络地址（一般用在静态文件上，比如图片以及各种音视频资源等）2.返回文件流（一般用在动态文件上，比如根据前端选择，导出不同的统计结果 excel 等）第一种方式比较简单，但是使用场景有限。第二种方式通用性更好。

			
		

	





	

		

			

				
					
Vue通过Blob对象实现导出Excel功能示例代码

				
			

			

				

					12-28
				

			

		

		

			
				
不同的项目有不同的导出需求，有些只导出当前所显示结果页面的表格进入excel，这个时候就有很多插件，比如vue-json-excel或者是Blob.js+Export2Excel.js来实现导出Excel功能。但是有些需求因为数据量太大，成千上万...

			
		

	





	

		

			

				
					
vue使用axios实现excel文件下载的功能

				
			

			

				

					10-15
				

			

		

		

			
				
总结起来，Vue结合axios实现Excel文件下载的关键步骤包括：设置axios请求的responseType为'blob'以获取文件流，创建Blob对象指定文件类型，根据浏览器类型选择合适的下载方式，以及封装函数以实现复用。这个过程涉及...

			
		

	





	

		

			

				
					
javascript使用Blob对象实现的下载文件操作示例

				
			

			

				

					11-20
				

			

		

		

			
				
在本文的示例中，使用Blob对象下载文件，特别是在以POST请求方式导出Excel时非常有用。通常，后端会返回一个包含文件内容的输出流，这些内容可能是ArrayBuffer或Blob格式。前端接收到数据后，可以通过Blob对象对这些...

			
		

	





	

		

			

				
					
vue-以文件流-blob-的形式-下载-导出文件操作

				
			

			

				

					10-14
				

			

		

		

			
				
总的来说，Vue中以文件流-Blob形式下载导出文件的关键步骤包括：设置请求响应类型为`blob`、获取文件流、构造Blob对象、生成URL并触发下载。为了确保良好的跨浏览器兼容性，可能需要针对不同的浏览器实现不同的下载...

			
		

	





	

		

			

				
					
Blob+Export2Excel.rar

				
			

			

				

					04-28
				

			

		

		

			
				
VUE导出Blob.js+Export2Excel.js用于导出excel的2个JS，可以满足大部分的需求

			
		

	





	

		

			

				
					
Blob()对象的使用--下载跨域图片与导出excel表格

				
			

			

				

					【有梦想的菜】的博客
				

				

					07-01
					
					3012
					
				

			

		

		

			
				
Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成 ReadableStream 来用于数据操作。

			
		

	





	

		

			

				
					
Vue下载blob类型的excel文件:

				
			

			

				

					SunPeng的博客
				

				

					09-05
					
					677
					
				

			

		

		

			
				
Vue下载blob下载Excel文件:

			
		

	





	

		

			

				
					
vue下载excel文件的方法

				
			

			

				

					hudabao888666的博客
				

				

					02-21
					
					1141
					
				

			

		

		

			
				
vue下载excel文件的方法

			
		

	





	

		

			

				
					
vue中下载excel文件4种方法

					
热门推荐

				
			

			

				

					一火的专栏
				

				

					04-10
					
					2万+
					
				

			

		

		

			
				
目录

1、通过url下载

2、通过 a 标签 download 属性结合 blob 构造函数下载

3、通过 js-file-download 插件

4、使用fetch下载



1、通过url下载

即后端提供文件的地址，直接使用浏览器去下载

通过window.location.href = 文件路径下载


window.location.href = `${location.origin}/operation/ruleImport/template`



通过 window.open(ur.

			
		

	





	

		

			

				
					
blob下载excel

				
			

			

				

					weixin_45734919的博客
				

				

					06-21
					
					707
					
				

			

		

		

			
				
解决后端文件流到前端乱码情况
/**baseUrl :你的基础地址，这里一般都会做跨域代理，如果做了跨域代理就是的代理后的地址，如果没有可以直接粘贴基础地址 + 后面为接口加参数new Blob(你请求返回来的文件流,你要下载的文件类型)el.setAttribute(‘download’, ‘文件名（你想要什么名字就写什么）’)后面的就是移除元素和释放blob
*/
handleDownload() {
const listId = this.fileData.listId;
axios({
method

			
		

	





	

		

			

				
					
使用BLOB 进行docx格式文件、zip压缩包下载

				
			

			

				

					chang_555的博客
				

				

					09-23
					
					2446
					
				

			

		

		

			
				
// docx 文件下载  如需xlsx格式文件 换掉后缀即可

useExportWithAxios1:(url,params,file)=>{

    // url 接口路径

    // params 后端需要的参数

    // file 自定义文件名称

axios.post(url,params,

{

responseType:'blob',

...

			
		

	





	

		

			

				
					
vue中使用excel导入导出

				
			

			

				

					weixin_40918145的博客
				

				

					08-15
					
					5082
					
				

			

		

		

			
				
原文地址： https://www.cnblogs.com/liguiwang/p/8430672.html

感谢该大神的分享

1、在vue中使用导入导出，需要下载3个依赖包和2个js包：

 使用npm安装：


 npm install -S file-saver xlsx（这里其实安装了2个依赖）

 npm install -D script-loader

或者使用yarn安装：

...

			
		

	





	

		

			

				
					
Java读取blob生成excel_Vue通过Blob对象实现导出Excel功能示例代码

				
			

			

				

					06-01
				

			

		

		

			
				
好的，我会回答你的问题。但是需要说明的是，我并不是一个能够直接读取数据库中的blob数据并生成excel文件的程序。我是一个文字AI助手，只能够提供一些相关的代码示例和思路，帮助你完成这个功能。

首先，读取数据库中的blob数据并生成excel文件需要以下几个步骤：

1. 连接数据库，并查询出需要的blob数据。可以使用JDBC或者其他ORM框架来完成这个步骤。

2. 将blob数据转换为excel文件。可以使用Apache POI或者其他的excel操作库来完成这个步骤。具体的方法是：先将blob数据读入到一个InputStream中，然后将这个InputStream作为参数传递给excel操作库的相关方法，即可完成转换。

3. 将生成的excel文件输出到客户端。可以使用Servlet或者其他的web框架来完成这个步骤。具体的方法是：先创建一个输出流，然后将生成的excel文件写入到这个输出流中，最后将这个输出流输出到客户端即可。

下面是一个Vue前端通过Blob对象实现导出Excel功能的示例代码：

```
<template>
  <div>
    <button @click="exportExcel">导出Excel</button>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  methods: {
    async exportExcel() {
      const response = await axios.get('/api/exportExcel', { responseType: 'blob' })
      const blob = new Blob([response.data], { type: 'application/vnd.ms-excel' })
      const url = window.URL.createObjectURL(blob)
      const link = document.createElement('a')
      link.href = url
      link.download = 'example.xlsx'
      link.click()
      window.URL.revokeObjectURL(url)
    }
  }
}
</script>
```

这个示例代码中，通过axios库向后端发送一个导出Excel的请求，后端将生成的excel文件作为blob数据返回。前端通过将这个blob数据转换为URL，然后创建一个a标签，将这个URL赋值给a标签的href属性，再将a标签的download属性设置为excel文件的文件名，最后通过模拟点击a标签来完成excel文件的下载。需要注意的是，这个示例代码中的下载方式不适用于IE浏览器，需要针对IE浏览器进行特殊处理。

希望这个示例代码能够帮助你完成你的需求。

			
		

	



              



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

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		
评论 1

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
A-莫天

			
你的鼓励将是我创作的最大动力

		

	

	

			

	

	

    ¥1
    ¥2
    ¥4
    ¥6
    ¥10
    ¥20
	

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

			
您的余额不足，请更换扫码支付或充值

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值