一般情況下，我們根據url下載檔案時可以有以下兩種方案：

1. window.open(url)
2. <a :href="url" rel="external nofollow" download="檔名稱"/>

但是我們在開發過程中，有時會遇到後端返回的檔案地址和我們的不是同源的情況下，使用以上兩種方案下載圖片、pdf等檔案，瀏覽器會直接開啟，而不是下載。下面這種方法就可以解決此類情況：
下載檔案函式封裝：（views/util/index.）

import axios from "axios";
// 下載檔案（可解決跨域下載問題）
export async function downloadFile(fileUrl,fileName) {
  if (!fileUrl) return;
  let res = await axios({
    method: "get",url: fileUrl,responseType: "blob"
  });
  let newUrl = window.URL.createObjectURL(res.data);
  let a = document.createElement("a");
  a.href = newUrl;
  a.download = fileName;
  a.click();
  a.remove();
  //在資源下載完成後 可以人工清除createObjectURL 佔用的快取資源
  window.URL.revokeObjectURL(newUrl);
}

使用

<template>
  <div>
      {{file.name}}
      <span
        class="file-download"
        @click="downloadFile(file.url,file.name)"
        >下載</span
      >
  </div>
</template>

<script>
import { downloadFile } from "@/util/index.js";
export default {
  components: {},data() {
    return {
      file:{
          url:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb.zol-img.com.cn%2Fdesk%2Fbizhi%2Fimage%2F6%2F960x600%2F1426818724752.jpg&refer=http%3A%2F%2Fb.zol-img.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627377638&t=662034e86ff9110854ca0316485e294b',name:'美景圖'wjIIdZTkP
 

      }
    };
  },created() {},mounted() {},methods: {
    downloadFile
  }
};
</script>

<style lang="s" scoped>

</style>

PS：內點選url下載檔案最佳解決方案

開發中經常遇到這樣的功能,使用者將檔案或附件上傳到伺服器,後端將檔案放到ftp或是其他位置,在前端頁面內有下載的入口,有時候,後端返回的是blob,這種情況當然是最好的,但是為了方便,後端也可能返回檔案所在位置的url,這時,對前端來說,可能遇到一些問題,比如,下載檔案時候瀏覽器可能會出現閃動,下載圖片,json檔案等瀏覽器支援的檔案時候,不會下載,而是直接在瀏覽器內開啟這類檔案,下面的方法可以完美解決此類問題

解決方案:

• 封裝自定義指令
• 將url轉成bold,在建立a標籤下載blob

程式碼實現

• 在src 下面的 directive 資料夾下新建目錄 down-load-url
• down-load-url / index.js檔案

/*
 * 後端返回檔案的url,前端建立a標籤來下載
 *
 *  1. 解決了若檔案為圖片或瀏覽器支援的格式型別,點選下載會直接開啟檔案的問題,*  2. 下載檔案時,瀏覽器會有閃動的問題
 *
 *  頁面內使用
 *  1. 引入指令 import downLoad from '@/directive/down-load-url'
 *  2. 註冊指令 directives:{downLoad}
 *  3. 使用,在要下載按鈕上以指令的形式客棧使用 例如: <el-button v-downLoad="url">下載</el-button>
 */

import downLoad from './downLoad'

const install = function(Vue) {
  Vue.directive('downLoadUrl',downLoad)
}

downLoad.install = install

export default downLoad
down-load-url / downLoad.js檔案
export default {
  bind(el,binding) {
    el.addEventListener('click',() => {
      console.log(binding.value) // url
      const a = document.createElement('a')
      //   let url = baseUrl + binding.value // 若是不完整的url則需要拼接baseURL
      const url = binding.value // 完整的url則直接使用
      // 這裡是將url轉成blob地址，
      fetch(url).then(res => res.blob()).then(blwww.cppcns.comob => { // 將連結地址字元內容轉變成blob地址
        a.href = URL.createObjectURL(blob)
        console.log(a.href)
        a.download = '' // 下載檔案的名字
        // a.download = url.split('/')[url.split('/').length -1] //  // 下載檔案的名字
        document.body.appendChild(a)
        a.click()
      })
    })
  }
}

到此這篇關於vue如何根據url下載非同原始檔的文章就介紹到這了,更多相關vue url下載檔案內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！