目录

后端返回文件地址,下载txt,pdf等类型文件

目录

后端返回文件地址,下载txt,pdf等类型文件

<p
              v-for="item in list"
              :key="item.id"
              @click="down(item)"
            >
              {{ item.file_name }}
            </p>

list为文件列表,通过接口获得文件地址

const down= (item) => {
  const x = new XMLHttpRequest();
  x.open("GET", url, true); //url为文件地址 (请求地址 + item.file_url)
  x.responseType = "blob";
  x.onload = () => {
    const url = URL.createObjectURL(x.response);
    const a = document.createElement("a");
    a.href = url;
    a.download = item.file_name;
    a.target = "_blank";
    a.click();
  };
  x.send();
};

点击之后可能会显示跨域问题

https://i-blog.csdnimg.cn/blog_migrate/a35a1e837f797156ac8ea97825856f3e.png

前端解决有些麻烦,后端配置一下跨域

最后请求netWork显示有

https://i-blog.csdnimg.cn/blog_migrate/ff50072e2cf85fba13a92e72b4785287.png

txt文件和PDF文件类型的就也可以直接被下载,不会跳转打开预览