foreword
File download is a relatively common function in the front-end system, especially in the management system. In this article, I record several methods for the front end to realize file download through the file url returned by the back end, including batch download.
1. Single file download
There are three main methods:
1. Through the a tag
<Col xs={
20} sm={
16} md={
12} lg={
8} xl={
6}>
<Form.Item name="crtTime" label="a标签下载" rules={
[{
required: false }]}>
<a href='http://dev.imuyuan.com/file/fetch/v1/5SNVT9QI6g791pHBSjLRsE'>a标签下载</a>
</Form.Item>
</Col>
The name of the file downloaded by this method is the name of the file itself returned by the backend interface
2. Another download method
const handleDown = () => {
let a: any = document.createElement('a') // 创建一个元素
a.style = 'display: none' // 不能在页面中被看到，把他隐藏起来
a.style.height = '0px' // 给个0高度，避免影响页面布局
// a.download = `${dayjs(new Date()).format('YYYY-MM-DD')}${data.fileName}`; // 下载的文件名,可自定义
a.href = 'http://dev.imuyuan.com/file/fetch/v1/5SNVT9QI6g791pHBSjLRsE' // 文件url地址
document.body.appendChild(a) // 将其绑定在body上才能发挥作用
a.click() // 触发a标签的click事件
document.body.removeChild(a) // 删除该元素
}
<Col xs={
20} sm={
16} md={
12} lg={
8} xl={
6}>
<Form.Item name="crtTime" label="自定义名称下载" rules={
[{
required: false }]}>
<Button onClick={
handleDown}>hhh </Button>
</Form.Item>
</Col>
3. Use window.open to download
const handleDown = () => {
window.open('http://dev.imuyuan.com/file/fetch/v1/2GCtdxKkrlVTSHAt00sHXJ')
// window.open('http://dev.imuyuan.com/file/fetch/v1/2GCtdxKkrlVTSHAt00sHXJ', true)
}
<Col xs={
20} sm={
16} md={
12} lg={
8} xl={
6}>
<Form.Item name="crtTime" label="window.open下载" rules={
[{
required: false }]}>
<Button onClick={
handleDown}>window.open下载</Button>
</Form.Item>
</Col>
4. Use location.href to download
const handleDown = () => {
window.location.href = 'http://dev.imuyuan.com/file/fetch/v1/5SNVT9QI6g791pHBSjLRsE'
}
<Col xs={
20} sm={
16} md={
12} lg={
8} xl={
6}>
<Form.Item name="crtTime" label="location.href下载" rules={
[{
required: false }]}>
<Button onClick={
handleDown}>location.href下载</Button>
</Form.Item>
</Col>
2. Multi-file batch download
Encapsulate two methods of batch downloading multiple files
// 第一种：附件批量下载
const handleBatchDown = () => {
const hideLoading = message.loading('下载中...', 0);
const dataSource = [{
}, {
}] // 这里面是需要批量下载的文件url列表，根据自己的项目获取
dataSource.forEach((item: any) => {
let iframe = document.createElement('iframe'); // 先创建一个iframe 标签
iframe.style.display = 'none'; // 不能在页面中被看到，把他隐藏起来，不影响我们使用啊
iframe.style.height = '0px'; // 给他个0的高度，免得影响页面布局
iframe.src = item.fileUrl; // 关联上我们的下载地址
document.body.appendChild(iframe); // 把他绑定在body上才能发挥作用，不然就能孤魂野码了
setTimeout(() => {
iframe.remove();
}, 10000);
})
setTimeout(hideLoading, 0)
}
// 封装第二种方法，文件批量下载
const getFile = (url: string) => {
return new Promise(resolve, reject) => {
setTimeout(() => {
window.location.href = url;
resolve(url)
}, 1000)
}
}
const handleBatchDown = async () => {
const dataSource = [{
}, {
}] // 这里面是需要批量下载的文件url列表，根据自己的项目获取
if(!dataSource?.length) return;
for (const item of dataSource) {
await getFile(item.fileUrl)
}
}
Under normal circumstances, there are several common ways to download files that are commonly used, but this is for the url type returned by the file. If you export the list data on the home page as a table in excelformat Method encapsulation.
Note: If you need the function of batch compression, packaging and downloading of pure front-end js through the file url path , you can refer to my next blog, which will have a detailed introduction!