vue下载后端提供的文件/播放音频文件

下载文件

doc

接口js文件里加一行这个responseType: 'arraybuffer',

js文件

javascript 复制代码
export function (data) {
  return request({
    url: "XXX",
    method: "post",
    data: data,
    baseURL: " ",
    responseType: 'arraybuffer',
  });
}

vue文件

javascript 复制代码
const time={
    "datetime_start": start1.value,
    "datetime_end": end1.value,
  }
  ( time ).then((response) => {
    const data = response.data;
    let blob = new Blob([response], {type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=UTF-8'});
    let objectUrl = window.URL.createObjectURL(blob) // 创建URL
    const a=document.createElement('a');
    a.style.display='none';
    a.href=objectUrl;
    a.download='报告.docx';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    objectUrl.revokeObjectURL(objectUrl); // 释放内存

});

播放音频

js文件

javascript 复制代码
export function XXX(data) {
  return request({
    url: "XXX",
    method: "post",
    data: data,
    baseURL: " ",
    responseType: 'blob',
  });
}

vue文件

javascript 复制代码
 const time = {
    audio_type: "2",
  };
  XXX(time).then((res) => {
   const blob = new Blob([res], { type: 'audio/wav' });
   const localUrl = (window.URL || webkitURL).createObjectURL(blob);
   const audio = document.createElement('audio');
   audio.style.display = 'none'; // 防止影响页面布局
   audio.controls = true;
   document.body.appendChild(audio);
   audio.src = localUrl;
   audio.playbackRate = 1.3; // 语速
   audio.play();
   
    // 语音播放完毕后,需要手动释放内存
    audio.onended = function () {
      document.body.removeChild(audio);
      URL.revokeObjectURL(localUrl);
    };

})
相关推荐
用户2181697049309 小时前
Flutter(四)Dart语法 空安全 运算符 流程控制
前端
许彰午9 小时前
政务督办的分合模式:主办协办的并发审批
前端·javascript·政务
用户69371750013849 小时前
AI时代,程序员该往哪走?
前端·后端
陳陈陳9 小时前
🚀 前端流式输出革命:SSE + BFF 架构从零到一实战指南
vue.js·架构·node.js
ttwuai9 小时前
GoFrame 后台日志清空失败:无 WHERE 删除为什么被拦住
前端·golang
易筋紫容9 小时前
创建型模式:对象的诞生艺术
开发语言·前端·javascript
半句唐诗9 小时前
我是如何通过 Access Token 成功发布第一个 npm 包的
前端·npm·node.js
程序员黑豆10 小时前
鸿蒙应用开发:@Provider 与 @Consumer 跨组件双向同步详解
前端·harmonyos
paopaokaka_luck10 小时前
基于springboot3+vue3的智能文库平台(AI智能搜索、AI智能汇总、实时在线状态展示、多格式文档预览与富文本编辑、Echarts图形化分析)
前端·网络·spring boot·网络协议·echarts
牧艺10 小时前
cos-design PhotoAlbum:用 CSS 3D 做一个「能翻页」的实体相册
前端·css·交互设计