Vue base64 附件点击下载

 使用 

第一个参数为 base64数据,

第二个参数为文件的名称

第三个参数为文件类型

第四格参数为文件mimeType ,用getFileType进行获取对应的值


// * desc: base64转文件并下载
		 // * @param base64 {String} : base64数据
		 // * @param fileType {String} : 要导出的文件类型png,pdf,doc,mp3等
		// * @param fileName {String} : 文件名
downloadFile(base64, fileName, fileType,mimetype) {
				const typeHeader = 'data:application/' + fileType + ';base64,' // 定义base64 头部文件类型

				const blob = this.base64ToBlob(base64, mimetype) // 转成blob对象
				this.downloadExportFile(blob, fileName, fileType) // 下载文件
			},
			downloadExportFile(blob, fileName, fileType) {
				const downloadElement = document.createElement('a')
				let href = blob
				if (typeof blob === 'string') {
					downloadElement.target = '_blank'
				} else {
					href = window.URL.createObjectURL(blob) // 创建下载的链接
				}
				downloadElement.href = href
				downloadElement.download = fileName + '.' + fileType // 下载后文件名
				document.body.appendChild(downloadElement)
				downloadElement.click() // 触发点击下载
				document.body.removeChild(downloadElement) // 下载完成移除元素
				if (typeof blob !== 'string') {
					window.URL.revokeObjectURL(href) // 释放掉blob对象
				}
			},
			//将base64转换为blob
			base64ToBlob(base64,mime) {
				// var str = "Hello World!";
				// var enc = window.btoa(str);
				// var dec = window.atob(enc);
				// 	bstr = window.atobatob(base64),
				// 	n = bstr.length,
				// 	u8arr = new Uint8Array(n);
				// while (n--) {
				// 	u8arr[n] = bstr.charCodeAt(n);
				// }
				// return new Blob([u8arr], { type: mime });
				let raw = window.atob(base64) // 解码base64得到二进制字符串
				let rawLength = raw.length
				let uInt8Array = new Uint8Array(rawLength) // 创建8位无符号整数值的类型化数组
				for (let i = 0; i < rawLength; ++i) {
					uInt8Array[i] = raw.charCodeAt(i) // 数组接收二进制字符串
				}
				return new Blob([uInt8Array], {type: mime})

			},
      getfileType(type) {
        switch (type) {
        case 'txt': return 'text/plain';
        case 'doc': return 'application/msword';
        case 'docx': return 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';
        case 'xls': return 'application/vnd.ms-excel';
        case 'xlsx': return 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
        case 'pdf': return 'application/pdf';
        case 'pptx': return 'application/vnd.openxmlformats-officedocument.presentationml.presentation';
        case 'ppt': return 'application/vnd.ms-powerpoint';
        case 'png': return 'image/png';
        case 'jpg': return 'image/jpeg';
        case 'gif': return 'image/gif';
        case 'svg': return 'image/svg+xml';
        case 'ico': return 'image/x-icon';
        case 'bmp': return 'image/bmp,';
        }
      }

你可能感兴趣的:(vue.js,javascript,前端)