在vue2
.x + vant2的移动端项目中下载指定格式文件，可通过以下几种常见方法实现：
### 1
. 使用 `a` 标签进行下载
在 HTML 中，可以创建一个隐藏的 `a` 标签，通过设置其 `href` 属性为文件的 URL，`download` 属性为文件名，然后模拟点击该标签来触发下载。
```vue
<template>
<div>
<van-button @click="downloadFile('https://example
.com/file
.doc', 'file
.doc')">下载文件</van-button>
</div>
</template>
<script>
export default {
methods: {
downloadFile(url, filename) {
const a =
document
.createElement('a');
a
.href = url;
a
.download = filename;
a
.style
.display = 'none';
document
.body
.appendChild(a);
a
.click();
document
.body
.removeChild(a);
}
}
};
</script>
```
### 2
. 通过 `fetch` API 下载文件
如果需要对文件下载过程进行更多控制，例如显示下载进度，可以使用 `fetch` API 来获取文件的二进制数据，然后使用 `Blob` 和 `URL
.createObjectURL` 来创建一个临时的 URL 进行下载。
```vue
<template>
<div>
<van-button @click="downloadFileWithFetch('https://example
.com/file
.doc', 'file
.doc')">下载文件</van-button>
</div>
</template>
<script>
export default {
methods: {
async downloadFileWithFetch(url, filename) {
try {
const response = await fetch(url);
const blob = await response
.blob();
const urlObject = URL
.createObjectURL(blob);
const a =
document
.createElement('a');
a
.href = urlObject;
a
.download = filename;
a
.style
.display = 'none';
document
.body
.appendChild(a);
a
.click();
document
.body
.removeChild(a);
URL
.revokeObjectURL(urlObject);
} catch (error) {
console
.error('下载文件失败:', error);
}
}
}
};
</script>
```
### 3
. 后端返回文件流的情况
如果后端返回的是文件流，可以通过设置请求头和响应类型，将文件流转换为 `Blob` 对象，然后进行下载。
```vue
<template>
<div>
<van-button @click="downloadFileFromStream('https://example
.com/api/download', 'file
.doc')">下载文件</van-button>
</div>
</template>
<script>
export default {
methods: {
async downloadFileFromStream(url, filename) {
try {
const response = await fetch(url, {
method: 'GET',
headers: {
'Content-Type': 'application/octet-stream'
},
responseType: 'blob'
});
const blob = await response
.blob();
const urlObject = URL
.createObjectURL(blob);
const a =
document
.createElement('a');
a
.href = urlObject;
a
.download = filename;
a
.style
.display = 'none';
document
.body
.appendChild(a);
a
.click();
document
.body
.removeChild(a);
URL
.revokeObjectURL(urlObject);
} catch (error) {
console
.error('下载文件失败:', error);
}
}
}
};
</script>
```
### 注意事项
- 确保文件的 URL 是可访问的，并且跨域请求需要正确配置 CORS。
- 在使用 `URL
.createObjectURL` 创建临时 URL 后，要记得使用 `URL
.revokeObjectURL` 释放资源，避免内存泄漏。
本文介绍了如何在前端实现Office文档如Word、PPT、Excel的在线预览功能，强调了预览的跨设备和跨浏览器兼容性。通过usdoc文档在线预览平台，可以快速便捷地预览文档。预览流程包括在usdoc后台注册并添加文件地址，然后使用特定的链接格式来展示文档。这种方法支持不同格式和设备的在线预览。
扫一扫
3968
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
