React和Vue实现文件下载进度条
更新时间：2023年04月26日 16:01:17 作者：敲代码的彭于晏
本文主要介绍了React和Vue实现文件下载进度条，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
一、需求场景
下载服务端大文件资源过慢，页面没有任何显示，体验太差。因此需增加进度条优化显示
二、实现原理
发送异步HTTP请求，监听onprogress事件，读取已下载的资源和资源总大小得到下载百分比
在资源请求完成后，将文件内容转为blob，并通过a标签将文件通过浏览器下载下来
三、react 实现步骤
1. 托管静态资源
前提：通过create-react-app创建的react项目
将静态资源文件放到public文件夹下，这样启动项目后，可直接通过http://localhost:3000/1.pdf 的方式访问到静态资源。在实际工作中，肯定是直接访问服务器上的资源
2. 封装hook
新建useDownload.ts
import { useCallback, useRef, useState } from 'react';
interface Options {
fileName: string; //下载的文件名
onCompleted?: () => void; //请求完成的回调方法
onError?: (error: Error) => void; //请求失败的回调方法
}
interface FileDownReturn {
download: () => void; //下载
cancel: () => void; //取消
progress: number; //下载进度百分比
isDownloading: boolean; //是否下载中
}
export default function useFileDown(url: string, options: Options): FileDownReturn {
const { fileName, onCompleted, onError } = options;
const [progress, setProgress] = useState(0);
const [isDownloading, setIsDownloading] = useState(false);
const xhrRef = useRef<XMLHttpRequest | null>(null);
const download = useCallback(() => {
const xhr = (xhrRef.current = new XMLHttpRequest());
xhr.open('GET', url); //默认异步请求
xhr.responseType = 'blob';
xhr.onprogress = (e) => {
//判断资源长度是否可计算
if (e.lengthComputable) {
const percent = Math.floor((e.loaded / e.total) * 100);
setProgress(percent);
}
};
xhr.onload = () => {
if (xhr.status === 200) {
//请求资源完成，将文件内容转为blob
const blob = new Blob([xhr.response], { type: 'application/octet-stream' });
//通过a标签将资源下载
const link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = decodeURIComponent(fileName);
link.click();
window.URL.revokeObjectURL(link.href);
onCompleted && onCompleted();
} else {
onError && onError(new Error('下载失败'));
}
setIsDownloading(false);
};
xhr.onerror = () => {
onError && onError(new Error('下载失败'));
setIsDownloading(false);
};
xhrRef.current.send(); //发送请求
setProgress(0); //每次发送时将进度重置为0
setIsDownloading(true);
}, [fileName, onCompleted, onError, url]);
const cancel = useCallback(() => {
xhrRef.current?.abort(); //取消请求
setIsDownloading(false);
}, [xhrRef]);
return {
download,
cancel,
progress,
isDownloading,
};
}
3. 使用hook
import { memo } from 'react';
import useFileDown from './useDownload';
const list = [
{
fileName: '城市发展史起.pdf',
url: ' http://localhost:3000/1.pdf',
type: 'pdf',
},
{
fileName: '表格.xlsx',
url: 'http://localhost:3000/表格.xlsx',
type: 'xlsx',
},
{
fileName: '报告.doc',
url: 'http://localhost:3000/报告.doc',
type: 'doc',
},
];
interface Options {
url: string;
fileName: string;
}
const Item = memo(({ url, fileName }: Options) => {
//每项都需拥有一个属于自己的 useFileDown hook
const { download, cancel, progress, isDownloading } = useFileDown(url, { fileName });
return (
<div>
<span style={{ cursor: 'pointer' }} onClick={download}>
{fileName}
</span>
{isDownloading ? (
<span>
{`下载中：${progress}`}
<button onClick={cancel}>取消下载</button>
</span>
) : (
''
)}
</div>
);
});
const Download = () => {
return (
<div>
{list.map((item, index) => (
<Item url={item.url} fileName={item.fileName} key={index} />
))}
</div>
);
};
export default Download;
四、vue 实现步骤
1. 托管静态资源
前提：通过vite创建的vue项目
将静态资源文件放到public文件夹下，这样启动项目后，可直接通过http://127.0.0.1:5173/1.pdf 的方式访问到静态资源
2. 封装hook
新建hooks/useDownload.ts（新建hooks文件夹）
import { ref } from "vue";
export interface Options {
fileName: string;
onCompleted?: () => void; //请求完成的回调方法
onError?: (error: Error) => void; //请求失败的回调方法
}
export interface FileDownReturn {
download: () => void; //下载
cancel: () => void; //取消
progress: number; //下载进度百分比
isDownloading: boolean; //是否下载中
}
export default function useFileDown(
url: string,
options: Options
): FileDownReturn {
const { fileName, onCompleted, onError } = options;
const progress = ref(0);
const isDownloading = ref(false);
const xhrRef = ref<XMLHttpRequest | null>(null);
const download = () => {
const xhr = (xhrRef.value = new XMLHttpRequest());
xhr.open("GET", url); //默认异步请求
xhr.responseType = "blob";
xhr.onprogress = (e) => {
//判断资源长度是否可计算
if (e.lengthComputable) {
const percent = Math.floor((e.loaded / e.total) * 100);
progress.value = percent;
}
};
xhr.onload = () => {
if (xhr.status === 200) {
//请求资源完成，将文件内容转为blob
const blob = new Blob([xhr.response], {
type: "application/octet-stream",
});
//通过a标签将资源下载
const link = document.createElement("a");
link.href = window.URL.createObjectURL(blob);
link.download = decodeURIComponent(fileName);
link.click();
window.URL.revokeObjectURL(link.href);
onCompleted && onCompleted();
} else {
onError && onError(new Error("下载失败"));
}
isDownloading.value = false;
};
xhr.onerror = () => {
onError && onError(new Error("下载失败"));
isDownloading.value = false;
};
xhrRef.value.send(); //发送请求
progress.value = 0; //每次发送时将进度重置为0
isDownloading.value = true;
};
const cancel = () => {
xhrRef.value?.abort(); //取消请求
isDownloading.value = false;
};
return {
download,
cancel,
progress,
isDownloading,
};
}
3. 使用hook
- 修改App.vue
<script setup lang="ts">
import Item from "./components/Item.vue";
const list = [
{
fileName: "城市发展史起.pdf",
url: " http://127.0.0.1:5173/1.pdf",
type: "pdf",
},
{
fileName: "表格.xlsx",
url: "http://127.0.0.1:5173/表格.xlsx",
type: "xlsx",
},
{
fileName: "报告.doc",
url: "http://127.0.0.1:5173/报告.doc",
type: "doc",
},
];
</script>
<template>
<div>
<div v-for="(item, index) in list" :key="index">
<Item :url="item.url" :fileName="item.fileName"<script setup lang="ts">
import useFileDown from "../hooks/useDownload.ts";
const props = defineProps<{ url: string; fileName: string }>();
const { url, fileName } = props;
const { download, cancel, progress, isDownloading } = useFileDown(url, {
fileName,
});
</script>
<template>
<div>
<span style="cursor: pointer" @click="download">
{{ fileName }}
</span>
<span v-if="isDownloading">
下载中:{{ progress }} <button @click="cancel">取消下载</button></span
>
</div>
</template> />
</div>
</div>
</template>
- 新建components/Item.vue
<script setup lang="ts">
import useFileDown from "../hooks/useDownload.ts";
const props = defineProps<{ url: string; fileName: string }>();
const { url, fileName } = props;
const { download, cancel, progress, isDownloading } = useFileDown(url, {
fileName,
});
</script>
<template>
<div>
<span style="cursor: pointer" @click="download">
{{ fileName }}
</span>
<span v-if="isDownloading">
下载中:{{ progress }} <button @click="cancel">取消下载</button></span
>
</div>
</template>
五、可能遇到的问题：lengthComputable为false
原因一：后端响应头没有返回Content-Length；
解决办法：让后端加上就行
原因二：开启了gzip压缩
开启gzip之后服务器默认开启文件分块编码（响应头返回Transfer-Encoding: chunked）。分块编码把「报文」分割成若干个大小已知的块，块之间是紧挨着发送的。采用这种传输方式进行响应时，不会传Content-Length这个首部信息，即使带上了也是不准确的
分别为gzip压缩，分块编码：
例如有个877k大小的js文件，网络请求的大小为247k。但是打印的e.loaded最终返回的是877k
解决方法：后端把文件大小存储到其他字段，比如：header['x-content-length']
到此这篇关于React和Vue实现文件下载进度条的文章就介绍到这了,更多相关React Vue下载进度条内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了关于react中列表渲染的局部刷新问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
由于redux使用这方面有很多的不解,不是很熟练,所以我查找资料,进行一个总结,希望可以巩固知识,并且能帮助到需要的人,所以我会写的比较清晰简单明了点,若有不对之处,请大家纠正2023-10-10
手挽手带你学React之React-router4.x的使用
这篇文章主要介绍了手挽手带你学React之React-router4.x的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-02-02
在react中为我们提供了一个非常有用的组件,那就是Suspense,本文主要介绍了如何使用Suspense 和 react提供的lazy结合起来达到异步加载状态的目的,感兴趣的可以了解下2024-04-04
react redux中如何获取store数据并将数据渲染出来
这篇文章主要介绍了react redux中如何获取store数据并将数据渲染出来，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要为大家介绍了React 状态管理工具优劣势示例分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
本文主要介绍了react 可拖拽进度条的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-04-04
Context提供了一个无需为每层组件手动添加props，就能在组件树间进行数据传递的方法。在一个典型的 React 应用中，数据是通过props属性自上而下（由父及子）进行传递的，但这种做法对于某些类型的属性而言是极其繁琐的2022-12-12
react中的key属性,它是一个特殊的属性,它是出现不是给开发者用的,而是给React自己使用,有了key属性后,就可以与组件建立了一种对应关系,本文主要介绍了React中Key属性作用,具有一定的参考价值,感兴趣的可以了解一下2024-01-01
本文主要介绍了React Router6.x路由表封装的两种写法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-01-01
最新评论