JavaScript 实现前端文件下载

火宫殿烧鹅 發表於 2020-5-5 14:47:00

<h2 id="h2_1">A.download</h2>
HTML5的A标签有一个<code>download</code>属性，可以告诉浏览器下载而非预览文件，很实用，参考链接：http://www.zhangxinxu.com/wordpress/2016/04/know-about-html-download-attribute/
有时候，WEB端临时创建了一个文件，供用户下载，怎么办呢？示例如下：
<pre><code class="hljs javascript">// 从canvas提取图片数据
var raw = ctx.getImageData(0, 0, 300, 300);
// 压缩为JPEG图片
// https://github.com/owencm/javascript-jpeg-encoder
var 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);
}</code> </pre>
<h2 id="h2_2">FileSaver.js</h2>
这是另一种方案，效果也不错。这里推荐FileSaver.js
https://github.com/ChenWenBrian/FileSaver.js
调用方法：
var blob = new Blob(, {type: "text/plain;charset=utf-8"});
saveAs(blob, "content.csv");
这里还有一段原作者的博文。
最后，贴出JS便于查看：
<div class="cnblogs_code">
<pre>/* 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 \./.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];
 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 window

if (typeof module !== "undefined" && module.exports) {
module.exports.saveAs = saveAs;
} else if ((typeof define !== "undefined" && define !== null) && (define.amd != null)) {
define([], function() {
return saveAs;
});
}</pre>
</div>
  
来源：https://www.cnblogs.com/tiandi/p/12830733.html

頁: [1]

琼殿技术论坛's Archiver

JavaScript 实现前端文件下载