文件下载 & 文件新开窗口下载 & 批量下载文件

文件下载 & 文件新开窗口下载 & 批量下载文件

源码

//文件下载
export const downlodFile = (url) => {
    if (!url) {
        return
    }
    //创建可下载链接
    const link = document.createElement('a')
    // 隐藏链接
    link.style.display = 'none'
    // 为a标签设置herf属性
    link.href = url
    //挂载到dom树
    document.body.appendChild(link)
    // 触发点击
    link.click()
    //删除
    document.body.removeChild(link)
}
//文件新开窗口下载
export const openDownloadFile = (url, name) => {
	//创建可下载链接
    const link = document.createElement('a')
    // 隐藏链接
    link.style.display = 'none'
    // 为a标签设置herf属性
    link.href = url
    // 为a标签设置target 属性
    link.target = '_blank';
    // 为a标签设置download 属性
    !!name && (link.download = name);
    //挂载到dom树
    document.body.appendChild(link)
    // 触发点击
    link.click()
    //删除
    document.body.removeChild(link)
}
/**
 * 描述：批量下载文件
 */
export const batchDownloadFile = (urlArr) => {
	//	循环url数组
    for (let i = 0; i < urlArr.length; i++) {
        if (urlArr[i]) {
        	//创建iframe
            const iframe = document.createElement("iframe");
            // 隐藏(防止影响页面)
            iframe.style.display = "none"; 
            iframe.style.height = 0; // 防止影响页面
            // 为iframe设置src 属性
            iframe.src = urlArr[i];
            // iframe挂在到dom树(这一行必须，iframe挂在到dom树上才会发请求)
            document.body.appendChild(iframe); 
            // 5分钟之后删除
            setTimeout(() => {
                iframe.remove();
            }, 5 * 60 * 1000);
        }
    }
}

知识点

1. a.target
   1.1 定义和用法
   标签的 target 属性规定在何处打开链接文档。
   如果在一个 标签内包含一个 target 属性，浏览器将会载入和显示用这个标签的 href 属性命名的、名称与这个目标吻合的框架或者窗口中的文档。如果这个指定名称或 id 的框架或者窗口不存在，浏览器将打开一个新的窗口，给这个窗口一个指定的标记，然后将新的文档载入那个窗口。从此以后，超链接文档就可以指向这个新的窗口。
   1.2 语法
   
   1.3 属性值
   _blank： 在新窗口中打开被链接文档。
   _self： 默认。在相同的框架中打开被链接文档。
   _parent： 在父框架集中打开被链接文档。
   _top： 在整个窗口中打开被链接文档。
   framename： 在指定的框架中打开被链接文档。
2. a.download
   2.1 定义和用法
   download 属性规定被下载的超链接目标。
   在 标签中必须设置 href 属性。
   该属性也可以设置一个值来规定下载文件的名称。所允许的值没有限制，浏览器将自动检测正确的文件扩展名并添加到文件 (.img, .pdf, .txt, .html, 等等)。
   2.2 语法
   
   2.3 属性值
   filename： 规定作为文件名来使用的文本。
3. iframe
   3.1 定义和用法
   iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。

用法

// 文件下载
downlodFile(url)
// 文件新开窗口下载
openDownloadFile(url, `延时分析.csv`);
// 批量下载文件
batchDownloadFile(urlList|| [])}