文件下载有多种方式可以实现。下面是其中几种常见的方式：
1.使用<a>标签的download属性
<template>
<a :href="fileUrl" download>点击下载文件</a>
</template>
<script>
export default {
data() {
return {
fileUrl: 'http://example.com/file.pdf'
};
}
};
</script>
2. 使用window.open()方法
这种方式会在新窗口中打开文件，并触发浏览器的下载行为。
<template>
<button @click="downloadFile">点击下载文件</button>
</template>
<script>
export default {
methods: {
downloadFile() {
window.open(this.fileUrl, '_blank');
}
},
data() {
return {
fileUrl: 'http://example.com/file.pdf'
};
}
};
</script>
3. 使用XMLHttpRequest对象
这种方式会通过 AJAX 请求获取文件内容，并将其转换为 Blob 对象，然后创建一个临时的 URL，并通过创建一个 <a> 标签来触发下载。
<template>
<button @click="downloadFile">点击下载文件</button>
</template>
<script>
export default {
methods: {
downloadFile() {
const xhr = new XMLHttpRequest();
xhr.open('GET', this.fileUrl, true);
xhr.responseType = 'blob';
xhr.onload = () => {
if (xhr.status === 200) {
const url = window.URL.createObjectURL(xhr.response);
const link = document.createElement('a');
link.href = url;
link.download = 'file.pdf';
link.click();
window.URL.revokeObjectURL(url);
}
};
xhr.send();
}
},
data() {
return {
fileUrl: 'http://example.com/file.pdf'
};
}
};
</script>
4.使用 js-file-download 插件
// 先安装插件
npm install js-file-download --save
// 借助你的axios请求完成下载
<template>
<button @click="downloadFile">点击下载文件</button>
</template>
<script>
import axios from 'axios';
import fileDownload from 'js-file-download';
export default {
methods: {
downloadFile() {
const fileUrl = 'http://example.com/file.pdf';
axios.get(fileUrl, { responseType: 'blob' })
.then(response => {
fileDownload(response.data, 'file.pdf');
});
}
}
};
</script>
5. 使用 file-saver 插件
// 安装插件
npm install file-saver --save
<template>
<button @click="downloadFile">点击下载文件</button>
</template>
<script>
import { saveAs } from 'file-saver';
export default {
methods: {
downloadFile() {
const fileUrl = 'http://example.com/file.pdf';
fetch(fileUrl)
.then(response => response.blob())
.then(blob => {
saveAs(blob, 'file.pdf');
});
}
}
};
</script>
