1. 使用window.open方法下载文件
<template><div><button @click="downloadFile('filel.pdf')">下载文件1</button><button @click="downloadFile('file2.jpg')">下载文件2</button></div>
</template>
<script>export default {methods: {downloadFile(fileName) {const fileUrl = '/path/to/'+ fileName; // 文件的URL地址window.open(fileUrl);}}};
</script>
在上面的示例中,我们使用了window.open
方法来打开一个新窗口,并直接访问文件的URL地址,从而触发文件下载。
2. 使用<a>标签进行文件下载
<template><div><button @click="downloadFile('filel.pdf')">下载文件1</button><button @click="downloadFile('file2.jpg')">下载文件2</button></div>
</template>
<script>export default {methods: {downloadFile(fileName) {const fileUrl = '/path/to/'+ fileName; // 文件的URL地址const link = document.createElement('a');link.href =fileUrl;link.setAttribute('download', fileName);link.click();}}};
</script>
在上面的示例中,我们首先创建一个<a>
标签,然后设置其href
属性为文件的URL地址,download
属性为要下载的文件名。最后,通过调用click()
方法触发链接的点击事件,实现文件的下载。
3. 使用Vue的$download方法下载文件
<template><div><button @click="downloadFile('filel.pdf')">下载文件1</button><button @click="downloadFile('file2.jpg')">下载文件2</button></div>
</template>
<script>export default {methods: {downloadFile(fileName) {const fileUrl = '/path/to/'+ fileName; // 文件的URL地址this.$download(fileUrl, fileName);}}};
</script>
在这个示例中,我们直接调用Vue实例的$download
方法,并传入文件的URL地址和下载的文件名,即可实现文件的下载。