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_ ...
随机推荐
- 知识图谱-生物信息学-医学论文(Chip-2022)-BCKG-基于临床指南的中国乳腺癌知识图谱的构建与应用
16.(2022)Chip-BCKG-基于临床指南的中国乳腺癌知识图谱的构建与应用 论文标题: Construction and Application of Chinese Breast Cance ...
- 知识图谱顶刊综述 - (2021年4月) A Survey on Knowledge Graphs: Representation, Acquisition, and Applications
知识图谱综述(2021.4) 论文地址:A Survey on Knowledge Graphs: Representation, Acquisition, and Applications 目录 知 ...
- python爬虫下载小说
1. from urllib.request import urlopen from urllib import request from bs4 import BeautifulSoup from ...
- 21.drf视图系统组成及继承关系
APIView REST framework提供了一个 APIView 类,它是Django的 View 类的子类. APIView 类和Django原生的类视图的 View 类有以下不同: 传入的请 ...
- ysoserial commonscollections3 分析
cc3利用链如下: TrAXFilter(Templates templates) TemplatesImpl->newTransformer() TemplatesImpl->getTr ...
- python基础类型,字符串
python基本类型小结 # str,可以用索引取值,但是不能通过索引改变值, # a = "123" a[0]=10,直接TypeError因为字符串是不可变类型 # list, ...
- java学习之spring基础
0x00前言 spring框架应用的是ioc模式,ioc模式是指控制反转模式,本质是你不去创建对象让spring框架给你创建对象你去使用对象.多种开发模式通过配置文件和注解的方式去开发的都很值得去学习 ...
- 2021年WebStorm安装破解教程
一.WebStorm工具介绍 WebStorm是一款JavaScript 开发工具,为JavaScript和编译到JavaScript语言.Node.js.HTML和CSS提供了智能编码帮助.享受代码 ...
- 2022春每日一题:Day 39
题目:[USACO1.4]等差数列 Arithmetic Progressions 一个很显然的做法,枚举公差,首项,p,q这样的话复杂度爆炸,不过可以肯定的一点,如果我们这样做,找到了答案就可以直接 ...
- Go实现常用软件设计模式一:单例模式
目录: 举个栗子 概念介绍 使用场景 1.举个栗子 类图 plantuml ``` @startuml'https://plantuml.com/class-diagramclass Elephant ...