Web前端下載圖片/文件
條條道路通羅馬家夺，這里只記錄a標(biāo)簽下載圖片/文件的方法。
/** 下載文件 **/
downFile(content:any, filename:string) {
let ele = document.createElement('a');// 創(chuàng)建下載鏈接
ele.download = filename;//設(shè)置下載的名稱
ele.style.display = 'none';// 隱藏的可下載鏈接
// 字符內(nèi)容轉(zhuǎn)變成blob地址
var blob = new Blob([content]);
ele.href = URL.createObjectURL(blob);
document.body.appendChild(ele);
ele.click();
// 然后移除
URL.revokeObjectURL(ele.href)
document.body.removeChild(ele);
}
/**
* @param url 圖片地址 也支持base64格式的url
* @param filename 文件名
* **/
downImg(url:string,filename:string){
let ele = document.createElement('a');// 創(chuàng)建下載鏈接
ele.download = filename;//設(shè)置下載的名稱
ele.style.display = 'none';// 隱藏的可下載鏈接
ele.href = url;
document.body.appendChild(ele);
ele.click();
// 然后移除
URL.revokeObjectURL(ele.href)
document.body.removeChild(ele);
}
文件類型MIME
Blob 對象表示一個不可變伐弹、原始數(shù)據(jù)的類文件對象拉馋。
new Blob( array[, options] ) ，第二個參數(shù)options可選的參數(shù)掸茅。
-
array 是一個由
ArrayBuffer,ArrayBufferView,Blob,DOMString等對象構(gòu)成的Array椅邓，或者其他類似對象的混合體柠逞，它將會被放進(jìn)Blob昧狮。DOMStrings會被編碼為UTF-8。 -
options 是一個可選的
BlobPropertyBag字典板壮，它可能會指定如下兩個屬性：-
type逗鸣，默認(rèn)值為""，它代表了將會被放入到blob中的數(shù)組內(nèi)容的MIME類型绰精。 -
endings撒璧，默認(rèn)值為"transparent"，用于指定包含行結(jié)束符\n的字符串如何被寫入笨使。 它是以下兩個值中的一個："native"卿樱，代表行結(jié)束符會被更改為適合宿主操作系統(tǒng)文件系統(tǒng)的換行符，或者"transparent"硫椰，代表會保持blob中保存的結(jié)束符不變
-
不同的文件需要設(shè)置相對應(yīng)type類型繁调，否則可能導(dǎo)致下載的文件是亂碼萨蚕。
| 擴(kuò)展名 | 文檔類型 | MIME 類型 |
|---|---|---|
.aac |
AAC audio | audio/aac |
.abw |
AbiWord document | application/x-abiword |
.arc |
Archive document (multiple files embedded) | application/x-freearc |
.avi |
AVI: Audio Video Interleave | video/x-msvideo |
.azw |
Amazon Kindle eBook format | application/vnd.amazon.ebook |
.bin |
Any kind of binary data | application/octet-stream |
.bmp |
Windows OS/2 Bitmap Graphics | image/bmp |
.bz |
BZip archive | application/x-bzip |
.bz2 |
BZip2 archive | application/x-bzip2 |
.csh |
C-Shell script | application/x-csh |
.css |
Cascading Style Sheets (CSS) | text/css |
.csv |
Comma-separated values (CSV) | text/csv |
.doc |
Microsoft Word | application/msword |
.docx |
Microsoft Word (OpenXML) | application/vnd.openxmlformats-officedocument.wordprocessingml.document |
.eot |
MS Embedded OpenType fonts | application/vnd.ms-fontobject |
.epub |
Electronic publication (EPUB) | application/epub+zip |
.gif |
Graphics Interchange Format (GIF) | image/gif |
| `.htm | ||
| .html` | HyperText Markup Language (HTML) | text/html |
.ico |
Icon format | image/vnd.microsoft.icon |
.ics |
iCalendar format | text/calendar |
.jar |
Java Archive (JAR) | application/java-archive |
.jpeg | ||
.jpg |
JPEG images | image/jpeg |
.js |
JavaScript | text/javascript |
.json |
JSON format | application/json |
.jsonld |
JSON-LD format | application/ld+json |
.mid | ||
.midi |
Musical Instrument Digital Interface (MIDI) |
audio/midi audio/x-midi
|
.mjs |
JavaScript module | text/javascript |
.mp3 |
MP3 audio | audio/mpeg |
.mpeg |
MPEG Video | video/mpeg |
.mpkg |
Apple Installer Package | application/vnd.apple.installer+xml |
.odp |
OpenDocument presentation document | application/vnd.oasis.opendocument.presentation |
.ods |
OpenDocument spreadsheet document | application/vnd.oasis.opendocument.spreadsheet |
.odt |
OpenDocument text document | application/vnd.oasis.opendocument.text |
.oga |
OGG audio | audio/ogg |
.ogv |
OGG video | video/ogg |
.ogx |
OGG | application/ogg |
.otf |
OpenType font | font/otf |
.png |
Portable Network Graphics | image/png |
.pdf |
Adobe Portable Document Format (PDF) | application/pdf |
.ppt |
Microsoft PowerPoint | application/vnd.ms-powerpoint |
.pptx |
Microsoft PowerPoint (OpenXML) | application/vnd.openxmlformats-officedocument.presentationml.presentation |
.rar |
RAR archive | application/x-rar-compressed |
.rtf |
Rich Text Format (RTF) | application/rtf |
.sh |
Bourne shell script | application/x-sh |
.svg |
Scalable Vector Graphics (SVG) | image/svg+xml |
.swf |
Small web format (SWF) or Adobe Flash document | application/x-shockwave-flash |
.tar |
Tape Archive (TAR) | application/x-tar |
| `.tif | ||
| .tiff` | Tagged Image File Format (TIFF) | image/tiff |
.ttf |
TrueType Font | font/ttf |
.txt |
Text, (generally ASCII or ISO 8859-n) | text/plain |
.vsd |
Microsoft Visio | application/vnd.visio |
.wav |
Waveform Audio Format | audio/wav |
.weba |
WEBM audio | audio/webm |
.webm |
WEBM video | video/webm |
.webp |
WEBP image | image/webp |
.woff |
Web Open Font Format (WOFF) | font/woff |
.woff2 |
Web Open Font Format (WOFF) | font/woff2 |
.xhtml |
XHTML | application/xhtml+xml |
.xls |
Microsoft Excel | application/vnd.ms-excel |
.xlsx |
Microsoft Excel (OpenXML) | application/vnd.openxmlformats-officedocument.spreadsheetml.sheet |
.xml |
XML |
application/xml 代碼對普通用戶來說不可讀 (RFC 3023, section 3) |
text/xml 代碼對普通用戶來說可讀 (RFC 3023, section 3) | ||
.xul |
XUL | application/vnd.mozilla.xul+xml |
.zip |
ZIP archive | application/zip |
.3gp |
3GPP audio/video container | video/3gpp |
audio/3gpp（若不含視頻） | ||
.3g2 |
3GPP2 audio/video container | video/3gpp2 |
audio/3gpp2（若不含視頻） | ||
.7z |
7-zip archive | application/x-7z-compressed |
