太仓网站优化,网站导航怎么做的,wordpress仿阿里百秀,中国公司100强排名大家都知道前端的下载除了最简单的a标签href#xff0c;还有时候需要验证token#xff0c;此时后台会给一个返回二进制的下载接口。如果你用ajax普通的get#xff0c;post请求#xff0c;接口会返回乱码。那么本文就带你封装一个处理二进制下载的方法。 1.设置responseTyp…大家都知道前端的下载除了最简单的a标签href还有时候需要验证token此时后台会给一个返回二进制的下载接口。如果你用ajax普通的getpost请求接口会返回乱码。那么本文就带你封装一个处理二进制下载的方法。 1.设置responseType为arraybuffer 这是正确获取二进制的关键否则会被当成json文本来解析。 const response await axios({method,url,data,responseType: arraybuffer,headers, });2.判断是否下载成功  只有下载成功的时候返回的才是arraybuffer否则是包含错误信息的json因此在这里我们通过响应头的contentType来判断。 if (contentType?.includes(application/json)) {// 响应的是json则提示错误信息const res JSON.parse(new TextDecoder(utf-8).decode(new Uint8Array(response.data)));if (res.code ! 200) {ElMessage({message: res.msg,type: error,duration: 5 * 1000});return;} }3.获取blobUrl  // blobType可以是空对象或指定的excel等MIME类型 const data new Blob([response.data], blobType); const src window.URL.createObjectURL(data); 4.下载文件  传入获取到的blobUrl可以用第三方库file-saver下载也可以用a标签的download属性。file-saver对各浏览器做了blob等兼容处理。 import { saveAs } from file-saver;// 第一种 使用第三方库 file-saver saveAs(src, filename); // 第二种 a标签 function aTagDownload(src, filename) {const link document.createElement(a);link.href src;link.setAttribute(download, filename);document.body.appendChild(link);link.click();document.body.removeChild(link);window.URL.revokeObjectURL(src); } 完整代码 /*** 下载二进制文件* param {string} method 必填 请求方式* param {string} url 必填 下载 url* param {object} data post 请求的 data默认为空对象* param {object} headers 请求的 headers* param {string} [filename下载.zip] 保存的文件名* param {boolean} isDownload 是否直接下载* param {object} blobType 指定 blob MIME 类型默认为空对象* returns {string} blobUrl*/ export async function getBufferFile(method get,url,data {},headers,filename 下载.zip,isDownload true,blobType {}, ) {headers {...headers,Authorization: localStorage.getItem(token),};ElMessage.success(已开始下载);try {const response await axios({method,url,data,responseType: arraybuffer,headers,});const contentType response.headers[content-type];// 根据响应头的contentType判断是否下载成功if (contentType?.includes(application/json)) {// 响应的是json则提示错误信息const res JSON.parse(new TextDecoder(utf-8).decode(new Uint8Array(response.data)));if (res.code ! 200) {ElMessage({message: res.msg,type: error,duration: 5 * 1000});return;}} else {const data new Blob([response.data], blobType);const src window.URL.createObjectURL(data);// 从响应头获取文件名if (response.headers[content-disposition]) {filename decodeURI(response.headers[content-disposition].split(filename)[1]);}if (isDownload) {saveAs(src, filename); // 使用第三方库 file-saver}return src;}} catch (error) {console.error(下载文件失败, error);ElMessage.error(下载文件失败);} }