当前位置:首页 » 《关于电脑》 » 正文

vue前端实现下载文件功能

29 人参与  2024年10月04日 15:20  分类 : 《关于电脑》  评论

点击全文阅读


首先介绍一下我使用a标签方法碰到的错误:

点击下载后一直显示无法下载,更换浏览器也不行,后来找到了错误所在。

错误原因就是我把路径写在与我存图片的路径目录下面了 src/assets/...  ,这样是不对的,应该把你需要下载的文件放在跟src同级的目录下或者放在publice目录里面,就是与你的网页图标文件favicon.ico以及index.html  这两个文件同级就好了,由于 public 目录下的文件可以直接通过 URL 访问,您可以简单地指定该文件的 URL,例如:
 

loadFile() {  let url = '/upload_template.csv'; // public 目录下的文件的 URL  let link = document.createElement('a'); // 创建一个 <a> 元素  link.href = url; // 设置链接的 href 属性为文件的 URL  link.download = 'upload_template.csv'; // 设置下载的文件名  link.style.display = 'none'; // 隐藏链接  document.body.appendChild(link); // 将链接添加到文档中  link.click(); // 模拟点击链接以触发下载  document.body.removeChild(link); // 下载完成后移除链接}

第一种:

使用<a>标签下载文件:你可以在Vue组件中使用<a>标签创建一个链接,设置href属性为文件的URL,然后使用download属性指定文件名。这样点击链接时会触发文件下载。

代码如下:

<a :href="fileUrl" download="filename">下载文件</a>
export default {  data() {    return {      fileUrl: '/path/to/file.pdf',    };  },};

第二种:

通过window.open()下载文件:可以通过打开一个新窗口来实现文件下载。

window.open就是打开了一个新网页直接在新网页访问文件地址了,只要访问文件地址,就能下载文件。这时候后端返回的是文件流直接渲染,不需要url再打开下载了

downloadFile() {  window.open('/path/to/file.pdf', '_blank');},

第三种:

通过创建iframe下载文件:创建一个隐藏的iframe,并设置其src属性为文件的URL,这样文件将会在iframe中加载并自动下载。

downloadFile() {  const iframe = document.createElement('iframe');  iframe.style.display = 'none';  iframe.src = '/path/to/file.pdf';  document.body.appendChild(iframe);},

第四种:

通过向后端发送POST请求获取文件流并使用Blob格式处理文件下载:在这种方法中,前端向后端发送POST请求,后端返回文件流,前端通过Blob对象处理并下载文件。

downloadFile() {  axios({    url: '/download',    method: 'POST',    responseType: 'blob',    data: {      // 可以根据需要传递参数    },  }).then((response) => {    const url = window.URL.createObjectURL(new Blob([response.data]));    const link = document.createElement('a');    link.href = url;    link.setAttribute('download', 'filename.pdf');    document.body.appendChild(link);    link.click();  });},

如果后端提供的下载接口是get类型,可以直接使用方法一和二和三,简单又便捷;当然如果想使用方法四也是可以的,不过感觉有点舍近求远了。

如果后端提供的下载接口是post类型,就必须要用方法四了。

第五种:

通过Ajax请求下载文件:使用Vue的HTTP库(如axios)发送GET请求来获取文件数据,然后使用Blob对象创建一个URL,并将其赋给一个隐藏的<a>标签,最后模拟点击这个链接来下载文件。

import axios from 'axios';export default {  methods: {    downloadFile() {      axios({        url: '/path/to/file.pdf',        method: 'GET',        responseType: 'blob',      }).then((response) => {        const url = window.URL.createObjectURL(new Blob([response.data]));        const link = document.createElement('a');        link.href = url;        link.setAttribute('download', 'filename.pdf');        document.body.appendChild(link);        link.click();      });    },  },};


点击全文阅读


本文链接:http://zhangshiyu.com/post/167692.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

关于我们 | 我要投稿 | 免责申明

Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1