前端使用js-file-download下载文件和下载视频音频

一.下载文件(流)
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)
      })
    },
}
  • 3
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值