常用方式:

/**
* 生成下载文件
* @param {Object} filename
* @param {Object} text
*/
function download(filename, text) {
var pom = document.createElement('a');
pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
pom.setAttribute('download', filename);
if (document.createEvent) {
var event = document.createEvent('MouseEvents');
event.initEvent('click', true, true);
pom.dispatchEvent(event);
} else {
pom.click();
}
}

常用方式改进版(推荐):

转成文件再下载,字符串/文件 特别大时(上百兆)此处理方式内存不会溢出

/**
* 生成下载文件
* @param {Object} filename 文件名
* @param {Object} text 内容
*/
function download(filename, text) {
var urlObject = window.URL || window.webkitURL || window;
var export_blob = new Blob([text]);
var save_link = document.createElement("a")
save_link.href = urlObject.createObjectURL(export_blob);
save_link.download = filename;
if (document.createEvent) {
var event = document.createEvent('MouseEvents');
event.initEvent('click', true, true);
save_link.dispatchEvent(event);
} else {
save_link.click();
}
}

其它:

/**
* 将url文件下载到本地
* @param fileUrl {String} 文件链接
* @param fileName {String} 文件名字
* @return void
*/
async function downloadFile(fileUrl,fileName) {
let blob = await getBlob(fileUrl);
saveFile(blob, fileName);
}

function getBlob(fileUrl) {
return new Promise(resolve => {
const xhr = new XMLHttpRequest();
xhr.open('GET', fileUrl, true);
//监听进度事件
xhr.addEventListener(
'progress',
function (evt) {
if (evt.lengthComputable) {
let percentComplete = evt.loaded / evt.total;
// percentage是当前下载进度,可根据自己的需求自行处理
let percentage = percentComplete * 100;
}
},
false
);
xhr.responseType = 'blob';
xhr.onload = () => {
if (xhr.status === 200) {
resolve(xhr.response);
}
};
xhr.send();
});
}

function saveFile(blob, fileName) {
// ie的下载
if (window.navigator.msSaveOrOpenBlob) {
navigator.msSaveBlob(blob, filename);
} else {
// 非ie的下载
const link = document.createElement('a');
const body = document.querySelector('body'); link.href = window.URL.createObjectURL(blob);
link.download = fileName; // fix Firefox
link.style.display = 'none';
body.appendChild(link); link.click();
body.removeChild(link); window.URL.revokeObjectURL(link.href);
}
}

JS生成下载文件的更多相关文章

  1. 用js生成下载文件

    function downloadFile(fileName, content) { var aLink = document.createElement('a'); var blob = new B ...

  2. asp.net mvc + javascript生成下载文件

    近期做的是对现有项目进行重构.WEB FROM改成MVC,其实也算是推倒重来了. 里面有一个导出功能,将数据输出成txt文件,供下载.原先的做法是有一个隐藏的iframe,在这个iframe的页面中设 ...

  3. js批量下载文件

    ​关于兼容性问题:   <a href="xxx.docx" target='_blank'></a>   下载文件时,这种写法是没有兼容性问题:但是下载图 ...

  4. js异步下载文件请求

    注意 :通常下载文件是用get请求 window.location.href=url; 但是 我们需要下载完成监听,所以必须要异步执行.用常规的ajax是不可以的.我们要用blob对象来实现1.原生的 ...

  5. js生成txt文件

    HTML CODE: <div class="modal-footer"> <a onfocus="this.blur();" id=&quo ...

  6. Flask 生成下载文件

    1 后台程序直接生成文件内容 from flask import make_response @app.route('/testdownload', methods=['GET']) def test ...

  7. JS生成PDF文件

    代码: var pdf = new jsPDF('p','pt','a4'); pdf.internal.scaleFactor = 1; //可以调整缩放比例 var options = { //p ...

  8. js 生成 pdf 文件

    话不多说好吧, 直接上demo图: 直接上代码好吧:(要引入的两个js  链接我放最后) <!DOCTYPE html> <html> <head> <met ...

  9. js创建下载文件

    function downloadFile(fileName, content){ var aLink = document.createElement('a'); var blob = new Bl ...

  10. js post 下载文件

    function DownLoadPost(url,data) { if (url && data) { var form = $('<form>{{ xsrf_form_ ...

随机推荐

  1. linux 安装/卸载go环境

    linux 安装/卸载go环境(基于centos8) 安装 下载go的安装包 Golang官网下载地址:https://golang.org/dl/ 将安装包解压放到到usr/local中,并解压 c ...

  2. spark之交集并集差集拉链

    spark之交集并集差集拉链 def main(args: Array[String]): Unit = { val sparkConf = new SparkConf().setMaster(&qu ...

  3. 微服务组件--注册中心Spring Cloud Eureka分析

    Eureka核心功能点 [1]服务注册(register):Eureka Client会通过发送REST请求的方式向Eureka Server注册自己的服务,提供自身的元数据,比如ip地址.端口.运行 ...

  4. 抛砖系列之redis监控命令

    前言 redis是一款非常流行的kv数据库,以高性能著称,其高吞吐.低延迟等特性让广大开发者趋之若鹜,每每看到别人发出的redis故障报告都让我产生一种居安思危,以史为鉴的危机感,恰逢今年十一西安烟雨 ...

  5. 题解 AT2361 [AGC012A] AtCoder Group Contest

    \(\sf{Solution}\) 显然要用到贪心的思想. 既然最终的结果只与每组强度第二大选手有关,那就考虑如何让他的值尽可能大. 其实,从小到大排个序就能解决,越靠后的值越大,使得每组强度第二大选 ...

  6. 十二、Pod的NameSpace

    Pod 的 NameSpace 一.Pod 的 NameSpace 使用 kubectl 管理命名空间及其包含的资源相当简单.在这一节中,我们将演示一些最常见的命名空间操作,便于你开始有效地分割资源. ...

  7. shell脚本之一键部署openV~P~N

    提前准备:/root目录下: checkpsw.sh ## 官方提供的自定义脚本,可在http://openvpn.se/files/other/checkpsw.sh下载 openvpn@.serv ...

  8. JS学习笔记 (五) 函数进阶

    1.函数基础 1.1 函数的基本概念 函数是一段JavaScript代码,只被定义一次,但是可以被调用或者执行许多次.函数是一种对象,可以设置属性,或调用方法. 函数中的参数分为实参和形参.其中,形参 ...

  9. Modbus协议及python库实现

    基础知识 硬件层协议:解决0和1的可靠传输,常有RS232.RS485.CAN.IIC.SPI - 软件层协议:解决传输目的,常有Modbus.TCP/IP.CANopen - 协议优点: Modbu ...

  10. 【题解】CF356A Knight Tournament

    题面传送门 本蒟蒻想练习一下并查集,所以是找并查集标签来这里的.写题解加深理解. 解决思路 自然,看到区间修改之类很容易想到线段树,但本蒟蒻线段树会写挂,所以这里就讲比较简单的并查集思路. 并查集的核 ...