vue如何根据url下载非同源文件

269 阅读 0 评论 178 点赞

我是靠谱客的博主正直铅笔，最近开发中收集的这篇文章主要介绍vue如何根据url下载非同源文件，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

一般情况下，我们根据url下载文件时可以有以下两种方案：

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

但是我们在开发过程中，有时会遇到后端返回的文件地址和我们的网站不是同源的情况下，使用以上两种方案下载图片、pdf等文件，浏览器会直接打开，而不是下载。下面这种方法就可以解决此类情况：
下载文件函数封装：（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内点击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(blob => { // 将链接地址字符内容转变成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下载文件内容请搜索靠谱客以前的文章或继续浏览下面的相关文章希望大家以后多多支持靠谱客！