当前位置：首页 > VUE

vue实现点击下载

2026-03-28 07:41:57VUE

实现点击下载的基本方法

在Vue中实现点击下载功能，可以通过以下几种方式完成：

使用<a>标签的download属性

<template>
  <a href="/path/to/file.pdf" download>点击下载文件</a>
</template>

动态生成下载链接

methods: {
  downloadFile() {
    const link = document.createElement('a');
    link.href = '/path/to/file.pdf';
    link.download = 'filename.pdf';
    link.click();
  }
}

下载后端返回的文件流

当需要下载后端API返回的文件流时，可以使用以下方法：

使用axios处理Blob数据

axios.get('/api/download', {
  responseType: 'blob'
}).then(response => {
  const url = window.URL.createObjectURL(new Blob([response.data]));
  const link = document.createElement('a');
  link.href = url;
  link.setAttribute('download', 'file.pdf');
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
});

处理大文件下载

对于大文件下载，可以显示进度条：

带进度提示的下载

axios.get('/api/large-file', {
  responseType: 'blob',
  onDownloadProgress: progressEvent => {
    const percentCompleted = Math.round(
      (progressEvent.loaded * 100) / progressEvent.total
    );
    console.log(percentCompleted);
  }
}).then(response => {
  // 处理下载逻辑
});

下载Canvas内容

如果需要下载Canvas绘制的内容：

Canvas转图片下载

vue实现点击下载

const canvas = document.getElementById('myCanvas');
const dataURL = canvas.toDataURL('image/png');
const link = document.createElement('a');
link.download = 'canvas-image.png';
link.href = dataURL;
link.click();