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);
}
相关推荐
专注VB编程开发20年1 分钟前
jss html5-node.nodeType 属性用于表示节点的类型
前端·js
烛阴42 分钟前
Promise无法中断?教你三招优雅实现异步任务取消
前端·javascript
GUIQU.1 小时前
【Vue】单元测试(Jest/Vue Test Utils)
前端·vue.js
暮乘白帝过重山1 小时前
Ollama 在本地分析文件夹中的文件
前端·chrome·ollama
一只小风华~1 小时前
Web前端开发:CSS Float(浮动)与 Positioning(定位)
前端·css·html·html5·web
前端张三1 小时前
vue3中ref在js中为什么需要.value才能获取/修改值?
前端·javascript·vue.js
moyu841 小时前
前端从后端获取数据的流程与指南
前端
爱的叹息2 小时前
解决 Dart Sass 的旧 JS API 弃用警告 的详细步骤和解决方案
javascript·rust·sass
涛哥码咖2 小时前
Rule.resourceQuery(通过路径参数指定loader匹配规则)
前端·webpack
夕水2 小时前
这个提升效率宝藏级工具一定要收藏使用
前端·javascript·trae