一.下载文件(流)
1.安装js-file-download

npm install js-file-download --save

2.在页面引入

import fileDownload from "js-file-download";

3.调用导出接口

exportTextResult() {
      exportTextResult({ id: this.aid }).then(res => {
        fileDownload(res.data, `${this.fileName}.docx`);
      });
    },

4.文件格式出现问题(在api)

export const exportTextResult = params => {
    return request({
        method: 'GET',
        url: '/xxx/xxx',
        responseType: 'blob',   //重点要添加
        //    Body 参数使用data设置
        //    Query 参数使用哦个params 设置
        //    Headers 参数使用headers设置
        params
    })
}

二.下载视频音频

//template
<div class="img_download">
  <div class="down" @click="download(item.url, item.title)"></div>
</div>

methods:{
/*视频下载不经过blob*/
 download(e, f) {
      // 使用获取到的blob对象创建的url
          const a = document.createElement("a");
          document.body.appendChild(a);
          a.style.display = "none";
          a.href = e;
          // 指定下载的文件名
          a.download = `${f}`;
          a.click();
    },

/*视频下载*/
    download(e) {
      // 使用获取到的blob对象创建的url
      const filePath = this.url // 视频的地址
      fetch(filePath).then(res => res.blob()).then(blob => {
        const a = document.createElement('a')
        document.body.appendChild(a)
        a.style.display = 'none'
        // 使用获取到的blob对象创建的url
        const url = window.URL.createObjectURL(blob)
        a.href = url
        // 指定下载的文件名
        a.download = ''
        a.click()
        document.body.removeChild(a)
        // 移除blob对象的url
        window.URL.revokeObjectURL(url)
      })
    },
}
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐