前端vue中檔案下載的三種方式彙總

2022-02-11 10:01:42

前端vue中檔案下載的三種方式

第一種方式是前端建立超連結，通過a標籤的連結向後端服務發get請求，接收後端的檔案流，非常簡單：

<a :href='"/user/downloadExcel"' >下載模板</a>

另一種情況是建立div標籤，動態建立a標籤：

<div name="downloadfile" onclick="downloadExcel()">下載</div>
function downloadExcel() {
    let a = document.createElement('a')
    a.href ="/user/downloadExcel"
    a.click();
}

還有一種補充：

 function downloadExcel() {
    window.location.href = "/tUserHyRights/downloadUsersUrl";
}

第二種方式通過建立iframe的方式：

<el-button  size="mini" class="filter-item" type="primary" icon="el-icon-download" @click="handleExport(scope.row)">匯出</el-button>
//method方法：
handleExport(row) {
      var elemIF = document.createElement('iframe')
      elemIF.src = 'user/downloadExcel?snapshotTime=' + formatDate(new Date(row.snapshotTime), 'yyyy-MM-dd hh:mm') +
                    '&category=' + row.category 
      elemIF.style.display = 'none'
      document.body.appendChild(elemIF)
    }

第三種方式，會對後端發的post請求，使用blob格式

<el-button  size="mini" class="filter-item" type="primary" icon="el-icon-download" @click="handleExport(scope.row)">匯出</el-button>
//method方法
handleExport(row){
const url="/user/downloadExcel"
const options = {snapshotTime:formatDate(new Date(row.snapshotTime), 'yyyy-MM-dd hh:mm')}
exportExcel(url,options)
}
/**
 * 封裝匯出Excal檔案請求
 * @param url
 * @param data
 * @returns {Promise}
 */
//api.js
export function exportExcel(url, options = {}) {
  return new Promise((resolve, reject) => {
    console.log(`${url} 請求資料，引數=>`, JSON.stringify(options))
    axios.defaults.headers['content-type'] = 'application/json;charset=UTF-8'
    axios({
      method: 'post',
      url: url, // 請求地址
      data: options, // 引數
      responseType: 'blob' // 表明返回伺服器返回的資料型別
    }).then(
      response => {
        resolve(response.data)
        let blob = new Blob([response.data], {
          type: 'application/vnd.ms-excel'
        })
        console.log(blob)
        let fileName = Date.parse(new Date()) + '.xlsx'
        if (window.navigator.msSaveOrOpenBlob) {
          // console.log(2)
          navigator.msSaveBlob(blob, fileName)
        } else {
          // console.log(3)
          var link = document.createElement('a')
          link.href = window.URL.createObjectURL(blob)
          link.download = fileName
          link.click()
          //釋放記憶體
          window.URL.revokeObjectURL(link.href)
        }
      },
      err => {
        reject(err)
      }
    )
  })
}

如果後端提供的下載介面是get型別，可以直接使用方法一和二，簡單又便捷；當然如果想使用方法三也是可以的，不過感覺有點捨近求遠了。

如果後端提供的下載介面是post型別，就必須要用方法三了。

附：vue實現圖片或檔案下載功能範例

要自己建立一個a標籤，以下就是下載功能的實現

這裡是呼叫介面之後如果code=200時進行下載

if (res.code == 200) {
    const link = document.createElement("a"); //自己建立的a標籤
    link.href = res.data;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    window.URL.revokeObjectURL(res.data);
  }

2、還有一種情況是下載單張圖片，如果用上面方法會直接跳轉到了圖片連結，並不會實現下載。下面則是下載單張圖片的方法

getUrlBase64(imgUrl) {
      return new Promise((resolve) => {
        let canvas = document.createElement("canvas");
        let ctx = canvas.getContext("2d");
        let img = new Image(); //允許進行跨域
        img.crossOrigin = "Anonymous";
        img.src = imgUrl;
        img.onload = function() {
          canvas.height = img.height; //圖片的高度
          canvas.width = img.width;//圖片的寬度
          ctx.drawImage(img, 0, 0, img.width, img.height);
          let dataURL = canvas.toDataURL("image/png");
          canvas = null;
          resolve(dataURL);
        };
      });
    },
    //點選下載圖片按鈕的事件
    handleDowondImg(url, name) {
      this.getUrlBase64(url).then((base64) => {
        const link = document.createElement("a");
        link.href = base64;
        link.download = this.$route.query.source;
        link.click();
      });
    },

總結

到此這篇關於前端vue中檔案下載的三種方式的文章就介紹到這了,更多相關vue中檔案下載內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

前端vue中檔案下載的三種方式彙總

目錄

前端vue中檔案下載的三種方式

附：vue實現圖片或檔案下載功能範例

總結

熱門文章