再别康桥,JS 下載/另存 csv、excel、txt 、img等文档的方式小结-安博电竞 官网_安博电竞app_anggame安博电竞app

国际新闻 306℃ 0

JS 下载/导出 csv、excel、txt 、img等文件的方私家定制法总结

1. 调用后端接口导出文件

示例下载接口url https://gold-cdn.xitu.io/extension/0.3.9/package.crx

1.1 window.open(url)

会翻开一个新窗口,开端下载后会主动封闭新窗口。Safair 下载后没有封闭新窗口。

Chrome、IE、Safair支撑,形似火狐不支撑

1.2 window.location=url

在当前窗口下载

Chrome、Safair支撑

1.3 iframe

function downloadByIframe (url) {
try {
const iframe = document.createElement('if彭亦飞rame');
iframe.src = url;
iframe.style.display = 'none';
document.body.appendChild(iframe);
} catch (e) {

}
}

在HTML中,iframe 的特点用src,但在JS中,只需部份浏览器支撑修正src(读马丁靴是没问题),真实通用的是要修正对应结构的href值。

function changeIframeSrc (url) {
window.iframes['myIfr天火鹰弓ame'].location.href = url;
}

1.4 点击链接下载

function downloadByAElement (url, fileName) {
try {
const element = document.createElement('a');
element.href = url;
element.download = fileName;
const a = document.body.appendChild(element);
a.click();
document.body.removeChild(element);
} catch (e) {

}
}
downloadByAElement ('https:再别康桥,JS 下載/另存 csv、excel、txt 、img等文档的办法小结-安博电竞 官网_安博电竞app_anggame安博电竞app//gold-cdn.xitu.io/extension/0.3.9/package.crx', 'test');

HTML5中给a标签增加了一个download特点,只需有这个特点,点击这个链接时浏览器就不在翻开链接指向的文件,而是改为下载,现在只需chrome、firefox、opera、Edge支撑。常用此办法点击下载图片。

IE既不支撑a标签的download特点也不答应js调用a 标签的click办法。

2. 前端直接导出文件到本地

2.1 将数据转成DataURI用标签下载

点击链接下载

function saveData2File (data, fileName) {
try {
const element = document.createElement('a');
cosnt uri = getDownloadUri(data);
element.href = uri;
element.download = fileName;
const a = document.body.appendChild(eleme再别康桥,JS 下載/另存 csv、excel、txt 、img等文档的办法小结-安博电竞 官网_安博电竞app_anggame安博电竞appnt);
cosnt evt = document.createEvent('HTMLEvents');
evt.initEvent('click', false, false); // 不加后边两个参数在Firefox上报错
a.dispatchEvent(evt);
document.body.removeChild(element);
} catch (e) {

}
}

留意: 浏览器对href特点的URL长度有约束,若超越浏览器本身约束的最大长度会导致下载失利。

Data URI Scheme

Data URI Scheme是指能够在Web 页面中包括图片但无需任何额定的HTTP 恳求的一类URI。 d2757Data URI Scheme一般用于将经过base64编码的数据嵌入网页中,然后减比翼鸟少恳求资源的链接数。IE8 之前的版别都不支撑 data URI scheme。

Dat再别康桥,JS 下載/另存 csv、excel、txt 、img等文档的办法小结-安博电竞 官网_安博电竞app_anggame安博电竞appaURI的格局:

data: [][;charset=][;],
  • data: 协陆小凤议称号
  • [] 可选项,数据类型,常用的有 image/png, image/svg+xml, text/plain
  • [;charset=] 可选项,源文本的字符集编码办法。[][;charset=] 的缺省值为HTTP Header 中Content-Type的字段值;
  • [;] 数据编码办法(有US-ASCII,BASE64 两种),默认值为US-ASCII,便是每个字符会编码为%xx的办法
  • , 编码后的数据, 丫丫假如 不是以 [;] 办法编码的数据,则会报反常

生成DataURI的办法

1. encodeURIComponent

function getDownloadUri (data) {
const mimeType = 'attachment/csv';
const charset = ';charset=utf-8,';
const _utf = '\\uFEFF'; // 为了使文件以utf-8的编码形式,一起也是处理中文乱码的问题
return 'data:' + mimeType + charset + _utf + encodeURIComponent(data)
}

运用这种办法,当数据过多时,URI长度简单超出浏览器约束。 encodeURIComponent常用来转码接口参数,为了防止服务器收到不行预知的恳求,对任何用户输入的作为URI部分的内容都需求用encodeURIComponent进行转义。

2. URL.c喜形于色reateObjectURL

URL.createObjec姓氏排名tURL的参数是File目标或许Blob目标

  • File目标也便是经过桜都字幕组input[type=file]挑选的文件
  • Blob目标表明一个不行变、原始数据的类文件目标

IE10以下不支撑URL.韩雯雯createObjectURL

function getDownloadUri (data) {
const _utf = '\\uFEFF'; // 为了使文件以utf-8的编码形式,一起也是处理中文乱码的问题
if (window.Blob && window.URL && window.URL.createObjectURL) {
const blob = new Blob([_utf + data], {
type: 'text/json' // 写自己需求的数据格局
});
return URL.createObjectURL(blob);
}
}

2.2 windows.navigator.msSaveBlob IE10~Edge 专用

msSaveBlob 是IE10~Edge 私有办法。

function downloadByMsSaveBlob (data) {
const _utf = '\\uFEFF';
var blob = new Blob([_utf + data], {
type: 'text/json' // 自己需求的数据格局
});
navigator.msSaveBlob(_csvData, fileName);
}

2.3 execCommand

当一个HTML文档切换到规划形式时,document露出 execCommand 办法,该办法答应运转指令来操作可修改内容区域的元素再别康桥,JS 下載/另存 csv、excel、txt 、img等文档的办法小结-安博电竞 官网_安博电竞app_anggame安博电竞app。

有的材料有说到IE9能够运用execCommand办法来保存数据到本地文件,可是我自己没有验证过,不知道是否可行。并且MDN文档中execCommand没有查到SaveAs指令。这块仅仅做个小记载。

function saveFileByExecCommand (data, fileName) {
const newWindow = window.top.open('about:blank', '_blank');
newWindow.document.write('sep=,\r\n' + data);
newWindow.document.close();
newWindow.document.execCommand('SaveAs', false, fileName);
newWindow.close();
}

js数据直接导出/下载数据到本地到再别康桥,JS 下載/另存 csv、excel、txt 、img等文档的办法小结-安博电竞 官网_安博电竞app_anggame安博电竞app办法总结

function saveData2F壁纸少女ile (data, fileName) {
const bw = getBrowser(); // 获取浏览器信息
if (!bw['edge'] || !bw['ie']) {
const element = document.createElement('a');
cosnt uri = getDownloadUri(data);
element.href = uri;
element.download = fil再别康桥,JS 下載/另存 csv、excel、txt 、img等文档的办法小结-安博电竞 官网_安博电竞app_anggame安博电竞appeName;
const a = document.body.appendChild(element);
cosnt evt = document.createEvent('HTMLEvents');
evt.initEvent('click', false, false); // 不加后边两个参数在Firefox上报错
a.dispatchEvent(evt);
document.body.removeChild(element);
} else if (bw['ie'] >= 10 || bw['edge'山东政法学院] === 'edge') {
const blob = qtujcreateBlob(data);
navigator.msSaveBlob(blob,浦城气候 fileName);
}
}
function getBr我的国际皮肤站owser () {
const sys = {};
const ua = navigator.userAgent.toLowerCase();
if再别康桥,JS 下載/另存 csv、excel、txt 、img等文档的办法小结-安博电竞 官网_安博电竞app_anggame安博电竞app (ua.indexOf('edge') !== -1) {
sys.edge = 'edge';
} else if (ua.match(/rv:([\d.]+)\) like gecko/)) {
sys.ie = ua.match(/rv:([\d.]+)\) like gecko/)[1];
} else if (ua.match(/msie ([\d.]+)/)) {
sys.ie = ua.match(/msie ([\d.]+)/)[1];
} else if (ua.match(/firefox\/([\d.]+)/)) {
sys.firefox = ua.match(/firefox\/([\d.]+)/)[1];
} else if (ua.match(/chrome\/([\d.]+)/)) {
sys.chrome = ua垂钓视频.match(/chrome\/([\d.]+)/)[1];
} else if (ua.match(/opera.([\d.]+)/)) {
sys.opera = ua.match(/opera.(麦当劳优惠券[\d.]+)/)[1];
} else if (ua.match(/version\/([\d.]+).*safari/)) {
sys.safari = ua.match(/version\/([\d.]+).*safari/)[1];
}
return sys;
}

本文转载自:https://juejin.im/post/5cd00253518825418f6f2a8c?utm_source=gold_browser_extension

标签: h图菜花