input file accept,上传文件、下载文件类型限制格式 ;常用MIME类型列表,支持 apk,exe,.woff,.ipa

上传文件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类型
.docxapplication/vnd.openxmlformats-officedocument.wordprocessingml.document
.xlsxapplication/vnd.openxmlformats-officedocument.spreadsheetml.sheet
.xltxapplication/vnd.openxmlformats-officedocument.spreadsheetml.template
.pptxapplication/vnd.openxmlformats-officedocument.presentationml.presentation
*.csstext/css
*.csvtext/csv
.doc,.dotapplication/msword
*.gifimage/gif
.htm,.htmltext/html
*.jpegimage/jpeg
*.jpgimage/jpeg
*.jstext/javascript, application/javascript
*.jsonapplication/json
*.pdfapplication/pdf
*.pngimage/png
*.txttext/plain
*.zipaplication/zip、application/x-compressed
不常用MIME
文件拓展名MIME类型
.docmapplication/vnd.ms-word.document.macroEnabled.12
.dotxapplication/vnd.openxmlformats-officedocument.wordprocessingml.template
.dotmapplication/vnd.ms-word.template.macroEnabled.12
.xlsmapplication/vnd.ms-excel.sheet.macroEnabled.12
.xltmapplication/vnd.ms-excel.template.macroEnabled.12
.xlsbapplication/vnd.ms-excel.sheet.binary.macroEnabled.12
.xlamapplication/vnd.ms-excel.addin.macroEnabled.12
.pptmapplication/vnd.ms-powerpoint.presentation.macroEnabled.12
.ppsxapplication/vnd.openxmlformats-officedocument.presentationml.slideshow
.ppsmapplication/vnd.ms-powerpoint.slideshow.macroEnabled.12
.potxapplication/vnd.openxmlformats-officedocument.presentationml.template
.potmapplication/vnd.ms-powerpoint.template.macroEnabled.12
.one .onetoc2 .onetmp .onepkgapplication/msonenote
*.3gppaudio/3gpp, video/3gpp
*.ac3audio/ac3
*.asfallpication/vnd.ms-asf
*.auaudio/basic
*.dtd
*.dwgimage/vnd.dwg
*.dxfimage/vnd.dxf
*.jp2image/jp2
*.jpeimage/jpeg
*.mp2audio/mpeg, video/mpeg
*.mp3audio/mpeg
*.mp4audio/mp4, video/mp4
.mpeg,.mpgvideo/mpeg
*.mppapplication/vnd.ms-project
*.oggapplication/ogg, audio/ogg
.pot,.pps,*.pptapplication/vnd.ms-powerpoint
*.rtfapplication/rtf, text/rtf
*.svfimage/vnd.svf
*.tifimage/tiff
*.tiffimage/tiff
*.wdbapplication/vnd.ms-works
*.wpsapplication/vnd.ms-works
*.xhtmlapplication/xhtml+xml
.xlc,.xlm,.xls,.xlt,*.xlwapplication/vnd.ms-excel
*.xmltext/xml, application/xml
*.apkapplication/vnd.android.package-archive
*.exeapplication/octet-stream
*.dmgapplication/octet-stream
*.woffapplication/x-font-woff 字体
.ipaapplication/iphone-package-archive

参考资料:https://www.cnblogs.com/afei9527/p/4233244.html?spm=a2c6h.12873639.0.0.57fd77d2OtEG0y

  • 3
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值