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

最新推荐文章于 2024-07-18 14:26:59 发布
最新推荐文章于 2024-07-18 14:26:59 发布
阅读量1.1k 收藏
点赞数
分类专栏： js 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_44989801/article/details/124661690
版权
本文介绍了在Vue项目中如何使用Blob对象来实现Excel文件的下载。首先解释了Blob对象的含义，它作为二进制大数据的表示。接着，详细阐述了通过引入xlsx.core.min.js库，以及相应的数据准备步骤，完成Excel文件的下载过程。最后，提到了部分关键函数的调用说明。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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元/天 解锁文章
                        
                    
            

        


    



                



	

		

			

				
					
Vue.js使用Blob的方式实现excel表格的下载(流文件下载)

				
			

			

				

					weixin_48371382的博客
				

				

					07-19
					
					547
					
				

			

		

		

			
				
<el-button @click="handlerExportData">导出</el-button>

    // 导出
    handlerExportData(){
      getReportAllData({queryDate:this.time}).then(res=>{
        this.$Utils.exportExcel(res)
      })
    },

   /**
   * 导出excel文档
   */
  exportExce

			
		

	



                

            
              



	

		

			

				
					
vue 下载blob类型文件 到本地

					
最新发布

				
			

			

				

					qq_18595715的博客
				

				

					03-26
					
					232
					
				

			

		

		

			
				
vue 下载xlsx  图片等文件到本地

			
		

	



              


  
              

                


	

		

			

				
					
blob二进制导出exec表格

				
			

			

				

					B030209的博客
				

				

					10-30
					
					425
					
				

			

		

		

			
				
下载npm Install xlsx 或者  yarn add xlsx。

			
		

	





	

		

			

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

				
			

			

				

					Teemo_shape的博客
				

				

					08-29
					
					424
					
				

			

		

		

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

			
		

	



		

			
		



	

		

			

				
					
blob下载excel

				
			

			

				

					weixin_45734919的博客
				

				

					06-21
					
					808
					
				

			

		

		

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

			
		

	





	

		

			

				
					
封装下载Blob类型的excel方法 导出excel 下载excel

				
			

			

				

					m0_58234730的博客
				

				

					07-18
					
					503
					
				

			

		

		

			
				
【代码】封装下载Blob类型的excel方法 导出excel 下载excel。

			
		

	





	

		

			

				
					
blob数据格式excel文件下载

				
			

			

				

					qq_41497443的博客
				

				

					01-11
					
					566
					
				

			

		

		

			
				
blob数据格式excel文件下载

			
		

	





	

		

			

				
					
用Blob对象接收后台返回的文档流并下载成excel

				
			

			

				

					MISS_zhang_0110的博客
				

				

					11-12
					
					1281
					
				

			

		

		

			
				
【代码】用Blob对象接收后台返回的文档流并下载成excel。

			
		

	





	

		

			

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

				
			

			

				

					10-15
				

			

		

		

			
				
本文主要介绍如何使用Vue框架结合Blob对象实现导出Excel文件的功能。该功能在实现过程中主要涉及到前端的Vue技术、axios库进行网络请求，以及Blob对象对二进制数据的处理，最终实现导出Excel文件。以下将详细展开...

			
		

	





	

		

			

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

				
			

			

				

					11-20
				

			

		

		

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

			
		

	





	

		

			

				
					
Export2Excel&Blob;下载

				
			

			

				

					03-26
				

			

		

		

			
				
该资源是vue用来导入导出excel表格的必要引入文件，下载后记得收藏评论下哈

			
		

	





	

		

			

				
					
vue实现导出Excel的两个js文件-Blob+Export2Excel

				
			

			

				

					11-06
				

			

		

		

			
				
vue实现导出的两个js文件-Blob+Export2

			
		

	





	

		

			

				
					
Vue下载blob类型的excel文件:

				
			

			

				

					SunPeng的博客
				

				

					09-05
					
					747
					
				

			

		

		

			
				
Vue下载blob下载Excel文件:

			
		

	





	

		

			

				
					
前端通过new Blob下载文档流（下载zip或excel）

				
			

			

				

					qq_33548028的博客
				

				

					04-17
					
					3144
					
				

			

		

		

			
				
前端通过new Blob来下载后端返回的文档流

			
		

	





	

		

			

				
					
导出，文件下载跳转到excel表格（使用blob）

				
			

			

				

					bbkhhvv的博客
				

				

					12-12
					
					484
					
				

			

		

		

			
				
使用blob属性进行文件下载功能

			
		

	





	

		

			

				
					
vue下载excel表格

				
			

			

				

					活宝小娜的博客
				

				

					02-27
					
					686
					
				

			

		

		

			
				
先从后端获取文件流，获取数据为blob格式，然后创建a窗口，命名要下载的文件，最后移除a标签。

			
		

	





	

		

			

				
					
Vue 下载 Excel 文件

				
			

			

				

					大家好，我是+V
				

				

					12-05
					
					4099
					
				

			

		

		

			
				
Vue 下载 Excel 文件
Vue前端将List列表下载为Excel文件
安装依赖包
首先前端将List列表生成Excel文件需要下载几个依赖包。
npm install -S file-saver（生产依赖，则为-s）

npm install -S xlsx

npm install -D script-loader （开发依赖，则为-d）

引入文件
在 src 目录下面新建一个文件夹，例如 vendor，然后把：Blob.js 和 Export2Excel.js 两个文件放在该文件夹下，在Exp

			
		

	





	

		

			

				
					
blob数据类型_5分钟就能学会：Vue通过Blob对象实现导出Excel功能

				
			

			

				

					weixin_39820173的博客
				

				

					11-28
					
					936
					
				

			

		

		

			
				
不同的项目有不同的导出需求，有些只导出当前所显示结果页面的表格进入excel，这个时候就有很多插件，比如vue-json-excel或者是Blob.js+Export2Excel.js来实现导出Excel功能。但是有些需求因为数据量太大，成千上万条数据，所以是需要后端拼接，然后输出二进制流文件，然后前端直接下载，这次我们谈谈后者的做法。　　Blob对象表示一个不可变、原始数据的类文件对象，通常我也...

			
		

	





	

		

			

				
					
VUE中Blob与Export2Excel的JS库实现Excel导出

				
			

			

				

					
				

			

		

		

			
				
Blob.js主要负责在浏览器端创建二进制对象，而Export2Excel.js利用Blob.js提供的功能，结合Excel文件的特定格式，实现将数据转换为Excel表格并进行导出的功能。"  知识点详解:  1. Blob.js知识点:  - Blob对象代表不...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 1

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
A-莫天

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

		

	

	

			

	

	

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

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

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

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值