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

我可以给你详细讲解一下vue如何根据url下载非同源文件的完整攻略：

1. axios下载文件

通过axios来下载非同源文件是常见的做法。具体操作步骤如下：

引入axios库

首先需要在vue项目中引入axios库。

import axios from 'axios';

下载文件

然后通过axios发起get请求，通过responseType设置返回的数据格式为blob类型，最后将返回的文件保存到本地。

axios({
  method: 'get',
  url: 'http://xxx.xxx.com/uploads/file/xxx.doc',
  responseType: 'blob'
}).then(res => {
  const content = res.data;
  const blob = new Blob([content]);
  const fileName = 'example.doc';
  const href = URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = href;
  link.download = fileName;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  URL.revokeObjectURL(href);
});

其中，设置responseType为blob类型可以直接将后端返回的文件流转化成二进制数据，方便文件本地保存。

最后，通过创建一个a标签，设置其download属性为文件名，将其添加到body中，并模拟用户点击来完成文件下载。

实例演示

<template>
  <div class="file-download">
    <Button @click="downloadFile">Download File</Button>
  </div>
</template>

<script>
import { Button } from 'ant-design-vue';
import axios from 'axios';

export default {
  name: 'FileDownload',
  components: {Button},
  methods: {
    downloadFile() {
      axios({
        method: 'get',
        url: 'http://xxx.xxx.com/uploads/file/xxx.doc',
        responseType: 'blob'
      }).then(res => {
        const content = res.data;
        const blob = new Blob([content]);
        const fileName = 'example.doc';
        const href = URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.href = href;
        link.download = fileName;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        URL.revokeObjectURL(href);
      });
    }
  }
}
</script>

2. fetch下载文件

fetch也是进行文件下载的常见方式。与axios不同的是，通过fetch请求下载文件有一个需要注意的点，就是需要在请求头中添加'Access-Control-Allow-Origin: *'字段，否则可能会出现跨域问题。

具体操作步骤如下：

下载文件

通过fetch发起get请求，设置credentials为'include'，设置headers中的'Access-Control-Allow-Origin'为'*'，通过response类型的blob将响应的数据转换为二进制数据进行本地保存。

fetch('http://xxx.xxx.com/uploads/file/xxx.doc', {
  method: 'get',
  headers: {
    'Access-Control-Allow-Origin': '*'
  },
  credentials: 'include'
}).then(res => {
  res.blob().then(blob => {
    const fileName = 'example.doc';
    const href = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = href;
    link.download = fileName;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(href);
  });
});

实例演示

<template>
  <div class="file-download">
    <Button @click="downloadFile">Download File</Button>
  </div>
</template>

<script>
import { Button } from 'ant-design-vue';

export default {
  name: 'FileDownload',
  components: {Button},
  methods: {
    downloadFile() {
      fetch('http://xxx.xxx.com/uploads/file/xxx.doc', {
        method: 'get',
        headers: {
          'Access-Control-Allow-Origin': '*'
        },
        credentials: 'include'
      }).then(res => {
        res.blob().then(blob => {
          const fileName = 'example.doc';
          const href = URL.createObjectURL(blob);
          const link = document.createElement('a');
          link.href = href;
          link.download = fileName;
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
          URL.revokeObjectURL(href);
        });
      });
    }
  }
}
</script>

以上是vue如何根据url下载非同源文件的两种方法，你可以根据实际情况选择其中一种适合自己的方法来进行文件下载。