侧边栏壁纸
博主头像
落叶人生博主等级

走进秋风,寻找秋天的落叶

  • 累计撰写 130555 篇文章
  • 累计创建 28 个标签
  • 累计收到 9 条评论
标签搜索

目 录CONTENT

文章目录

FileSaver&Download

2024-05-09 星期四 / 0 评论 / 0 点赞 / 9 阅读 / 9958 字

A.downloadHTML5的A标签有一个download属性,可以告诉浏览器下载而非预览文件,很实用,参考链接:http://www.zhangxinxu.com/wordpress/2016/0

A.download

HTML5的A标签有一个download属性,可以告诉浏览器下载而非预览文件,很实用,参考链接:http://www.zhangxinxu.com/wordpress/2016/04/know-about-html-download-attribute/

有时候,WEB端临时创建了一个文件,供用户下载,怎么办呢?示例如下:

// 从canvas提取图片数据var raw = ctx.getImageData(0, 0, 300, 300);// 压缩为JPEG图片// https://github.com/owencm/javascript-jpeg-encodervar jpegURI = (new JPEGEncoder()).encode(raw, 75);// 弹出对话框,交由用户保存图片saveFile(jpegURI, '文件名');// saveFile函数function saveFile(d, a) {    var b = document.createElement('a');    b.href = d;    b.download = a;    var c = document.createEvent("MouseEvents");    c.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);    b.dispatchEvent(c);}

FileSaver.js

这是另一种方案,效果也不错。这里推荐FileSaver.js修改版。

这里还有一段原作者的博文。

最后,贴出JS便于查看:

/* FileSaver.js * A saveAs() FileSaver implementation. * 1.1.20151003 * * By Eli Grey, http://eligrey.com * License: MIT *   See https://github.com/eligrey/FileSaver.js/blob/master/LICENSE.md *//*global self *//*jslint bitwise: true, indent: 4, laxbreak: true, laxcomma: true, smarttabs: true, plusplus: true *//*! @source http://purl.eligrey.com/github/FileSaver.js/blob/master/FileSaver.js */var saveAs = saveAs || (function(view) {	"use strict";	// IE <10 is explicitly unsupported	if (typeof navigator !== "undefined" && /MSIE [1-9]/./.test(navigator.userAgent)) {		return;	}	var		  doc = view.document		  // only get URL when necessary in case Blob.js hasn't overridden it yet		, get_URL = function() {			return view.URL || view.webkitURL || view;		}		, save_link = doc.createElementNS("http://www.w3.org/1999/xhtml", "a")		, can_use_save_link = "download" in save_link		, click = function(node) {			var event = new MouseEvent("click");			node.dispatchEvent(event);		}		, is_safari = /Version//[/d/.]+.*Safari/.test(navigator.userAgent)		, webkit_req_fs = view.webkitRequestFileSystem		, req_fs = view.requestFileSystem || webkit_req_fs || view.mozRequestFileSystem		, throw_outside = function(ex) {			(view.setImmediate || view.setTimeout)(function() {				throw ex;			}, 0);		}		, force_saveable_type = "application/octet-stream"		, fs_min_size = 0		// See https://code.google.com/p/chromium/issues/detail?id=375297#c7 and		// https://github.com/eligrey/FileSaver.js/commit/485930a#commitcomment-8768047		// for the reasoning behind the timeout and revocation flow		, arbitrary_revoke_timeout = 500 // in ms		, revoke = function(file) {			var revoker = function() {				if (typeof file === "string") { // file is an object URL					get_URL().revokeObjectURL(file);				} else { // file is a File					file.remove();				}			};			if (view.chrome) {				revoker();			} else {				setTimeout(revoker, arbitrary_revoke_timeout);			}		}		, dispatch = function(filesaver, event_types, event) {			event_types = [].concat(event_types);			var i = event_types.length;			while (i--) {				var listener = filesaver["on" + event_types[i]];				if (typeof listener === "function") {					try {						listener.call(filesaver, event || filesaver);					} catch (ex) {						throw_outside(ex);					}				}			}		}		, auto_bom = function(blob) {			// prepend BOM for UTF-8 XML and text/* types (including HTML)			if (/^/s*(?:text///S*|application//xml|/S*///S*/+xml)/s*;.*charset/s*=/s*utf-8/i.test(blob.type)) {				return new Blob(["/ufeff", blob], {type: blob.type});			}			return blob;		}		, FileSaver = function(blob, name, no_auto_bom) {			if (!no_auto_bom) {				blob = auto_bom(blob);			}			// First try a.download, then web filesystem, then object URLs			var				  filesaver = this				, type = blob.type				, blob_changed = false				, object_url				, target_view				, dispatch_all = function() {					dispatch(filesaver, "writestart progress write writeend".split(" "));				}				// on any filesys errors revert to saving with object URLs				, fs_error = function() {					if (target_view && is_safari && typeof FileReader !== "undefined") {						// Safari doesn't allow downloading of blob urls						var reader = new FileReader();						reader.onloadend = function() {							var base64Data = reader.result;							target_view.location.href = "data:attachment/file" + base64Data.slice(base64Data.search(/[,;]/));							filesaver.readyState = filesaver.DONE;							dispatch_all();						};						reader.readAsDataURL(blob);						filesaver.readyState = filesaver.INIT;						return;					}					// don't create more object URLs than needed					if (blob_changed || !object_url) {						object_url = get_URL().createObjectURL(blob);					}					if (target_view) {						target_view.location.href = object_url;					} else {						var new_tab = view.open(object_url, "_blank");						if (new_tab == undefined && is_safari) {							//Apple do not allow window.open, see http://bit.ly/1kZffRI							view.location.href = object_url						}					}					filesaver.readyState = filesaver.DONE;					dispatch_all();					revoke(object_url);				}				, abortable = function(func) {					return function() {						if (filesaver.readyState !== filesaver.DONE) {							return func.apply(this, arguments);						}					};				}				, create_if_not_found = {create: true, exclusive: false}				, slice			;			filesaver.readyState = filesaver.INIT;			if (!name) {				name = "download";			}			if (can_use_save_link) {				object_url = get_URL().createObjectURL(blob);				save_link.href = object_url;				save_link.download = name;				setTimeout(function() {					click(save_link);					dispatch_all();					revoke(object_url);					filesaver.readyState = filesaver.DONE;				});				return;			}			// Object and web filesystem URLs have a problem saving in Google Chrome when			// viewed in a tab, so I force save with application/octet-stream			// http://code.google.com/p/chromium/issues/detail?id=91158			// Update: Google errantly closed 91158, I submitted it again:			// https://code.google.com/p/chromium/issues/detail?id=389642			if (view.chrome && type && type !== force_saveable_type) {				slice = blob.slice || blob.webkitSlice;				blob = slice.call(blob, 0, blob.size, force_saveable_type);				blob_changed = true;			}			// Since I can't be sure that the guessed media type will trigger a download			// in WebKit, I append .download to the filename.			// https://bugs.webkit.org/show_bug.cgi?id=65440			if (webkit_req_fs && name !== "download") {				name += ".download";			}			if (type === force_saveable_type || webkit_req_fs) {				target_view = view;			}			if (!req_fs) {				fs_error();				return;			}			fs_min_size += blob.size;			req_fs(view.TEMPORARY, fs_min_size, abortable(function(fs) {				fs.root.getDirectory("saved", create_if_not_found, abortable(function(dir) {					var save = function() {						dir.getFile(name, create_if_not_found, abortable(function(file) {							file.createWriter(abortable(function(writer) {								writer.onwriteend = function(event) {									target_view.location.href = file.toURL();									filesaver.readyState = filesaver.DONE;									dispatch(filesaver, "writeend", event);									revoke(file);								};								writer.onerror = function() {									var error = writer.error;									if (error.code !== error.ABORT_ERR) {										fs_error();									}								};								"writestart progress write abort".split(" ").forEach(function(event) {									writer["on" + event] = filesaver["on" + event];								});								writer.write(blob);								filesaver.abort = function() {									writer.abort();									filesaver.readyState = filesaver.DONE;								};								filesaver.readyState = filesaver.WRITING;							}), fs_error);						}), fs_error);					};					dir.getFile(name, {create: false}, abortable(function(file) {						// delete file if it already exists						file.remove();						save();					}), abortable(function(ex) {						if (ex.code === ex.NOT_FOUND_ERR) {							save();						} else {							fs_error();						}					}));				}), fs_error);			}), fs_error);		}		, FS_proto = FileSaver.prototype		, saveAs = function(blob, name, no_auto_bom) {			return new FileSaver(blob, name, no_auto_bom);		}	;	// IE 10+ (native saveAs)	if (typeof navigator !== "undefined" && navigator.msSaveOrOpenBlob) {		return function(blob, name, no_auto_bom) {			if (!no_auto_bom) {				blob = auto_bom(blob);			}			return navigator.msSaveOrOpenBlob(blob, name || "download");		};	}	FS_proto.abort = function() {		var filesaver = this;		filesaver.readyState = filesaver.DONE;		dispatch(filesaver, "abort");	};	FS_proto.readyState = FS_proto.INIT = 0;	FS_proto.WRITING = 1;	FS_proto.DONE = 2;	FS_proto.error =	FS_proto.onwritestart =	FS_proto.onprogress =	FS_proto.onwrite =	FS_proto.onabort =	FS_proto.onerror =	FS_proto.onwriteend =		null;	return saveAs;}(	   typeof self !== "undefined" && self	|| typeof window !== "undefined" && window	|| this.content));// `self` is undefined in Firefox for Android content script context// while `this` is nsIContentFrameMessageManager// with an attribute `content` that corresponds to the windowif (typeof module !== "undefined" && module.exports) {  module.exports.saveAs = saveAs;} else if ((typeof define !== "undefined" && define !== null) && (define.amd != null)) {  define([], function() {    return saveAs;  });}

广告 广告

评论区