Vue中點擊直接下載mp3,不直接打開新頁面


import axios from 'axios'
funcDown(src, filename) {
  if(!src) {
    return
  }  
  let fileName = filename || '' // 文件名
  axios({
    method: 'get',
    url: src,
    responseType: 'blob',
    headers: { 'content-type': 'audio/mpeg' },
  }) .then((res) => {
    let blobType = 'application/force-download' // 設置blob請求頭
    let blob = new Blob([res.data], { type: res.data.type }) // 創建blob 設置blob文件類型 data 設置為后端返回的文件(例如mp3,jpeg) type:這里設置后端返回的類型 為 mp3
    let downa = document.createElement('a') // 創建A標簽
    let href = window.URL.createObjectURL(blob) // 創建下載的鏈接
    downa.href = href // 下載地址
    downa.download = fileName // 下載文件名
    document.body.appendChild(downa)
    downa.click() // 模擬點擊A標簽
    document.body.removeChild(downa) // 下載完成移除元素
    window.URL.revokeObjectURL(href) // 釋放blob對象
  }) .catch(function (error) {
    console.log(error)
  })
}
# 需要服務端開啟允許跨域相關設置 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM