欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue如何根據(jù)url下載非同源文件

 更新時間:2021年06月29日 10:47:03   作者:大齡女程序員的逆襲之路  
我們在開發(fā)過程中,有時會遇到后端返回的文件地址和我們的網(wǎng)站不是同源的情況下,本文就介紹了vue如何根據(jù)url下載非同源文件,感興趣的可以了解一下

一般情況下,我們根據(jù)url下載文件時可以有以下兩種方案:

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

但是我們在開發(fā)過程中,有時會遇到后端返回的文件地址和我們的網(wǎng)站不是同源的情況下,使用以上兩種方案下載圖片、pdf等文件,瀏覽器會直接打開,而不是下載。下面這種方法就可以解決此類情況:
下載文件函數(shù)封裝:(views/util/index.js)

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:'美景圖'
      }
    };
  },
  created() {},
  mounted() {},
  methods: {
    downloadFile
  }
};
</script>

<style lang="scss" scoped>

</style>

PS:vue內(nèi)點擊url下載文件最佳解決方案

開發(fā)中經(jīng)常遇到這樣的功能,用戶將文件或附件上傳到服務(wù)器,后端將文件放到ftp或是其他位置,在前端頁面內(nèi)有下載的入口,有時候,后端返回的是blob,這種情況當然是最好的,但是為了方便,后端也可能返回文件所在位置的url,這時,對前端來說,可能遇到一些問題,比如,下載文件時候瀏覽器可能會出現(xiàn)閃動,下載圖片,json文件等瀏覽器支持的文件時候,不會下載,而是直接在瀏覽器內(nèi)打開這類文件,下面的方法可以完美解決此類問題

解決方案:

  • 封裝自定義指令
  • 將url轉(zhuǎn)成bold,在創(chuàng)建a標簽下載blob

代碼實現(xiàn)

  • 在src 下面的 directive 文件夾下新建目錄 down-load-url
  • down-load-url / index.js文件
/*
 * 后端返回文件的url,前端創(chuàng)建a標簽來下載
 *
 *  1. 解決了若文件為圖片或瀏覽器支持的格式類型,點擊下載會直接打開文件的問題,
 *  2. 下載文件時,瀏覽器會有閃動的問題
 *
 *  頁面內(nèi)使用
 *  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轉(zhuǎn)成blob地址,
      fetch(url).then(res => res.blob()).then(blob => { // 將鏈接地址字符內(nèi)容轉(zhuǎn)變成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()
      })
    })
  }
}

到此這篇關(guān)于vue如何根據(jù)url下載非同源文件的文章就介紹到這了,更多相關(guān)vue url下載文件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • Vue內(nèi)容分發(fā)slot(全面解析)

    Vue內(nèi)容分發(fā)slot(全面解析)

    下面小編就為大家?guī)硪黄猇ue內(nèi)容分發(fā)slot(全面解析)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-08-08
  • Vue?+?SpringBoot?實現(xiàn)文件的斷點上傳、秒傳存儲到Minio的操作方法

    Vue?+?SpringBoot?實現(xiàn)文件的斷點上傳、秒傳存儲到Minio的操作方法

    這篇文章主要介紹了Vue?+?SpringBoot?實現(xiàn)文件的斷點上傳、秒傳存儲到Minio的操作方法,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧
    2024-06-06
  • Vue 刷新當前路由的實現(xiàn)代碼

    Vue 刷新當前路由的實現(xiàn)代碼

    這篇文章主要介紹了Vue 刷新當前路由的實現(xiàn)代碼,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-09-09
  • Vue實現(xiàn)Excel本地下載及上傳的方法詳解

    Vue實現(xiàn)Excel本地下載及上傳的方法詳解

    相信大家在項目中經(jīng)常會遇到一些上傳下載文件的相關(guān)功能。這篇文章將為大家介紹一下Vue實現(xiàn)Excel本地下載及上傳的示例代碼,需要的可以參考一下
    2022-07-07
  • Vue.js的動態(tài)組件模板的實現(xiàn)

    Vue.js的動態(tài)組件模板的實現(xiàn)

    這篇文章主要介紹了Vue.js的動態(tài)組件模板的實現(xiàn),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-11-11
  • TypeScript基本類型 typeof 和keyof案例詳解

    TypeScript基本類型 typeof 和keyof案例詳解

    這篇文章主要介紹了TypeScript基本類型 typeof 和keyof案例詳解,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-10-10
  • vuejs 制作背景淡入淡出切換動畫的實例

    vuejs 制作背景淡入淡出切換動畫的實例

    今天小編就為大家分享一篇vuejs 制作背景淡入淡出切換動畫的實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • 如何搭建一個完整的Vue3.0+ts的項目步驟

    如何搭建一個完整的Vue3.0+ts的項目步驟

    這篇文章主要介紹了如何搭建一個完整的Vue3.0+ts的項目步驟,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2020-10-10
  • 詳解VUE 定義全局變量的幾種實現(xiàn)方式

    詳解VUE 定義全局變量的幾種實現(xiàn)方式

    本篇文章主要介紹了VUE 全局變量的幾種實現(xiàn)方式,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-06-06
  • wepy--用vantUI 實現(xiàn)上彈列表并選擇相應(yīng)的值操作

    wepy--用vantUI 實現(xiàn)上彈列表并選擇相應(yīng)的值操作

    這篇文章主要介紹了wepy--用vantUI 實現(xiàn)上彈列表并選擇相應(yīng)的值操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-11-11

最新評論