a标签模拟下载

简介: a标签模拟下载
/**
 * a标签下载
 *
 * @param {*} url 链接
 * @param {*} options 参数 { payload: url携带参数 }
 * @returns {Boolean} success
 */
export function downloadByLink(url, options) {
    if (!url) return false

    const a = document.createElement('a')

    // 添加属性
    let href = url
    const {
        payload,
        ...attrs
    } = options || {}
    attrs.href = payload ? (href += '?' + qs.stringify(payload)) : href
    Object.entries(attrs).forEach(([key, value]) => {
        a.setAttribute(key, value)
    })
    a.setAttribute('target', '_self')

    // 触发下载
    document.body.appendChild(a)
    a.click()
    a.onclick = e => {
        e && e.preventDefault()
    }
    a.parentNode.removeChild(a)

    return true
}

加载script

/**
 * 加载脚本
 *
 * @param {String} src 地址
 * @param {*} options 属性 { autoremove: 用完就扔, ... }
 *
 * @returns {Promise}
 *
 * @throws {Error}
 */
export function loadScript(src, options) {
    const {
        autoremove = true, ...attrs
    } = options || {}
    return new Promise((resolve, reject) => {
        const script = document.createElement('script')
        Object.entries(attrs).forEach(([key, val]) => {
            script.setAttribute(key, val)
        })
        script.src = src
        script.onload = () => {
            if (autoremove) {
                script.onload = script.onerror = null
                document.head.removeChild(script)
            }
            resolve()
        }
        script.onerror = reject
        document.head.appendChild(script)
    })
}

Blob文件转换下载

// Blob文件转换下载
export const downBlobFile = (result, fileName, fileType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8;', submitEndDo ? , timeSuffix = true) => {
    const data = result
    const blob = new Blob([data], {
        type: fileType
    })
    if (timeSuffix) {
        // 默认导出的文件名称添加时间
        const time = moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
        fileName = fileName + ' ' + time
    }
    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
        // for IE
        // IE必须给文件名设置固定后缀,不然默认会是.txt
        window.navigator.msSaveOrOpenBlob(blob, fileName + '.xlsx')
    } else {
        // for Non-IE (chrome, firefox etc.)
        const objectUrl = URL.createObjectURL(blob)
        const a = document.createElement('a')
        a.setAttribute('style', 'display:none')
        a.setAttribute('href', objectUrl)
        a.setAttribute('download', fileName)
        a.click()
        URL.revokeObjectURL(objectUrl)
    }
    if (submitEndDo) {
        submitEndDo()
        submitEndDo = null
    }
}
目录
相关文章
|
8月前
|
JavaScript 前端开发
JS 下载 URL 链接文件(点击按钮、点击a标签、支持代理与非代理下载)
JS 下载 URL 链接文件(点击按钮、点击a标签、支持代理与非代理下载)
184 0
|
6月前
|
Web App开发 移动开发 JavaScript
【前端用法】HTML5 Video标签如何屏蔽右键视频另存为的js代码以及如何禁用浏览器控件,Video 禁止鼠标右键下载
【前端用法】HTML5 Video标签如何屏蔽右键视频另存为的js代码以及如何禁用浏览器控件,Video 禁止鼠标右键下载
175 0
|
20天前
|
搜索推荐 前端开发 UED
html页面实现自动适应手机浏览器(一行代码搞定)
html页面实现自动适应手机浏览器(一行代码搞定)
21 0
|
6月前
|
JavaScript 前端开发 Windows
VScode的注释和标题,标签,img的src属性(如何网页上插入图片)(Mac如何开启js控制台)(如何免费复制网页中的文字)
VScode的注释和标题,标签,img的src属性(如何网页上插入图片)(Mac如何开启js控制台)(如何免费复制网页中的文字)
|
3月前
|
JavaScript 前端开发 数据安全/隐私保护
JS制作跟随鼠标移动的图片
JS制作跟随鼠标移动的图片
20 0
|
7月前
|
JavaScript
js手机端长按选中文字执行事件
js手机端长按选中文字执行事件
|
11月前
Edge浏览器复制网页不允许复制的文字
Edge浏览器复制网页不允许复制的文字
141 0
|
JavaScript 前端开发 Linux
网页跳转代码的三种方法
网页跳转代码的三种方法
1167 0
|
Web App开发 开发者
chrome浏览器三步搞定完整网页截图
第一步:点击F12进入开发者模式 第二步:Ctrl+shift+p  输入full   link) 第三步:点击screenshot 即可下载完整网页长图  如下:效果 link
2491 0
|
前端开发 JavaScript
JS - 原生js实现 网页截图(+下载截图) 功能
实现:html2canvas + canvas.toDataURL 首先,引入依赖插件: import { html2canvas } from './html2canvas'; html2canvas截图模糊处理:   1 /*图片跨域及截图模糊处理*/ 2 let canvasContent = document.
4034 0