常用方式:

/**
* 生成下载文件
* @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. Java注解(1):码农的小秘

    很多码农在写代码的时候不太爱写注释,结果任务一多,时间一长,需求一改,就完全不知道当初自己都干了些啥了.好在现在大多数编程语言都有注释功能,能够在代码里面做一些备注,不至于时间长了忘掉.但这些注释只是 ...

  2. 【算法训练营day4】LeetCode24. 两两交换链表中的结点 LeetCode19. 删除链表的倒数第N个结点 LeetCode面试题 02.07. 链表相交 LeetCode142. 环形链表II

    [算法训练营day4]LeetCode24. 两两交换链表中的结点 LeetCode19. 删除链表的倒数第N个结点 LeetCode面试题 02.07. 链表相交 LeetCode142. 环形链表 ...

  3. 中国制霸生成器「GitHub 热点速览 v.22.42」

    火遍推特的中国制霸生成器本周一开源就占据了两天的 GitHub Trending 榜,不知道你的足迹遍布了多少个省份呢?同样记录痕迹的 kanal 用了内存读写方式解决了 Rust 的消息处理问题,P ...

  4. PyGame做了一个扫雷

    1 # 这是一个示例 Python 脚本. 2 3 # 按 ⌃R 执行或将其替换为您的代码. 4 # 按 双击 ⇧ 在所有地方搜索类.文件.工具窗口.操作和设置. 5 import sys 6 imp ...

  5. Python基础部分:3、 pycharm的下载与使用

    目录 pycharm下载与使用 一.软件说明 二.版本说明 三.如何免费使用正式版软件 四.pycharm运行空间 五.文件后缀名 六.安装pycharm工具 七.pycharm的基本配置和PY文件的 ...

  6. 【lwip】10-ICMP协议&源码分析

    目录 前言 10.1 ICMP简介 10.2 ICMP报文 10.2.1 ICMP报文格式 10.2.2 ICMP报文类型 10.2.3 ICMP报文固定首部字段意义 10.3 ICMP差错报告报文 ...

  7. 论文翻译:2022_DeepFilterNet2: Towards Real-Time Speech Enhancement On Embedded Devices For Fullband Audio

    博客地址:凌逆战 论文地址:DeepFilternet2: 面向嵌入式设备的全波段音频实时语音增强 论文代码:https://github.com/Rikorose/DeepFilterNet 引用格 ...

  8. Json web token(JWT)攻防

    免责声明: 本文章仅供学习和研究使用,严禁使用该文章内容对互联网其他应用进行非法操作,若将其用于非法目的,所造成的后果由您自行承担,产生的一切风险与本文作者无关,如继续阅读该文章即表明您默认遵守该内容 ...

  9. qt quick工程升级,qmake工程升级至cmake

    升级原因 由于音视频工作需要,qt6比qt5的video相关更看重效率. 升级中遇到的问题 在开发的过程中,为了更快速的进行开发,对业务其他不需要代码运行效率的地方使用qml+js的方式进行编写.在升 ...

  10. Day17:稀疏数组的超细详解

    稀疏数组的超细详解 一个含有大量重复元素的二维数组,我们可以提取其有效元素,压缩空间,整合为一个稀疏数组. 例如一个五子棋棋盘,我们将棋盘看作为一个二维数组,没有棋子的位置为0:黑棋为1:白棋为2: ...