Web前端下载图片/文件

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