js 下载二进制流文件

前言：平时在前端下载文件有两种方式

（1）是后台提供一个下载的http URL，然后用 window.open(URL)

或者创建一个a标签的href属性下载，

（2）后台直接返回文件的base64字符串，然后前端转化成ArrayBuffer，手动下载。

一、目标

前端技术：uniapp

后端：springboot

实现功能：下载pdf转成word的文件

我遇到的问题是，后端可以返回二进制流，但uniapp无法直接接收二进制流，但能接收base64字符串，我可以利用uniapp的 uni.base64ToArrayBuffer(base64) 转成二进制。

const cb = (uploadFileRes)=>{
				const data = uploadFileRes.data; //后台传回来的base64字符串
				const arrayBuffer = uni.base64ToArrayBuffer(data)
				const url = window.URL.createObjectURL(new Blob([arrayBuffer]))
				const link = document.createElement('a')
				link.style.display = 'none'
				link.href = url
				link.setAttribute('download', 'response.pdf')
				document.body.appendChild(link)
				link.click()
				document.body.removeChild(link)
				//成功后，第一，显示文件转换   第二，file数据清空，第三 提示下载成功
				deleteFile();
				uni.hideLoading();
}

涉及到知识点：给a标签设置了download属性后，点击后a标签后就会下载 href 路径下的内容

<a href="/static/convert/pdfIcon.png" download="w3logo">点击下载图片</a>

  //base64转成ArrayBuffer
    const base64ToArrayBuffer = (base64) => {
        var binary_string = window.atob(base64);
        var len = binary_string.length;
        var bytes = new Uint8Array(len);
        for (var i = 0; i < len; i++) {
            bytes[i] = binary_string.charCodeAt(i);
        }
        return bytes.buffer;
    }
    //手动下载
    const download = (data)=>{
        //将文件pdf上传到服务器，返回docx得base64字符串
        const arrayBuffer = base64ToArrayBuffer(data)
        const url = window.URL.createObjectURL(new Blob([arrayBuffer]))
        const link = document.createElement('a')
        link.style.display = 'none'
        link.href = url
        link.download="response.pdf";  //文件名
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
        URL.revokeObjectURL(url) 
    }