forked from caa1211/webOAcard
-
Notifications
You must be signed in to change notification settings - Fork 0
/
saveFile_big5.html
171 lines (156 loc) · 7.44 KB
/
saveFile_big5.html
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
<!DOCTYPE html>
<html>
<head>
<title>Save Generated Data</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1"/>
<script type="text/javascript" src="utf8tobig5.js"></script>
<script type="text/javascript">
// <![CDATA[
var showSave;
// Feature test: Does this browser support the download attribute on anchor tags? (currently only Chrome)
var DownloadAttributeSupport = 'download' in document.createElement('a');
// Use any available BlobBuilder/URL implementation:
var BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder || window.MSBlobBuilder;
var URL = window.URL || window.webkitURL || window.mozURL || window.msURL;
// IE 10 has a handy navigator.msSaveBlob method. Maybe other browsers will emulate that interface?
// See: http://msdn.microsoft.com/en-us/library/windows/apps/hh441122.aspx
navigator.saveBlob = navigator.saveBlob || navigator.msSaveBlob || navigator.mozSaveBlob || navigator.webkitSaveBlob;
// Anyway, HMTL5 defines a very similar but more powerful window.saveAs function:
// http://www.w3.org/TR/file-writer-api/#the-filesaver-interface
window.saveAs = window.saveAs || window.webkitSaveAs || window.mozSaveAs || window.msSaveAs;
// However, this is not supported by any browser yet. But there is a compatibility library that
// adds this function to browsers that support Blobs (except Internet Exlorer):
// http://eligrey.com/blog/post/saving-generated-files-on-the-client-side
// https://github.com/eligrey/FileSaver.js
// mime types that (potentially) don't trigger a download when opened in a browser:
var BrowserSupportedMimeTypes = {
"image/jpeg": true,
"image/png": true,
"image/gif": true,
"image/svg+xml": true,
"image/bmp": true,
"image/x-windows-bmp": true,
"image/webp": true,
"audio/wav": true,
"audio/mpeg": true,
"audio/webm": true,
"audio/ogg": true,
"video/mpeg": true,
"video/webm": true,
"video/ogg": true,
"text/plain": true,
"text/html": true,
"text/xml": true,
"application/xhtml+xml": true,
"application/json": true
};
// Blobs and saveAs (or saveBlob) :
if (BlobBuilder && (window.saveAs || navigator.saveBlob)) {
// Currently only IE 10 supports this, but I hope other browsers will also implement the saveAs/saveBlob method eventually.
showSave = function (data, name, mimeType) {
// var builder = new BlobBuilder();
// builder.append(data);
// var blob = builder.getBlob(mimetype||"application/octet-stream");
var blob = new Blob([data], {type: mimetype||"application/octet-stream"});
if (!name) name = "Download.bin";
// I don't assign saveAs to navigator.saveBlob (or the other way around)
// because I cannot know at this point whether future implementations
// require these methods to be called with 'this' assigned to window (or
// naviagator) in order to work. E.g. console.log won't work when not called
// with this === console.
if (window.saveAs) {
window.saveAs(blob, name);
}
else {
navigator.saveBlob(blob, name);
}
};
}
// Blobs and object URLs:
else if (BlobBuilder && URL) {
// Currently WebKit and Gecko support BlobBuilder and object URLs.
showSave = function (data, name, mimetype) {
var blob, url, builder = new BlobBuilder();
builder.append(data);
if (!mimetype) mimetype = "application/octet-stream";
if (DownloadAttributeSupport) {
blob = new Blob([data], {type: mimetype||"application/octet-stream"});
url = URL.createObjectURL(blob);
// Currently only Chrome (since 14-dot-something) supports the download attribute for anchor elements.
var link = document.createElement("a");
link.setAttribute("href",url);
link.setAttribute("download",name||"Download.bin");
// Now I need to simulate a click on the link.
// IE 10 has the better msSaveBlob method and older IE versions do not support the BlobBuilder interface
// and object URLs, so we don't need the MS way to build an event object here.
var event = document.createEvent('MouseEvents');
event.initMouseEvent('click', true, true, window, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
link.dispatchEvent(event);
}
else {
// In other browsers I open a new window with the object URL.
// In order to trigger a download I have to use the generic binary data mime type
// "application/octet-stream" for mime types that browsers would display otherwise.
// Of course the browser won't show a nice file name here.
if (BrowserSupportedMimeTypes[mimetype.split(";")[0]] === true) {
mimetype = "application/octet-stream";
}
blob = builder.getBlob(mimetype);
url = URL.createObjectURL(blob);
window.open(url, '_blank', '');
}
// The timeout is probably not necessary, but just in case that some browser handle the click/window.open
// asynchronously I don't revoke the object URL immediately.
setTimeout(function () {
URL.revokeObjectURL(url);
}, 250);
// Using the filesystem API (http://www.w3.org/TR/file-system-api/) you could do something very similar.
// However, I think this is only supported by Chrome right now and it is much more complicated than this
// solution. And chrome supports the download attribute anyway.
};
}
// data:-URLs:
else if (!/\bMSIE\b/.test(navigator.userAgent)) {
// IE does not support URLs longer than 2048 characters (actually bytes), so it is useless for data:-URLs.
// Also it seems not to support window.open in combination with data:-URLs at all.
showSave = function (data, name, mimetype) {
if (!mimetype) mimetype = "application/octet-stream";
// Again I need to filter the mime type so a download is forced.
if (BrowserSupportedMimeTypes[mimetype.split(";")[0]] === true) {
mimetype = "application/octet-stream";
}
// Note that encodeURIComponent produces UTF-8 encoded text. The mime type should contain
// the charset=UTF-8 parameter. In case you don't want the data to be encoded as UTF-8
// you could use escape(data) instead.
window.open("data:"+mimetype+","+encodeURIComponent(data), '_blank', '');
};
}
// Internet Explorer before version 10 does not support any of the methods above.
// If it is text data you could show it in an textarea and tell the user to copy it into a text file.
// A small example using the sowSave function:
function saveData () {
if (!showSave) {
alert("Your browser does not support any method of saving JavaScript gnerated data to files.");
return;
}
showSave(
EncodedUTF8ToBig5(document.getElementById("data").value),
document.getElementById("filename").value,
document.getElementById("mimetype").value);
}
// ]]>
</script>
</head>
<body>
<label for="filename">File name:</label>
<input type="text" id="filename" value="Example.txt"/>
<label for="mimetype">Mime type:</label>
<input type="text" id="mimetype" value="text/plain; charset=Big5"/>
<br/>
<label for="data">File contents:</label><br/>
<textarea id="data">中文</textarea>
<br/>
<button onclick="saveData();">Save Data</button>
</body>
</html>