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);
    };

})
相关推荐
代码AI弗森2 分钟前
前端周刊第 467 期[特殊字符] 本期精选目录
前端
随便的名字2 分钟前
前端路由的底层逻辑:URL 中 # 和 ? 的区别与关系详解
前端
kongba0074 分钟前
ttyd Web终端安装指南(OpenCloudOS 9)
linux·前端
zhoumeina995 分钟前
前端串行合成流程 + 每张图上传接口
前端·状态模式
风骏时光牛马6 分钟前
Swift 基于MVVM架构实现完整列表数据展示与交互功能实战案例
前端
就叫_这个吧15 分钟前
JavaScript基础数据类型、运算符、数组、函数的定义及DOM方式应用
开发语言·前端·javascript
作业逆流成河22 分钟前
别再一次性重构枚举了:如何把一个真实后台项目的状态字典,渐进式迁移到enum-plus?
前端·javascript·开源
暗不需求22 分钟前
React 性能优化秘籍:深入理解 `useMemo` 与 `useCallback`
前端·react.js·面试
专注VB编程开发20年29 分钟前
我制作excel工作簿的选项卡,发给deep seek, 昨天修改了一天
前端·vue.js·excel
light blue bird34 分钟前
工序路径主子表单工序组装图表组件
前端·数据库·信息可视化·.net·web端·razor page