上传文件input格式
上传文件浏览时只显示指定文件类型 xls、xlsx、csv（多种类型组合）
<input id="file_select" type="file"
accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />
合法的指定类型： CSV files (.csv):
<input type="file" accept=".csv" />
Excel Files 2003-2007 (.xls):
<input type="file" accept="application/vnd.ms-excel" />
Excel Files 2010 (.xlsx):
<input type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />
Text Files (.txt):
<input type="file" accept="text/plain" />
Image Files (.png/.jpg/etc):
<input type="file" accept="image/*" />
HTML Files (.htm,.html):
<input type="file" accept="text/html" />
Audio Files (.mp3, .wav, etc):
<input type="file" accept="audio/*" />
PDF Files:
<input type="file" accept=".pdf" />
下载文件示例
/**
* @desc 下载excel or pdf表格数据, http为使用HttpClient封装的请求Service
* @param path - 请求path
* @param params - 参数
* @param action - 下载的是pdf还是excel
*/
downloadFile(path: string, params?: any, action = 'pdf'): Observable<any> {
const token = LocalStorage.get('token')
const contentType = action === 'pdf' ? 'application/pdf' : 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
let headers = new HttpHeaders().set('Accept', contentType)
if (token) {
headers = headers.set('Authorization', token)
}
const options: any = {headers: headers, responseType: 'arraybuffer', observe: 'response'}
return this.http.get(path, params, options)
.do((resp: any) => {
if (resp) {
this.createATag(resp, action)
}
}, e => {
console.log('e', e)
})
}
/**
* @desc 创建a标签，下载excel or pdf
* @param resp - request response
* @param action - 下载的使pdf还是excel
*/
private createATag(resp, action) {
let fileName = 'Excel文件.xlsx',
type = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
if (action === 'pdf') {
fileName = 'PDF文件.pdf'
type = 'application/pdf'
}
const text = resp.body
const blob = new Blob([text], {type})
const downloadLink = document.createElement('a')
downloadLink.download = `${fileName}`
downloadLink.href = window.URL.createObjectURL(blob)
downloadLink.style.display = 'none'
document.body.appendChild(downloadLink)
downloadLink.click()
document.body.removeChild(downloadLink)
}
// 调用
this.downloadFile('export', {action:'download'}, 'pdf').subscribe()
MIME
MIME (Multipurpose Internet Mail Extensions) 多用途互联网邮件扩展，它设定某种扩展名的文件用一种应用程序来打开的方式类型，当该扩展名文件被访问的时候，浏览器会自动使用指定应用程序来打开。多用于指定一些客户端自定义的文件名，以及一些媒体文件打开方式。
常用MIME
| 文件拓展名 | MIME类型 |
|---|---|
| .docx | application/vnd.openxmlformats-officedocument.wordprocessingml.document |
| .xlsx | application/vnd.openxmlformats-officedocument.spreadsheetml.sheet |
| .xltx | application/vnd.openxmlformats-officedocument.spreadsheetml.template |
| .pptx | application/vnd.openxmlformats-officedocument.presentationml.presentation |
| *.css | text/css |
| *.csv | text/csv |
| .doc，.dot | application/msword |
| *.gif | image/gif |
| .htm，.html | text/html |
| *.jpeg | image/jpeg |
| *.jpg | image/jpeg |
| *.js | text/javascript, application/javascript |
| *.json | application/json |
| application/pdf | |
| *.png | image/png |
| *.txt | text/plain |
| *.zip | aplication/zip、application/x-compressed |
不常用MIME
| 文件拓展名 | MIME类型 |
|---|---|
| .docm | application/vnd.ms-word.document.macroEnabled.12 |
| .dotx | application/vnd.openxmlformats-officedocument.wordprocessingml.template |
| .dotm | application/vnd.ms-word.template.macroEnabled.12 |
| .xlsm | application/vnd.ms-excel.sheet.macroEnabled.12 |
| .xltm | application/vnd.ms-excel.template.macroEnabled.12 |
| .xlsb | application/vnd.ms-excel.sheet.binary.macroEnabled.12 |
| .xlam | application/vnd.ms-excel.addin.macroEnabled.12 |
| .pptm | application/vnd.ms-powerpoint.presentation.macroEnabled.12 |
| .ppsx | application/vnd.openxmlformats-officedocument.presentationml.slideshow |
| .ppsm | application/vnd.ms-powerpoint.slideshow.macroEnabled.12 |
| .potx | application/vnd.openxmlformats-officedocument.presentationml.template |
| .potm | application/vnd.ms-powerpoint.template.macroEnabled.12 |
| .one .onetoc2 .onetmp .onepkg | application/msonenote |
| *.3gpp | audio/3gpp, video/3gpp |
| *.ac3 | audio/ac3 |
| *.asf | allpication/vnd.ms-asf |
| *.au | audio/basic |
| *.dtd | |
| *.dwg | image/vnd.dwg |
| *.dxf | image/vnd.dxf |
| *.jp2 | image/jp2 |
| *.jpe | image/jpeg |
| *.mp2 | audio/mpeg, video/mpeg |
| *.mp3 | audio/mpeg |
| *.mp4 | audio/mp4, video/mp4 |
| .mpeg，.mpg | video/mpeg |
| *.mpp | application/vnd.ms-project |
| *.ogg | application/ogg, audio/ogg |
| .pot，.pps，*.ppt | application/vnd.ms-powerpoint |
| *.rtf | application/rtf, text/rtf |
| *.svf | image/vnd.svf |
| *.tif | image/tiff |
| *.tiff | image/tiff |
| *.wdb | application/vnd.ms-works |
| *.wps | application/vnd.ms-works |
| *.xhtml | application/xhtml+xml |
| .xlc，.xlm，.xls，.xlt，*.xlw | application/vnd.ms-excel |
| *.xml | text/xml, application/xml |
| *.apk | application/vnd.android.package-archive |
| *.exe | application/octet-stream |
| *.dmg | application/octet-stream |
| *.woff | application/x-font-woff 字体 |
| .ipa | application/iphone-package-archive |
参考资料：www.cnblogs.com/afei9527/p/…
如果你觉得这篇文章有用，动动小手给我点个赞吧🍀
