需求
页面中增加下载示例按钮
实现一块区域能够拖拽上传word文件,限制文件大小2MB和文件类型,能显示进度条,同时支持取消上传。
文件下载
业务中要求的是示例放在静态文件夹中,并不需要请求后台。针对这种场景,笔者将介绍三种方法,分别是 window.open,form表单提交以及a标签 下载。笔者将通过下载img和word文档的例子,对这三种方法进行对比。
现构建dom结构如下:
window.open
formSubmit
aDownload
方法一:使用 window.open :
import gakkiURL from './gakki.jpg';
import wordURL from './wordURL.doc';
windowOpen = () => {
window.open(gakkiURL);
//window.open(wordURL);
}
该方法在请求两种文件时,具体表现为:
img:新开网页,然后显示对应的img图片。
word:下载该文件。
方法2:使用form表单的submit:
formSubmit = () => {
let form = document.createElement('form');
form.method = 'get';
form.action = gakkiURL;
//form.action = wordURL;
//form.target = '_blank'; // form新开页面
document.body.appendChild(form); // form表单做出提交操作要先加入到dom树中
form.submit();
document.body.removeChild(form);
}
该方法在请求两种文件时,具体表现为:
img:form在不设置target时,会在当前页面打开url,显示图片。
word:下载该文件。
从上述两种方法可以看出,在请求对应的url时, 浏览器针对不同的MIME类型会选择不同的处理方式 。在请求img、txt等格式时,浏览器会打开对应的文件,而不是下载。如果想要img这些格式也下载呢?此时就需要方法三。
方法3:使用a标签:
// 使用a标签
aDownload = () =>