js 文件流下载、文件地址下载、文件预览等相关file-tools方法

通过文件url地址，实现文件下载功能

//通过文件地址下载
/** 下载文件, 不能兼容ie */
export const downloadTemple = (url: string, filename: string) => {
    if (!!(window as any).ActiveXObject || 'ActiveXObject' in window) {
        (window.navigator as any).msSaveOrOpenBlob(url, filename)
    } else {
        const link = document.createElement('a')
        link.style.display = 'none'
        link.href = url
        link.setAttribute('download', filename)
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
    }
}

通过文件地址下载

export function downloadTemple1(url: string) {
    const ele = document.createElement('a');
    ele.setAttribute('href', url); //设置下载文件的url地址
    ele.target = '_self'; //设置下载文件的url地址
    document.body.appendChild(ele);
    ele.click();

    document.body.removeChild(ele);
}

文件流方式下载

//自定义文件名下载
export function downLoadFile(data: any, filename: string) {
    let blob = new Blob([data], { type: `application/text;charset=utf-8` });
    // 获取heads中的filename文件名
    let downloadElement = document.createElement('a');
    // 创建下载的链接
    let href = window.URL.createObjectURL(blob);
    downloadElement.href = href;
    // 下载后文件名
    // downloadElement.download = "苏州市献血条例(2020修正)(FBM-CLI-10-1576058)";
    downloadElement.download = filename;
    document.body.appendChild(downloadElement);
    // 点击下载
    downloadElement.click();
    // 下载完成移除元素
    document.body.removeChild(downloadElement);
    // 释放掉blob对象
    window.URL.revokeObjectURL(href);
}

文件预览

// 文件预览
export const handleReviewCreateA = (item: string) => {
    let url = item; // 预览地址
    let doc: Document = document,
        a: HTMLAnchorElement = doc.createElement('a')
    if (doc.body.querySelector('#a-preview-pdf-temp')) {
        doc.body.removeChild(doc.body.querySelector('#a-preview-pdf-temp') as Node)
    }
    a.id = 'a-preview-pdf-temp'
    a.setAttribute('target', '_blank')
    a.href = url
    doc.body.appendChild(a)
    a.click()
    doc.body.removeChild(a)
}