JS实现下载txt文件

进击的前端小白、

已于 2022-10-19 13:45:01 修改

阅读量4.7k

点赞数 1

文章标签： javascript 前端 html

于 2022-10-19 13:44:00 首次发布

本文链接：https://blog.csdn.net/dongwei666/article/details/127406142

版权

本文介绍了两种在没有后端接口的情况下，利用HTML5特性实现下载txt文件的技巧：一是通过`a`标签的`download`属性，二是通过FileReader转换Base64下载。适合处理项目中信息抓取和本地存储需求。

摘要由CSDN通过智能技术生成

前言

`有时候项目需要下载一些信息，而后端却又不给我提供接口。我们就可以采用下面的方式，将一些信息保存下载到一个txt文件中。下面我们提供两种下载txt的方式。`

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

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

/*
* 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字符串下载

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);
  }
}