javascript实现生成并下载txt文件方式

目录
  • js生成并下载txt文件
    • 下表显示了FileSaver.js在不同浏览器中的兼容性
  • js导出文件为txt并下载
    • 首先HTML结构使用最简单的结构
    • 然后js

js生成并下载txt文件

下面的简单函数允许您直接在浏览器中生成文件，而无需接触任何服务器。

它适用于所有HTML5就绪的浏览器，因为它使用了<a>的下载属性：

function download(filename, text) {
  var element = document.createElement('a');
  element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
  element.setAttribute('download', filename);
 
  element.style.display = 'none';
  document.body.appendChild(element);
 
  element.click(); 
  document.body.removeChild(element);
} 
 
download("hello.txt","This is the content of my file :)");

创建库，FileSaver.js在不支持saveAs()的FileSaver接口的浏览器中实现它。如果您需要保存更大的文件，或者BLOB的大小限制，或者没有足够的内存，那么请看一看更高级的StreamSaver.js，它可以使用新的StreamsAPI的强大功能将数据直接异步保存到硬盘中。同时支持进度查看，取消和何时完成。

下面的代码段允许您生成一个文件(具有任何扩展名)并下载它，而无需链接任何服务器：

var content = "What's up , hello world";
// any kind of extension (.txt,.cpp,.cs,.bat)
var filename = "hello.txt";
 
var blob = new Blob([content], {
 type: "text/plain;charset=utf-8"
});
 
saveAs(blob, filename);

下表显示了FileSaver.js在不同浏览器中的兼容性

Browser Constructs as Filenames Max Blob Size Dependencies
Firefox 20+ Blob Yes 800 MiB None
Firefox < 20 data: URI No n/a Blob.js
Chrome Blob Yes [500 MiB][3] None
Chrome for Android Blob Yes [500 MiB][3] None
Edge Blob Yes ? None
IE 10+ Blob Yes 600 MiB None
Opera 15+ Blob Yes 500 MiB None
Opera < 15 data: URI No n/a Blob.js
Safari 6.1+* Blob No ? None
Safari < 6 data: URI No n/a Blob.js
Safari 10.1+ Blob Yes n/a None

注意： 尽管它支持最新的浏览器，但您需要了解几个技巧才能更好运用。

js导出文件为txt并下载

今天要做一个数据下载到本地保存为txt文件，一开始网上找了很多例子，大部分都是用的ActiveXObject对象，但是粘贴到本地测试就报错，后来才发现这个只兼容IE。

后来又搜索了半天才得到解决，现在我就把解决办法给大家分享一下。

首先HTML结构使用最简单的结构

<textarea name="" id="text" cols="30" rows="10">这里输入的数据将保存为txt中</textarea>
<button id="save" type="button">保存</button>

然后js

       document.querySelector('#save').addEventListener('click', saveFile);
       function fakeClick(obj) { 
       　　var ev = document.createEvent("MouseEvents");
ev.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
　　　　obj.dispatchEvent(ev);
　　}
　　function exportRaw(name, data) {
　　　　var urlObject = window.URL || window.webkitURL || window;
　　　　var export_blob = new Blob([data]);
　　　　var save_link = document.createElementNS("http://www.w3.org/1999/xhtml", "a")
　　　　save_link.href = urlObject.createObjectURL(export_blob);
　　　　save_link.download = name;
　　　　fakeClick(save_link);
　　}
　　function saveFile(){
　　　　var inValue  = document.querySelector('#text').value;
　　　　exportRaw('test.txt', inValue);
　　}

这样就可以在点击保存后将textarea中输入的内容本地化为txt文件。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • javascript使用Blob对象实现的下载文件操作示例

    本文实例讲述了javascript使用Blob对象实现的下载文件操作.分享给大家供大家参考,具体如下: Blob对象 前言 环境 操作 总结 Blob是一个类文件的不可变的原始数据对象,非javascript原生数据类型,File对象就是继承自Blob对象,且在Blob的基础上进行扩展,以便支持用户系统上的文件. 前言 最近在做以post请求方式导出excel时,想到了可以使用Blob对象将后台返回的输出流以arraybuffer或blob的格式接收交给Blob处理,最后使用URL生成链接,供浏

  • JavaScript进阶之前端文件上传和下载示例详解

    JavaScript进阶之前端文件上传和下载示例详解

    目录 文件下载 1.通过a标签点击直接下载 2.open或location.href 3.Blob和Base64 文件上传 文件上传思路 File文件 上传单个文件-客户端 上传文件-服务端 多文件上传-客户端 大文件上传-客户端 大文件上传-服务端 文件下载 1.通过a标签点击直接下载 <a href="https:xxx.xlsx" rel="external nofollow" download="test">下载文件</

  • js实现下载(文件流式)方法详解与完整实例源码

    在介绍JS文件流式下载文件方法之前,先记录下window.location.href的使用方法 window.location.href的用法 javascript中的location.href有很多种用法,主要如下. self.location.href="/url"//当前页面打开URL页面 location.href="/url"//当前页面打开URL页面 windows.location.href="/url" //当前页面打开URL页面

  • 使用 JavaScript 创建并下载文件(模拟点击)

    先上代码 /** * 创建并下载文件 * @param {String} fileName 文件名 * @param {String} content 文件内容 */ function createAndDownloadFile(fileName, content) { var aTag = document.createElement('a'); var blob = new Blob([content]); aTag.download = fileName; aTag.href = URL.

  • JavaScript 中如何实现大文件并行下载

    JavaScript 中如何实现大文件并行下载

    目录 一.HTTP 范围请求 1.1 Range 语法 二.如何实现大文件下载 2.1 定义辅助函数 2.2 大文件下载使用示例 三.总结 相信有些小伙伴已经了解大文件上传的解决方案,在上传大文件时,为了提高上传的效率,我们一般会使用 Blob.slice 方法对大文件按照指定的大小进行切割,然后在开启多线程进行分块上传,等所有分块都成功上传后,再通知服务端进行分块合并. 那么对大文件下载来说,我们能否采用类似的思想呢?在服务端支持 Range 请求首部的条件下,我们也是可以实现多线程分块下载的

  • javascript Blob对象实现文件下载

    目录 说明 一.Blob对象 二.前端 三.后端 总结 说明 最近遇到一个需求,文件下载,但需要鉴权,这就意味着不能用后台返回下载链接的方式进行下载,因为一旦被别人拿到这条链接,就可以不需要任何权限就直接下载,因此需要换种思路,在一番百度之后,了解到了blob对象,这就是本文要讲的内容 注意:本文仅为记录学习轨迹,如有侵权,联系删除 一.Blob对象 Blob 对象表示一个不可变.原始数据的类文件对象.它的数据可以按文本或二进制的格式进行读取,也可以转换成 ReadableStream 来用于数

  • JavaScript实现多文件下载方法解析

    对于文件的下载,可以说是一个十分常见的话题,前端的很多项目中都会有这样的需求,比如 highChart 统计图的导出,在线图片编辑中的图片保存,在线代码编辑的代码导出等等.而很多时候,我们只给了一个链接,用户需要右键点击链接,然后选择"另存为",这个过程虽说不麻烦,但还是需要两步操作,倘若用户想保存页面中的多个链接文件,就得重复操作很多次,最常见的就是英语听力网站上的音频下载,手都要点麻! 本文的目的是介绍如何利用 javascript 进行多文件的下载,也就是当用户点击某个链接或者按

  • js实现文件流式下载文件方法详解及完整代码

    JS实现流式打包下载说明 浏览器中的流式操作可以节省内存,扩大 JS 的应用边界,比如我们可以在浏览器里进行视频剪辑,而不用担心视频文件将内存撑爆. 浏览器虽然有流式处理数据的 API,并没有直接提供给 JS 进行流式下载的能力,也就是说即使我们可以流式的处理数据,但想将其下载到磁盘上时,依然会对内存提出挑战. 这也是我们讨论的前提: 流式的操作,必须整个链路都是流式的才有意义,一旦某个环节是非流式(阻塞)的,就无法起到节省内存的作用. 本篇文章分析了如何在 JS中流式的处理数据 ,流式的进行下

  • JavaScript实现文件下载并重命名代码实例

    这篇文章主要介绍了JavaScript实现文件下载并重命名代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 第一种是HTML官网中的方法 <a href="/images/liang.jpg" rel="external nofollow" download="文件名称"> HTML5 中 a 标签提供了一个 filename 属性,可以下载成指定的 download 属性名称

  • 用python生成1000个txt文件的方法

    问题,用python生成如下所示的1000个txt文件? 解答: import os for i in range(0,1001): os.mknod("./a/%04d.txt"%i) 以上这篇用python生成1000个txt文件的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • php生成并下载word文件到本地实现方法详解

    php生成并下载word文件到本地实现方法详解

    目录 安装phpword包 准备一个word模板(docx格式) 前端调用代码 PHP处理代码 one more thing 安装phpword包 通过composer安装phpword包.因为是使用thinkphp架构,安装挺方便的. 直接下载phpword压缩包有问题. composer require phpoffice/phpword 准备一个word模板(docx格式) 准备好word模板后,只需要用变量替换需要替换的值,如下图所示,将房东名替换成${name}. 前端调用代码 系统前

  • Python生成并下载文件后端代码实例

    txt文件 生成并下载txt文件: @app.route('/download', methods=['GET']) def download(): content = "long text" response = make_response(content) response.headers["Content-Disposition"] = "attachment; filename=myfilename.txt" return respons

  • php生成txt文件实例代码介绍

    这是一个朋友过来的 php 生成 txt 文件代码,这只是一个实例,需要我来给他生成多个 txt 文件实例的,但我觉得他这个代码有点意思,所以就分享上来了. 先说下这个 php 生成 txt 文件代码都是什么功能吧,肯定是要生成 txt 文件的,有点废话了,不说其它的了,这个 php 代码可以生成指定目录下的一个 txt 文件,并在 txt 文件里面写入三行文字,这个是在 php 里面定义好的. 夏日博客分享下实例的代码如下: <!doctype html> <html> <

  • python实现对文件中图片生成带标签的txt文件方法

    在深度学习中经常需要生成带标签的图片名称列表,xxxlist.txt文件,下面写一个简单的python脚本生成该文件列表. import os def generate(dir,label): files = os.listdir(dir) files.sort() print '****************' print 'input :',dir print 'start...' listText = open(dir+'\\'+'list.txt','w') for file in f

  • 在远程计算机的CMD内下载FTP文件的方法

    在远程计算机的CMD环境下,如果不能通过IPC$渠道传送文件,那就只有通过FTP下载文件了. 假设我们已经有一个FTP服务器,上面有一个我们配置好的灰鸽子木马文件mhgz.exe,我们应该知道FTP服务器的三个参数: 1.FTP服务器的IP地址:如1.1.1.1 2.FTP服务器的用户名:如test 3.FTP服务器的密 码:如test123 在远程计算机的CMD下依次输入下面的命令: 1.echo open 1.1.1.1>>test.txt 登陆FTP服务器 2.echo test>

  • oracle数据库导入TXT文件方法介绍

    客户端连接数据库导入 1. 安装有oracle客户端,配好监听. 2. 以oracle数据库app用户的表user_svc_info为例 <span style="color:#3333ff;">CREATE TABLE USER_SVC_INFO( PHONE varchar2(20) NOT NULL, SVC_ID varchar2(32) NOT NULL, P_USERNAME varchar2(100) NULL, USER_STATUS number NOT

  • php提交过来的数据生成为txt文件

    一共两个文件,具体链接数据库的部分给直接去除了,前台是提交的文字部分,一行一个,在提交后另一个程序文件进行处理,然后按照提交的文件名生成相应的txt 文件,并在txt 文件中加入数据,在使用之前需要先在根目录下新建 test 文件下. 前台表单文件如下(保存为dcwz.php): <?php error_reporting(0); //require_once("../config.php"); //require_once("../admin/ly_check.php

  • Python txt文件常用读写操作代码实例

    python读取txt文件 #方式一: file = r'D:\test.txt' with open(file, 'rb+') as f: #可读可写二进制,文件若不存在就创建 data = f.readlines() #读取文本所有内容,并且以数列的格式返回结果,一般配合for in使用 print(data) #方式二: file = r'D:\test.txt' f = open(file,"rb+") #可读可写二进制,文件若不存在就创建 data = f.readlines

  • python生成requirements.txt文件的推荐方法

    目录 一.什么是requirements.txt文件及作用 二.怎么生成requirements.txt 文件 1.pip freeze方法(不推荐) 2.pipreqs第三方库(推荐) 补充:setup.py 与 requirements.txt 区别 总结 一.什么是requirements.txt文件及作用 requirements.txt 文件是项目的依赖包及其对应版本号的信息列表,即记载你这个项目所安装的依赖. 作用:用来重新构建项目或者记录项目所需要的运行环境依赖,你从 GitHub

随机推荐