常用方式:

/**
* 生成下载文件
* @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. MySQL精华笔记

    1.mysql分为 server 层和存储引擎: server 层: 1.连接器:管理连接权限验证 2.查询缓存:命中缓存直接换回查询结果 3.分析器:分析语法 4.优化器:生成执行计划,选择索引 5 ...

  2. 2022-08-21-Freewind主题_cdn替换版

    layout: post cid: 16 title: Freewind主题 cdn替换版 slug: 16 date: 2022/08/21 14:06:00 updated: 2022/08/21 ...

  3. 死锁与Lock锁

    死锁1.死锁的理解:不同的线程分别占用对方需要的同步资源不放弃,都在等待对方放弃自己需要的同步资源,就形成了线程的死锁 2.说明: 1)出现死锁后,不会出现异常,不会出现提示,只是所有的线程都处于阻塞 ...

  4. 人人都懂的HTML基础知识-HTML教程(1)

    01.HTML基础简介 HTML (HyperText Markup Language,超文本标记语言) 不是一门编程语言,而是一种用于定义内容结构的标记语言,用来描述网页内容,文件格式为.html. ...

  5. XPAND模板语言语法1.0

    XPAND模板语言语法1.0 Xpand模板语言一般写在以.xpt为结尾的文本文件中 ,以"« »" 作为开头和结尾  .Xpand语言主要包括以下几个标签: «IMPORT», ...

  6. [Go疑难杂症]为什么nil不等于nil

    现象 在日常开发中,可能一不小心就会掉进 Go 语言的某些陷阱里,而本文要介绍的 nil ≠ nil 问题,便是其中一个,初看起来会让人觉得很诡异,摸不着头脑. 先来看个例子: type Custom ...

  7. 创建外部表步骤及解决ORA-29913:执行ODCIETTABLEOPEN调出时出错

    创建外部表步骤 建立目录对象(用sys用户创建.授权) 外部表所在路径一定要写对!!! create directory ext_data as 'D:\ORACLE'; grant read,wri ...

  8. vue 使用vuex 刷新时保存数据

    created () { this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(localStorage.getIte ...

  9. ANSYS安装教程

    ANSYS 16.0 WIN10 64位安装步骤:1.使用"百度网盘客户端"下载ANSYS 16.0软件安装包到电脑磁盘里全英文名称文件夹内,安装前先断开网络,然后找到ANSYS. ...

  10. HTTPS 基础知识(密钥、对称加密、非对称加密、数字签名、数字证书)

    HTTPS 概述 对称加密 非对称加密 非对称加密改良方案 非对称加密 + 对称加密 中间人攻击 数字证书 数字签名 HTTPS 工作原理 HTTPS 概述 HTTPS(全称:Hyper Text T ...