前端js下载文件时后缀名多出一个下划线(已解决)

发布于:2024-10-12 ⋅ 阅读:(141) ⋅ 点赞:(0)

问题:前端js下载文件时后缀名多出一个下划线

在打印的时候发现文件名啥啥啥的都没问题,创建的元素似乎也没问题。

但是呢结果?多了个下划线。

原因

细心的你可能发现了a标签的download的内容是双层双引号。具体原因可能是谷歌浏览器做了安全处理吧(瞎猜的)。不过我在火狐是测试是正常的。
在这里插入图片描述

解决方法

将文件名称的双引号去掉即可fileName.replace(new RegExp(’"’, ‘g’), ‘’)

    exportFile(url, params = {}) {
        return new Promise((resolve, reject) => {
            axios({
                method: 'post',
                url: `${url}`,
                params: params,
                headers: {
                    ...this.setProjectHeader(url),
                    'Content-Type': 'application/json;charset=utf-8'
                },
                responseType: 'blob'
            })
                .then((res) => {
                    let data = res.data
                    // 文件名
                    let fileName = decodeURI(escape(res.headers['content-disposition'].split('=')[1]))
                    // 文件类型
                    const type = fileName.split('.')[1]
                    let blob = new Blob([data], { type: `application/${type}.ms-excel;charset=utf-8` })
                    let downloadElement = document.createElement('a')
                    // 创建下载的链接
                    let href = window.URL.createObjectURL(blob)
                    downloadElement.href = href
                    // 下载后文件名
                    downloadElement.download = fileName.replace(new RegExp('"', 'g'), '')
                    document.body.appendChild(downloadElement)
                    downloadElement.click()
                    document.body.removeChild(downloadElement)
                    // 释放掉blob对象
                    window.URL.revokeObjectURL(href)
                })
                .catch((err) => {
                    reject(err.data)
                })
        })
    },

转自:前端js下载文件时后缀名多出一个下划线(已解决)_下载的文件前后有下横线-CSDN博客


网站公告

今日签到

点亮在社区的每一天
去签到