通过js保存文本信息到本地, 提供类似下载文件的功能

leiax00

已于 2023-01-29 17:59:31 修改

阅读量1.2w

点赞数 5

分类专栏：编程语言文章标签： javascript js

于 2020-12-22 09:24:07 首次发布

本文链接：https://blog.csdn.net/qq_35566365/article/details/111504961

版权

编程语言专栏收录该内容

19 篇文章 0 订阅

订阅专栏

在前端直接组合数据或者接口返回的文件会被浏览器自动打开的情况下，
可以通过前端处理来保存文件到本地, 从而避免浏览器的自动解析；

原理：通过js书写临时<a>标签来进行类似下载弹窗的操作，需要浏览器开启每次下载文件询问保存位置；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<a id="testa" href="javascript:void(0)">click me</a>
</body>
<script type="text/javascript">
    let tagObj = document.getElementById('testa')
    tagObj.onclick  = function(e) {
        const fileName = 'test.txt';
        const str = 'this man is the best man, none of others can be with him.';
        const content = str
        const blob = new Blob([content], {
            type: 'application/text'
        }) // 构造一个blob对象来处理数据
        // 对于<a>标签，只有 Firefox 和 Chrome（内核） 支持 download 属性
        // IE10以上支持blob但是依然不支持download
        if ('download' in document.createElement('a')) { // 支持a标签download的浏览器
            const link = document.createElement('a') // 创建a标签
            link.download = fileName // a标签添加属性
            link.style.display = 'none'
            link.href = URL.createObjectURL(blob)
            document.body.appendChild(link)
            link.click() // 执行下载
            URL.revokeObjectURL(link.href) // 释放url
            document.body.removeChild(link) // 释放标签
        } else { // 其他浏览器
            navigator.msSaveBlob(blob, fileName)
        }
    }
</script>
</html>

注：IE9不支持Blob对象，因此至少要IE10+，其他浏览器没有限制；
对于IE9, 直接使用下面的方式即可:

// 对于png,MP4,txt浏览器会自动打开该文件, 添加参数可以避免直接被打开
windows.open(`${url}?dl=1`, '_blank')

leiax00

关注

5
点赞
踩
14

收藏

觉得还不错? 一键收藏
1
评论
通过js保存文本信息到本地, 提供类似下载文件的功能

在前端直接组合数据或者接口返回的文件会被浏览器自动打开的情况下，可以通过前端处理来让浏览器保存文件到本地的任意位置；原理：通过js书写临时<a>标签来进行类似下载弹窗的操作，需要浏览器开启每次下载文件询问保存位置；<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head.
复制链接

扫一扫

专栏目录