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);
}
相关推荐
nn_(nana)14 分钟前
修改文件权限--- chmod ,vi/vim,查看文件内容,yum-软件包管理器,systemctl管理系统服务
前端
汪汪队立大功12320 分钟前
JavaScript是怎么和html元素关联起来的?
开发语言·javascript·html
烛阴1 小时前
从零开始掌握C#核心:变量与数据类型
前端·c#
han_1 小时前
前端高频面试题之Vuex篇
前端·vue.js·面试
qq_415216251 小时前
vue3搭建项目yarn+vue3+webpack+less+element-plus
前端·webpack·less
天天向上10242 小时前
VueUse的使用
前端·vue.js·vscode
FREE技术2 小时前
学生成绩管理系统 基于java+springboot+vue实现前后端分离项目并附带万字文档(源码+数据库+万字详设文档+软件包+安装教程)
java·vue.js·spring boot·mysql
猪猪拆迁队3 小时前
前端图形引擎架构设计:双引擎架构设计
前端·后端·架构
宋辰月3 小时前
学习react第三天
前端·学习·react.js
bug总结3 小时前
更新原生小程序封装(新增缓存订阅)完美解决
前端·缓存·小程序