常用方式:

/**
* 生成下载文件
* @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. 华为设备配置ssh-client命令

    ssh client first-time enable 开启首次认证功能不对ssh服务器的RSA公钥进行有效性验证 stelnet 10.1.1.2 登陆R2 sys 进入到R2的系统视图 disp ...

  2. python基础作业2

    目录 编写一个用户认证装饰器 利用有参装饰器编写多种用户登录校验策略 利用递归函数依次打印列表中每一个数据值 获取用户权限并校验用户登录 编写一个用户认证装饰器 """ ...

  3. win10+ubuntu双系统的坑

    1.把U盘里\EFI\BOOT\grubx64.efi文件重命名为mmx64.efi,避免系统提示缺少文件而退出安装: 2.如果电脑显卡为N卡,则在install Ubuntu时,按e进入编辑,在qu ...

  4. Python基础部分:5、 python语法之变量与常量

    目录 python语法之变量与常量 一.什么是变量与常量 1.什么是变量 2.什么是常量 二.变量的基本使用 1.代码中如何记录事物状态 2.变量使用的语法结构与底层原理 3.变量名的命名规范 4.变 ...

  5. Linux系统安装python

    1. 安装python3 1.1 下载python3安装包及其依赖包(该步骤可忽略,步骤1.2 提供应用包链接) ① 在python官网下载所需的python3,或者用外网centos机器的wget命 ...

  6. CH58X/CH57X/V208 Observer(观察者)例程讨论讲解

    使用的是沁恒的CH582M的Observer例程与官方的demo板. 本例程的功能是主机扫描到从机的MAC地址并打印出来. 先对宏定义进行理解讨论. 最大响应扫描数为8,在串口调试助手那里可以看到打印 ...

  7. Git 分支管理策略汇总

    原文链接: Git 分支管理策略 最近,团队新入职了一些小伙伴,在开发过程中,他们问我 Git 分支是如何管理的,以及应该怎么提交代码? 我大概说了一些规则,但仔细想来,好像也并没有形成一个清晰规范的 ...

  8. Codeforces Round #833 (Div. 2)补题

    Codeforces Round #833 (Div. 2) D. ConstructOR 知识点:高位和对低位无影响 一开始以为和广州的M一样,是数位dp,后来发现只要找到一个就行 果然无论什么时候 ...

  9. Java 中九种 Map 的遍历方式,你一般用的是哪种呢?

    日常工作中 Map 绝对是我们 Java 程序员高频使用的一种数据结构,那 Map 都有哪些遍历方式呢?这篇文章阿粉就带大家看一下,看看你经常使用的是哪一种. 通过 entrySet 来遍历 1.通过 ...

  10. 3.5:基于Python的KNN算法简单实现

    〇.目标 1.使用pycharm工具创建项目demo: 2.使用python语言实现KNN算法. 一.创建脚本文件 二.编写KNN算法程序 KNN算法所阐述的核心思想在KNN.py文件的注释部分具有详 ...