vue 文件下载Blob的使用

news/2024/7/10 22:41:29 标签: vue.js, javascript, ajax, node.js, es6

情景描述:

有一个需求,客户上传文件,向服务里导入数据。客户需要使用我们特定的文件模板上传。模板需要再我们的系统上下载,在使用。

功能描述:

后端服务给我们文件流,我们使用blob对象文件下载到本机。

javascript">base64ToArrayBuffer(base64) {
				let time = this.getDateTime(new Date())
				let name = '文档模板';
				var binaryString = window.atob(base64)
				var len = binaryString.length
				var bytes = new Uint8Array(len)
				for (var i = 0; i < len; i++) {
					bytes[i] = binaryString.charCodeAt(i)
				}
				var _Blob = new Blob([bytes], { type: "application/octet-binary" });
				let link = document.createElement("a");
				let href = window.URL.createObjectURL(_Blob); //创建下载的链接
				link.style.display = "none";
				link.href = href;
				link.download = name + time + '.xlsx'; //下载后文件名
				document.body.appendChild(link);
				link.click(); //点击下载
				document.body.removeChild(link); //下载完成移除元素
				window.URL.revokeObjectURL(href); //释放掉blob对象
			},
			getDateTime(time) {
				let hh = time.getHours();
				let mf = time.getMinutes() < 10 ? '0' + time.getMinutes() : time.getMinutes();
				let ss = time.getSeconds() < 10 ? '0' + time.getSeconds() : time.getSeconds();
				let yy = time.getFullYear();
				let mm = time.getMonth() + 1;
				let dd = time.getDate();
				return yy + '' + mm + '' + dd + '' + hh + '' + mf + '' + ss;
			},
			// 点击下载 触发事件
			downFile(info) {
				// 调用接口
				this.DownLoadFile(info)
			},
			// 接口方法
			DownLoadFile(info) {
				Api.downLoadFile(info).then(data => {
					if (data.status) {
						this.base64ToArrayBuffer(data.value)
					} else {
						this.$Notice.error({ title: '下载失败' });
					}
				})
			}

http://www.niftyadmin.cn/n/1367345.html

相关文章

vue等待几秒后执行,vue循环调用,setInterval()与setTimeout()计时器

上网查&#xff0c;说的五花八门&#xff0c;乱糟的。 setInterval()&#xff1a;他就是每隔多少秒或毫秒调用&#xff08;循环的调用&#xff09;。页面销毁方法也就失效了。 setTimeout()&#xff1a;他就是过了多少秒或毫秒调用&#xff08;调用一次&#xff09;。 // 过5…

vue数据嵌套层数未知情况下,我们怎样渲染,已经解决。

后端返回的数据是树的结构&#xff0c;这个结构嵌套的层数不一定多少层数。 咱们本文章里的内容和element&#xff0c;iview等里面的tree组件一样的。element&#xff0c;iview等里面的tree组件扩展性不好&#xff0c;不如自己写一个。来满足自己需求。 代码难度等级&#xff…

vue txt 文件下载

let json{name:小明&#xff0c;age:24,},let strData JSON.stringify(json);const T_URL window.URL.createObjectURL(new Blob([strData]));const LINK document.createElement(a);LINK.href T_URL;LINK.setAttribute(download, 用户信息);LINK.click();window.URL.revok…

vue 将上传文件改成字节。文件下载方法封装

将文件改成字节 // file是文件&#xff0c;将文件转换成字节upLoadFile(file) {return new Promise((reslove, reject) > {const READ new FileReader();READ.readAsArrayBuffer(file);READ.onloadend (e) > {let fileArray;if (e.target.readyState FileReader.DONE)…

vue 保留2位小数

保留小数&#xff0c;fractionDigits值写2就是保留两位小数。 toFixed(number, fractionDigits) {//number 保留小数数//fractionDigits 保留小数位数var times Math.pow(10, fractionDigits);var roundNum Math.round(number * times) / times;return roundNum.toFixed(fra…

vue js 把阿拉伯数转成汉字

效果图 代码 numTohan: (num) > {// num25 转成 二十五const dicHan [零, 一, 二, 三, 四, 五, 六, 七, 八, 九]const unit [, 十, 百]num parseInt(num)const getWan (temp) > {const strArr temp.toString().split().reverse()let newNum for (var i 0; i < …

vue js 前端实现PDF文件下载的三种方式 解决vue下载pdf文件打开文件后空白

PDF 下载方法一 这个方法是通过调用服务&#xff0c;服务端给前端返回pdf文件流&#xff08;不是字节流&#xff09;。在用blob下载。貌似所有方法都是文件流下载的吧。 // 后端服务地址方法api(id).then(res > {let blob new Blob([res]);let objectUrl URL.createObject…

iview table序号按照总数排序

table 里的columns序号参数配置如下&#xff0c;Page 是当前页&#xff0c;PageSize 每页条数。 {title: #,align: center,width: 60,render: (h, params) > {return h(span, {}, params.index (this.Page - 1) * this.PageSize 1)} }