JS实现下载txt文件

前端实现下载txt的两种方法

一、采用a标签的download属性实现下载

通过a标签指定文本格式和编码直接下载

javascript 复制代码
/*
fileName: txt文件名称
content:文件内容(string)
*/
function downloadTxt(fileName, content) {
    let a = document.createElement('a');
    a.href = 'data:text/plain;charset=utf-8,' + content
    a.download = fileName
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
}

二、通过文件流的形式下载

通过FileReader转化为base64字符串下载

javascript 复制代码
function downloadTxt(fileName, content) {
    let blob = new Blob([content], {
        type: "text/plain;charset=utf-8"
    });
    let reader = new FileReader();
    reader.readAsDataURL(blob);
    reader.onload = function(e) {
    let a = document.createElement('a');
    a.download = fileName;
    a.href = e.target.result;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
}
相关推荐
请叫我欧皇i2 分钟前
el-form动态标题和输入值,并且最后一个输入框不校验
前端·javascript·vue.js
工业互联网专业2 分钟前
毕业设计选题:基于ssm+vue+uniapp的驾校预约管理系统小程序
vue.js·小程序·uni-app·毕业设计·ssm·源码·课程设计
工业互联网专业18 分钟前
毕业设计选题:基于ssm+vue+uniapp的面向企事业单位的项目申报小程序
vue.js·小程序·uni-app·毕业设计·ssm·源码·课程设计
小小李程序员29 分钟前
css边框修饰
前端·css
我爱画页面1 小时前
使用dom-to-image截图html区域为一张图
前端·html
忧郁的西红柿1 小时前
HTML-DOM模型
前端·javascript·html
思茂信息1 小时前
CST电磁仿真77GHz汽车雷达保险杠
运维·javascript·人工智能·windows·5g·汽车
bin91531 小时前
【油猴脚本】00010 案例 Tampermonkey油猴脚本,动态渲染表格-添加提示信息框,HTML+Css+JavaScript编写
前端·javascript·css·bootstrap·html·jquery
花花鱼1 小时前
vue3 本地windows下的字体的引用
vue.js