JS生成下载文件
常用方式:
/**
* 生成下载文件
* @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生成下载文件的更多相关文章
- 用js生成下载文件
function downloadFile(fileName, content) { var aLink = document.createElement('a'); var blob = new B ...
- asp.net mvc + javascript生成下载文件
近期做的是对现有项目进行重构.WEB FROM改成MVC,其实也算是推倒重来了. 里面有一个导出功能,将数据输出成txt文件,供下载.原先的做法是有一个隐藏的iframe,在这个iframe的页面中设 ...
- js批量下载文件
关于兼容性问题: <a href="xxx.docx" target='_blank'></a> 下载文件时,这种写法是没有兼容性问题:但是下载图 ...
- js异步下载文件请求
注意 :通常下载文件是用get请求 window.location.href=url; 但是 我们需要下载完成监听,所以必须要异步执行.用常规的ajax是不可以的.我们要用blob对象来实现1.原生的 ...
- js生成txt文件
HTML CODE: <div class="modal-footer"> <a onfocus="this.blur();" id=&quo ...
- Flask 生成下载文件
1 后台程序直接生成文件内容 from flask import make_response @app.route('/testdownload', methods=['GET']) def test ...
- JS生成PDF文件
代码: var pdf = new jsPDF('p','pt','a4'); pdf.internal.scaleFactor = 1; //可以调整缩放比例 var options = { //p ...
- js 生成 pdf 文件
话不多说好吧, 直接上demo图: 直接上代码好吧:(要引入的两个js 链接我放最后) <!DOCTYPE html> <html> <head> <met ...
- js创建下载文件
function downloadFile(fileName, content){ var aLink = document.createElement('a'); var blob = new Bl ...
- js post 下载文件
function DownLoadPost(url,data) { if (url && data) { var form = $('<form>{{ xsrf_form_ ...
随机推荐
- typora的简单使用
一级标题 #+空格 或者快捷键ctrl+1 二级标题 ##+空格 或者快捷键ctrl+2 三级标题 ###+空格 或者快捷键ctrl+3 调试模式 开启调试模式:快捷键shift+F12 字体 Hel ...
- Mybatis-Plus多表联查
表格结构: CREATE TABLE `ssmpdemo`.`person_test` ( `id` varchar(32) CHARACTER SET utf8 COLLATE utf8_gener ...
- C# 语法分析器(二)LR(0) 语法分析
系列导航 (一)语法分析介绍 (二)LR(0) 语法分析 (三)LALR 语法分析 (四)二义性文法 (五)错误恢复 (六)构造语法分析器 首先,需要介绍下 LALR 语法分析的基础:LR(0) 语法 ...
- Oracle数据泵导入dmp文件,报UDI-00013、UDI-00019错误原因
这个问题挺简单,想了想,还是记录下吧. [root@ufdb165 bin]# ./impdp cwy_init0914/cwy_123456789@ufgovdb1 directory=DATA_P ...
- ElasticSearch 常见问题
ElasticSearch 常见问题 丈夫有泪不轻弹,只因未到伤心处. 1.说说 es 的一些调优手段. 仅索引层面调优手段: 1.1.设计阶段调优 (1)根据业务增量需求,采取基于日期模板创建索引, ...
- Node.js 的学习(四)分别连接MongoDB与MySQL数据库,实现增删查改功能
一.Node.js 访问MongoDB 数据库 MongoDB 对许多平台都提供驱动可以访问数据库,如C#.Java.Node.js等. 1.1.安装MongoDB访问驱动 命令如下: 全局安装驱动: ...
- Node.js的学习(三)node.js 开发web后台服务
一.Express -- Web开发框架 1.Express是什么? Express 是一个简洁而灵活.目前最流行的基于Node.js的Web开发框架, 提供了一系列强大特性帮助你创建各种 Web 应 ...
- mybatis-plus分页失效原因
mybatis-plus分页失效解决方法 方法一.在启动类添加如下配置 @SpringBootApplication @MapperScan("com.**.mapper") pu ...
- Stream流使用
Stream流的使用 转换为流的操作 map转换为stream流 Map map = new HashMap(); Set<Map.Entry<String,Integer>> ...
- xmind下载安装破解版激活教程思维导图软件获取
1.xmind下载解压压缩包就可以看到里面的文件,然后双击安装文件就可以开始安装了 2.安装Xmind程序双击之后会出现下面的流程,照着截图操作,不要乱点哈 切记切记!!这一步直接点击next,不要修 ...