上传文件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 |
参考资料:https://www.cnblogs.com/afei9527/p/4233244.html?spm=a2c6h.12873639.0.0.57fd77d2OtEG0y