vue前端实现下载文件功能

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 :href="fileUrl" rel="external nofollow"  download="filename">下载文件</a>

export default {
  data() {
    return {
      fileUrl: '/path/to/file.pdf',
    };
  },
};

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

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

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();
  });
},

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();
      });
    },
  },
};