工作中有时需要通过 JavaScript 保存文件到本地，我们都知道 JavaScript 基于安全的考虑，是不允许直接操作本地文件的。
IE 可以通过 VB 插件的方式进行，而 Chrome 和 firefox 都不支持 JavaScript 向本地写入文件，所以 VB 插件的方式存在兼容性问题。
那有没有适合的方法呢？答案是肯定的，我们可以通过 FileSaver.js 这个小插件实现我们的需求。下面看一段具体的代码吧：
|
1
2
3
4
5
6
7
8
9
10
11
|
/**
* 下载文件
*/
var
downloadTextFile =
function
(mobileCode) {
if
(isEmpty(mobileCode)) {
mobileCode =
''
;
}
var
file =
new
File([mobileCode],
"手机号.txt"
, { type:
"text/plain;charset=utf-8"
});
saveAs(file);
}
|
这个示例是向本地存储一个名字叫“手机号.txt”的文本文件，采用的字符编码格式为“UTF-8”，这样就避免的中文乱码的问题。聪明的你也赶快试试吧！
附 FileSaver.js 文件的完整源码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
|
/* FileSaver.js
* A saveAs() FileSaver implementation.
* 1.3.2
* 2016-06-16 18:25:19
*
* 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
view ===
"undefined"
||
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 = /constructor/i.test(view.HTMLElement) || view.safari
, is_chrome_ios =/CriOS\/[\d]+/.test(navigator.userAgent)
, throw_outside =
function
(ex) {
(view.setImmediate || view.setTimeout)(
function
() {
throw
ex;
}, 0);
}
, force_saveable_type =
"application/octet-stream"
// the Blob API is fundamentally broken as there is no "downloadfinished" event to subscribe to
, arbitrary_revoke_timeout = 1000 * 40
// 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();
}
};
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)
// note: your browser will automatically convert UTF-16 U+FEFF to EF BB BF
if
(/^\s*(?:text\/\S*|application\/xml|\S*\/\S*\+xml)\s*;.*charset\s*=\s*utf-8/i.test(blob.type)) {
return
new
Blob([String.fromCharCode(0xFEFF), 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
, force = type === force_saveable_type
, object_url
, dispatch_all =
function
() {
dispatch(filesaver,
"writestart progress write writeend"
.split(
" "
));
}
// on any filesys errors revert to saving with object URLs
, fs_error =
function
() {
if
((is_chrome_ios || (force && is_safari)) && view.FileReader) {
// Safari doesn't allow downloading of blob urls
var
reader =
new
FileReader();
reader.onloadend =
function
() {
var
url = is_chrome_ios ? reader.result : reader.result.replace(/^data:[^;]*;/,
'data:attachment/file;'
);
var
popup = view.open(url,
'_blank'
);
if
(!popup) view.location.href = url;
url=undefined;
// release reference before dispatching
filesaver.readyState = filesaver.DONE;
dispatch_all();
};
reader.readAsDataURL(blob);
filesaver.readyState = filesaver.INIT;
return
;
}
// don't create more object URLs than needed
if
(!object_url) {
object_url = get_URL().createObjectURL(blob);
}
if
(force) {
view.location.href = object_url;
}
else
{
var
opened = view.open(object_url,
"_blank"
);
if
(!opened) {
// Apple does not allow window.open, see https://developer.apple.com/library/safari/documentation/Tools/Conceptual/SafariExtensionGuide/WorkingwithWindowsandTabs/WorkingwithWindowsandTabs.html
view.location.href = object_url;
}
}
filesaver.readyState = filesaver.DONE;
dispatch_all();
revoke(object_url);
}
;
filesaver.readyState = filesaver.INIT;
if
(can_use_save_link) {
object_url = get_URL().createObjectURL(blob);
setTimeout(
function
() {
save_link.href = object_url;
save_link.download = name;
click(save_link);
dispatch_all();
revoke(object_url);
filesaver.readyState = filesaver.DONE;
});
return
;
}
fs_error();
}
, FS_proto = FileSaver.prototype
, saveAs =
function
(blob, name, no_auto_bom) {
return
new
FileSaver(blob, name || blob.name ||
"download"
, no_auto_bom);
}
;
// IE 10+ (native saveAs)
if
(
typeof
navigator !==
"undefined"
&& navigator.msSaveOrOpenBlob) {
return
function
(blob, name, no_auto_bom) {
name = name || blob.name ||
"download"
;
if
(!no_auto_bom) {
blob = auto_bom(blob);
}
return
navigator.msSaveOrOpenBlob(blob, name);
};
}
FS_proto.abort =
function
(){};
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(
"FileSaver.js"
,
function
() {
return
saveAs;
});
}
|
1651
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
