Vue中下载不同文件常用的方式

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地址和下载的文件名，即可实现文件的下载。