vue2 点击跳转到某个文件，供用户下载（3种方法）

查看本专栏目录

Vue2面试题及答案（150道）

文章序号	vue2面试题150道
1	vue2 面试题及详细答案（01 - 20）
2	vue2 面试题及详细答案（21 - 40）
3	vue2 面试题及详细答案（41 - 60）
4	vue2 面试题及详细答案（61 - 70）
5	vue2 面试题及详细答案（71 - 80）
6	vue2 面试题及详细答案（81 - 90）
7	vue2 面试题及详细答案（91 - 100）
8	vue2 面试题及详细答案（101 - 120）
9	vue2 面试题及详细答案（121 - 130）
10	vue2 面试题及详细答案（131 - 140）
11	vue2 面试题及详细答案（141 - 150）

在 Vue 2 中，如果你想实现点击某个按钮或者链接后，触发文件下载（例如 PDF、图片或者其他类型的文件），你可以通过几种不同的方式来实现。这里提供一种常见且简单的方法：使用 JavaScript 的 window.location.href 或者创建一个隐藏的 <a> 标签并触发其点击事件来下载文件。

方法一：直接使用 window.location.href

如果服务器端已经设置好了一个可以直接访问的文件下载链接，你可以直接将这个链接赋值给 window.location.href 来触发下载。

<template>
  <button @click="downloadFile">点击下载文件</button>
</template>

<script>
export default {
  methods: {
    downloadFile() {
      const fileUrl = 'https://example.com/path/to/your/file.pdf'; // 文件URL
      window.location.href = fileUrl;
    }
  }
}
</script>

方法二：动态创建 <a> 标签

这种方法更适合于需要处理不同类型的响应，比如文件流的情况。你也可以用它来下载来自 API 的文件。

<template>
  <button @click="downloadFile">点击下载文件</button>
</template>

<script>
export default {
  methods: {
    downloadFile() {
      const link = document.createElement('a');
      link.href = 'https://example.com/path/to/your/file.pdf'; // 文件URL
      link.download = 'filename.pdf'; // 下载文件时指定的名字
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link); // 下载完成后移除元素
    }
  }
}
</script>

方法三： API获取文件

			exportAOIs(id) {
				axios({
						url: this.$api.aoiExport+'?ids='+id,
						method: "get",
						responseType: "blob",
						// headers: {
						// 	'content-type': 'application/json'
						// },
						data: {}
					})
					.then((res) => {
						// console.log(res)
						if (res.headers.hasOwnProperty('content-disposition')) {
								let filename = res.headers['content-disposition'].split('=')[1];
								var blob = new Blob([res.data]);
								var downloadElement = document.createElement("a");
								var href = window.URL.createObjectURL(blob); //创建下载的链接
								downloadElement.href = href;
								downloadElement.download = filename; //下载后文件名
								document.body.appendChild(downloadElement);
								downloadElement.click(); //点击下载
								this.$message({
									type: "success",
									message: this.$i18n.t('common.exportOK'),
								});
								document.body.removeChild(downloadElement); //下载完成移除元素
								window.URL.revokeObjectURL(href); //释放掉blob对象
								this.isBatchOff=true;
						}else{
							this.$message({
								type: "error",
								message:this.$i18n.t('aoi.delerror')
							})
						}

					})
			},

注意事项

• 跨域问题：如果你尝试从外部资源下载文件，请确保该资源支持跨域请求(CORS)，否则会遇到安全限制。
• 文件名：对于方法二，可以通过设置 link.download 属性来指定下载文件的名字。注意，并不是所有的浏览器都支持这个属性（例如某些移动浏览器）。
• API获取文件：如果文件是通过调用API接口获得的，你可能需要先进行网络请求（如使用 axios 或者 fetch），然后将返回的数据转换为 Blob 对象，并生成本地 URL 来供用户下载。

以上就是在 Vue 2 中实现点击跳转到某个文件供用户下载的基本方法。根据你的具体需求和场景选择合适的方法。