Vue 之 new Blob() 文件流下载文件不同文件类型的 type 值整理

这篇具有很好参考价值的文章主要介绍了Vue 之 new Blob() 文件流下载文件不同文件类型的 type 值整理。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在 Vue 项目中,经常用 Blob 二进制进行文件下载功能(vue后台返回文件流下载导出函数封装、调用示例),涉及不同后缀名的文件,这里整理一份 Blob 的配置关系对应表,在我们使用Blob做下载功能时 ,根据需要下载的文件类型修改 type 值进行下载即可。

后缀名 文件类型 类型(type)
.xls Microsoft Excel application/vnd.ms-excel
.xlsx Microsoft Excel (OpenXML) application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
.csv CSV text/csv
.doc Microsoft Word application/msword
.docx Microsoft Word (OpenXML) application/vnd.openxmlformats-officedocument.wordprocessingml.document
.pdf PDF pplication/pdf
.ppt Microsoft PowerPoint application/vnd.ms-powerpoint
.pptx Microsoft PowerPoint (OpenXML) application/vnd.openxmlformats-officedocument.presentationml.presentation
.png 便携式网络图形(PNG) image/png
.gif GIF image/gif
.jpeg JPEG 图片 image/jpeg
.jpg JPEG 图片 image/jpeg
.mp3 MP3 音频 audio/mpeg
.aac AAC 音频 audio/aac
.html 超文本标记语言 (HTML) text/html
.css CSS text/css
.js JavaScript text/javascript
.json JSON 格式 application/json
.abw AbiWord 文档 application/x-abiword
.arc 存档文档(多个文件嵌入) application/x-freearc
.avi AVI: 音频视频交错 video/x-msvideo
.azw 亚马逊Kindle电子书格式 application/vnd.amazon.ebook
.bin 任何类型的二进制数据 application/octet-stream
.bmp Windows OS/2位图图形 image/bmp
.bz BZip 存档 application/x-bzip
.bz2 BZip2 存档 application/x-bzip2
.csh C-Shell 脚本 application/x-csh
.eot MS嵌入式OpenType字体 application/vnd.ms-fontobject
.epub 电子出版物(EPUB) application/epub+zip
.ico Icon 格式 image/vnd.microsoft.icon
.ics iCalendar 格式 text/calendar
.jar Java Archive (JAR) application/java-archive
.jsonld JSON-LD 格式 application/ld+json
.mid 乐器数字接口(MIDI) audio/midi audio/x-midi
.midi 乐器数字接口(MIDI) audio/midi audio/x-midi
.mjs JavaScript 模块 text/javascript
.mpeg MPEG 视频 video/mpeg
.mpkg 苹果安装程序包

application/vnd.apple.installer+xml

.odp OpenDocument演示文档 application/vnd.oasis.opendocument.presentation
.ods OpenDocument 电子表格文件 application/vnd.oasis.opendocument.spreadsheet
.odt OpenDocument 文本文档 application/vnd.oasis.opendocument.text
.oga OGG 音频 audio/ogg
ogv OGG 视频 video/ogg
.ogx OGG application/ogg
.otf OpenType 字体 font/otf
.rar RAR 存档 application/x-rar-compressed
.rtf 富文本格式 (RTF) application/rtf
.sh Bourne shell 脚本 application/x-sh
.svg 可缩放矢量图形 (SVG) image/svg+xml
.swf 小型web格式 (SWF) or Adobe Flash document application/x-shockwave-flash
tar Tape 归档(TAR) application/x-tar
.tif 标记图像文件格式 (TIFF) image/tiff
.tiff Tagged Image File Format (TIFF) image/tiff
.ttf rueType 字体 font/ttf
.txt Text text/plain
.vsd Microsoft Visio application/vnd.visio
.wav 波形音频格式 audio/wav
.weba WEBM 音频 audio/webm
.webm EBM 视频 video/webm
.webp WEBP 图片 image/webp
.woff 网页开放字体格式 (WOFF) font/woff
.woff2 网页开放字体格式 (WOFF) font/woff2
.xhtml XHTML application/xhtml+xml
.xml XML application/xml(普通用户不可读)、text/xml(普通用户可读)
.xul XUL application/vnd.mozilla.xul+xml
.zip ZIP application/zip
.3gp 3GPP audio/video 容器 video/3gpp、audio/3gpp(不含视频)
.3g2 3GPP2 audio/video 容器 video/3gpp2、audio/3gpp2(不含视频)
.7z 7-zip

application/x-7z-compressed文章来源地址https://www.toymoban.com/news/detail-781103.html

到了这里,关于Vue 之 new Blob() 文件流下载文件不同文件类型的 type 值整理的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端下载文件流,设置返回值类型responseType:‘blob‘无效的问题

    本是一个非常简单的请求,即是下载文件。通常的做法如下: 1.前端通过Vue Axios向后端请求,同时在请求中设置响应体为Blob格式。 2.后端相应前端的请求,同时返回Blob格式的文件给到前端(如果没有步骤1设置响应体,则后端返回的是一个文件流,前端) 3.前端创建a标签进行

    2024年01月17日
    浏览(52)
  • vue axios实现下载文件及responseType:blob注意事项

    需要使用axios和js-file-download组件 注意事项: responseType:blob表示服务器返回的响应类型是二进制流,一般用于文件、视频下载等场景。正常情况下后端返回二进制数据,当后端服务器出错时,往往会以json形式返回错误信息,例如{\\\"code\\\":500,\\\"msg\\\":\\\"未知异常\\\"}。因为设置了blob类型,

    2024年02月11日
    浏览(31)
  • JS前端读取本地上传的File文件对象内容(包括Base64、text、JSON、Blob、ArrayBuffer等类型文件)

    FileReader.readAsArrayBuffer() - Web API 接口参考 | MDN FileReader 接口提供的 readAsArrayBuffer() 方法用于启动读取指定的 Blob 或 File 内容。当读取操作完成时,readyState 变成 DONE(已完成),并触发 loadend 事件,同时 result 属性中将包含一个 ArrayBuffer 对象以表示所读取文件的数据。 https://

    2024年02月15日
    浏览(39)
  • vue 后端返回二进制流-前端通过blob对象下载文件-图片

    前言 在实际开发中我们经常会遇见下载文件的场景,比如下载合同,下载文件 下载文件有2种方式,一种是后端返回二进制流,前端通过blob对象接受根据不同类型下载 还有一种把地址直接在浏览器新窗口打开浏览器打开pdf可以预览和下载,其他文件直接下载 但不管是那种方

    2024年02月05日
    浏览(58)
  • 基于SpringBoot + EasyExcel + Vue + Blob实现导出Excel文件的前后端完整过程

    首先前端发起HTTP请求之后,后端返回一个Excel输出流,然后前端用Blob类型接收数据,并且解析响应头数据以及提取源文件名,最后用a标签完成下载。 一、后端代码 (1)导入阿里巴巴的EasyExcel依赖(pom.xml) (2)控制层(GameController.java) (3)接口层(IGameService.java) (4)

    2024年02月16日
    浏览(30)
  • Mybatis 处理 CLOB/BLOB 类型数据

    BLOB 和 CLOB 都是大型字段类型。 BLOB通过二进制存储,而CLOB可以直接存储文本。 通常,图片、文件、音乐等信息存储在 BLOB 字段中。首先,文件是转换为二进制,然后存储在。文章或较长的文本存储在 CLOB 中。 不同数据库中相应的 BLOB 和 CLOB 类型也不同: 在MySQL中,clob对应

    2024年02月15日
    浏览(25)
  • Vue3 - 详细实现下载从服务端返回的文件流 Blob 对象教程,前端下载后端接口返回的文件流并自动保存到本地,支持任何格式的文件下载(从后端拿到二进制文件流 Blob 对象,前端实现点击下载功能)

    调用服务端(后端)接口拿到文件流,通过前端下载并保存到本地。 本文 实现了在 vue3 项目中,通过后端接口返回的二进制文件流 Blob 对象,在前端进行点击下载并保存到用户本地,任何格式的文件都可以轻松下载, 保证您直接复制代码,改个请求地址就可以使用了, 如下

    2024年02月04日
    浏览(152)
  • JDBC详解(四):操作BLOB类型字段(超详解)

    本博主将用CSDN记录软件开发求学之路上亲身所得与所学的心得与知识,有兴趣的小伙伴可以关注博主!也许一个人独行,可以走的很快,但是一群人结伴而行,才能走的更远! ⭕ MySQL中,BLOB是一个二进制大型对象,是一个可以存储大量数据的容器,它能容纳不同大小的数据

    2024年02月04日
    浏览(30)
  • 前端下载文件(Blob)的几种方式使用Blob下载文件

    在前端下载文件是个很通用的需求,一般后端会提供下载的方式有两种: 1.直接返回文件的网络地址(一般用在静态文件上,比如图片以及各种音视频资源等) 2.返回文件流(一般用在动态文件上,比如根据前端选择,导出不同的统计结果 excel 等) 第一种方式比较简单,但

    2024年02月07日
    浏览(44)
  • Oracle数据库Clob类型Blob类型与String互转

    Clob类型为大字段类型默认4000长度,Blob为二进制类型常用存文件数据;这两种大字段类型开发中不会经常遇到,博主整理了这两种大字段与String的转换方法可参考(使用Junit直接测试)其中javax.sql.rowset.serial.SerialClob 和javax.sql.rowset.serial.SerialBlob两个类都是从JDK1.5引入;用到了

    2024年02月13日
    浏览(34)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包