zoukankan      html  css  js  c++  java
  • js文件下载blob

    使用axios文件下载

    if (tableDataSource.selectedRowKeys.length > 0) {
            //本次请求你携带token
    	axios.defaults.headers[
    	  'authorization'
    	] = `Bearer ${store.state.login.accessToken}`
      //你携带的token
      axios.defaults.headers['tenantId'] =
    	  store.state.login.tempTenant.id || ''
      axios
    	  .post(
    		  window.globalConfig.baseUrl +
    			  '/asset-manage-api/api/manage/asset/aa/bb',  //你请求的地址
    		  tableDataSource.selectedRowKeys,  //你携带的数组
    		  {
    			  responseType: 'blob', // blob流进行下载 
    		  }
    	  )
    	  .then(res => {
    		  let blob = new Blob([res.data], {
    			  type: 'applicationnd.ms-excel',
    		  })
    		   if (!!window.ActiveXObject || 'ActiveXObject' in window) {
    			  window.navigator.msSaveOrOpenBlob(blob, 'fileName')
    			} else {
    			  const link = document.createElement('a')
    			  link.style.display = 'none'
    			  link.href = URL.createObjectURL(blob)
    			  link.setAttribute('download', 'fileName')
    			  document.body.appendChild(link)
    			  link.click()
    			  document.body.removeChild(link)
    		  }
    	  })
    } else {
      alert("请选择")
    }
    

    使用原生js下载文件

    
    // 判断是否有这个属性
    const createObjectURL = function (object) {
    	return window.URL
    		? window.URL.createObjectURL(object)
    		: window.webkitURL.createObjectURL(object)
    }
    
    // 使用promise判断是否是文件流
    const checkBlob = function (blob) {
    	return new Promise<void>((resolve, reject) => {
    		const fileReader = new FileReader()
    		fileReader.onload = function (res: any) {
    			const data =
    				res.target.result.substr(0, 1) == '{'
    					? JSON.parse(res.target.result)
    					: { success: true }
    			if (!data.success) {
    				reject(data.msg)
    			} else {
    				resolve()
    			}
    		}
    		fileReader.readAsText(blob)
    	})
    }
    
    // 文件下载的主体方法
    // callback是文件下载成功后的回调函数
    // 
    app.config.globalProperties.blobFileDownLoad = function (
    	params,
    	callback
    ) {
    	if (!params.method) params.method = 'get'
    	const xhr = new XMLHttpRequest()
    	xhr.open(params.method, params.url, true)
    	xhr.setRequestHeader(
    		'Authorization',
    		'Bearer ' + store.state.login.accessToken
    	)
    	xhr.responseType = 'blob'
    	xhr.onload = function (e) {
    		if (this.status == 200) {
    			const blob = this.response
    			checkBlob(blob)
    				.then(() => {
    					const filename = params.name + '.xls'
    					const _window: any = window
    					if (_window.navigator.msSaveOrOpenBlob) {
    						navigator.msSaveBlob(blob, filename)
    					} else {
    						const a = document.createElement('a')
    						const url = createObjectURL(blob)
    						a.href = url
    						a.download = filename
    						document.body.appendChild(a)
    						a.click()
    						window.URL.revokeObjectURL(url)
    					}
    				})
    				.catch(err => {
    					window.$message.error(err)
    				})
    			callback()
    		}
    	}
    	xhr.setRequestHeader('Content-type', 'application/json')
    	xhr.send(params.data)
    }
    

    使用pots的方式进行下载

    proxy.blobFileDownLoad(
    	{
    		url:
    			window.globalConfig.baseUrl +
    			'/asset-manage-api/api/manage/asset/aa/bb',
    		method: 'post',
    		// 需要转化一下哈
    		data: JSON.stringify(tableDataSource.selectedRowKeys),
    	},
    	() => {
    		// 成功后的回调
    		console.log(1)
    	}
    )
    

    使用get的方式进行下载哈

    function downLoad(type) {
    	proxy.blobFileDownLoad(
    		{
    			url:
    				window.globalConfig.baseUrl +
    				'/asset-manage-api/api/manage/asset/cc/qq?type=' +
    				type,
    			name:'文件名'
    		},
    		() => {
    			console.log(1)
    		}
    	)
    }
    
    作者:明月人倚楼
    出处:https://www.cnblogs.com/IwishIcould/

    想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!

    如果觉得这篇文章对你有小小的帮助的话,记得在右下角点个“推荐”哦,或者关注博主,在此感谢!

    万水千山总是情,打赏5毛买辣条行不行,所以如果你心情还比较高兴,也是可以扫码打赏博主(っ•̀ω•́)っ✎⁾⁾!

    想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!

    支付宝
    微信
    本文版权归作者所有,欢迎转载,未经作者同意须保留此段声明,在文章页面明显位置给出原文连接
    如果文中有什么错误,欢迎指出。以免更多的人被误导。
  • 相关阅读:
    2007年8月小记
    2007年7月小记
    CS2007.1 在多应用程序中的单点登录
    C#类型转换2
    checkbox与说明文字无法对齐的问题
    css中的内容溢出
    javascript获取的层(div)高度
    C#类型转换3
    js修改css样式表解析(转)
    (转)javascript选择id class
  • 原文地址:https://www.cnblogs.com/IwishIcould/p/15271741.html
Copyright © 2011-2022 走看看