Web前端下载图片/文件
条条道路通罗马，这里只记录a标签下载图片/文件的方法。
/** 下载文件 **/
downFile(content:any, filename:string) {
let ele = document.createElement('a');// 创建下载链接
ele.download = filename;//设置下载的名称
ele.style.display = 'none';// 隐藏的可下载链接
// 字符内容转变成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');// 创建下载链接
ele.download = filename;//设置下载的名称
ele.style.display = 'none';// 隐藏的可下载链接
ele.href = url;
document.body.appendChild(ele);
ele.click();
// 然后移除
URL.revokeObjectURL(ele.href)
document.body.removeChild(ele);
}
文件类型MIME
Blob 对象表示一个不可变、原始数据的类文件对象。
new Blob( array[, options] ) ，第二个参数options可选的参数。
-
array 是一个由
ArrayBuffer,ArrayBufferView,Blob,DOMString等对象构成的Array，或者其他类似对象的混合体，它将会被放进Blob。DOMStrings会被编码为UTF-8。 -
options 是一个可选的
BlobPropertyBag字典，它可能会指定如下两个属性：-
type，默认值为""，它代表了将会被放入到blob中的数组内容的MIME类型。 -
endings，默认值为"transparent"，用于指定包含行结束符\n的字符串如何被写入。 它是以下两个值中的一个："native"，代表行结束符会被更改为适合宿主操作系统文件系统的换行符，或者"transparent"，代表会保持blob中保存的结束符不变
-
不同的文件需要设置相对应type类型，否则可能导致下载的文件是乱码。
| 扩展名 | 文档类型 | 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 |
