文件下载 response响应ContentType与a标签download属性

这篇具有很好参考价值的文章主要介绍了文件下载 response响应ContentType与a标签download属性。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一. ContentType

我们在进行文件下载的时候,后端往往需要通过如下方式设置ContentType

import org.springframework.http.MediaType;import javax.annotation.Resource;import javax.servlet.http.HttpServletResponse;@Resourceprivate HttpServletResponse response;// 省略...response.setContentType(MediaType.APPLICATION_OCTET_STREAM_VALUE);

其中用到了MediaType,MediaType是一种媒体类型,指定资源的形式。
浏览器通过获取response响应中的Content-Type所对应的类型对资源进行解析。

常用的Content-Type如下表所示,其中

  • application/octet-stream: 是比较常用的类型,可用于任何类型的文件下载。

  • application/x-msdownload: 网上很多文件说用此Content-Type进行文件下载,虽然也能实现其功能,但由下表可知,此类型对应着.ddl 和 .exe 文件。

HTTP Content-type对照表

文件扩展名Content-Type(Mime-Type)文件扩展名Content-Type(Mime-Type)
.*( 二进制流,不知道下载文件类型)application/octet-stream.tifimage/tiff
.001application/x-001.301application/x-301
.323text/h323.906application/x-906
.907drawing/907.a11application/x-a11
.acpaudio/x-mei-aac.aiapplication/postscript
.aifaudio/aiff.aifcaudio/aiff
.aiffaudio/aiff.anvapplication/x-anv
.asatext/asa.asfvideo/x-ms-asf
.asptext/asp.asxvideo/x-ms-asf
.auaudio/basic.avivideo/avi
.awfapplication/vnd.adobe.workflow.biztext/xml
.bmpapplication/x-bmp.botapplication/x-bot
.c4tapplication/x-c4t.c90application/x-c90
.calapplication/x-cals.catapplication/vnd.ms-pki.seccat
.cdfapplication/x-netcdf.cdrapplication/x-cdr
.celapplication/x-cel.cerapplication/x-x509-ca-cert
.cg4application/x-g4.cgmapplication/x-cgm
.citapplication/x-cit.classjava/*
.cmltext/xml.cmpapplication/x-cmp
.cmxapplication/x-cmx.cotapplication/x-cot
.crlapplication/pkix-crl.crtapplication/x-x509-ca-cert
.csiapplication/x-csi.csstext/css
.cutapplication/x-cut.dbfapplication/x-dbf
.dbmapplication/x-dbm.dbxapplication/x-dbx
.dcdtext/xml.dcxapplication/x-dcx
.derapplication/x-x509-ca-cert.dgnapplication/x-dgn
.dibapplication/x-dib.dllapplication/x-msdownload
.docapplication/msword.dotapplication/msword
.drwapplication/x-drw.dtdtext/xml
.dwfModel/vnd.dwf.dwfapplication/x-dwf
.dwgapplication/x-dwg.dxbapplication/x-dxb
.dxfapplication/x-dxf.ednapplication/vnd.adobe.edn
.emfapplication/x-emf.emlmessage/rfc822
.enttext/xml.epiapplication/x-epi
.epsapplication/x-ps.epsapplication/postscript
.etdapplication/x-ebx.exeapplication/x-msdownload
.faximage/fax.fdfapplication/vnd.fdf
.fifapplication/fractals.fotext/xml
.frmapplication/x-frm.g4application/x-g4
.gbrapplication/x-gbr.application/x-
.gifimage/gif.gl2application/x-gl2
.gp4application/x-gp4.hglapplication/x-hgl
.hmrapplication/x-hmr.hpgapplication/x-hpgl
.hplapplication/x-hpl.hqxapplication/mac-binhex40
.hrfapplication/x-hrf.htaapplication/hta
.htctext/x-component.htmtext/html
.htmltext/html.htttext/webviewhtml
.htxtext/html.icbapplication/x-icb
.icoimage/x-icon.icoapplication/x-ico
.iffapplication/x-iff.ig4application/x-g4
.igsapplication/x-igs.iiiapplication/x-iphone
.imgapplication/x-img.insapplication/x-internet-signup
.ispapplication/x-internet-signup.IVFvideo/x-ivf
.javajava/*.jfifimage/jpeg
.jpeimage/jpeg.jpeapplication/x-jpe
.jpegimage/jpeg.jpgimage/jpeg
.jpgapplication/x-jpg.jsapplication/x-javascript
.jsptext/html.la1audio/x-liquid-file
.larapplication/x-laplayer-reg.latexapplication/x-latex
.lavsaudio/x-liquid-secure.lbmapplication/x-lbm
.lmsffaudio/x-la-lms.lsapplication/x-javascript
.ltrapplication/x-ltr.m1vvideo/x-mpeg
.m2vvideo/x-mpeg.m3uaudio/mpegurl
.m4evideo/mpeg4.macapplication/x-mac
.manapplication/x-troff-man.mathtext/xml
.mdbapplication/msaccess.mdbapplication/x-mdb
.mfpapplication/x-shockwave-flash.mhtmessage/rfc822
.mhtmlmessage/rfc822.miapplication/x-mi
.midaudio/mid.midiaudio/mid
.milapplication/x-mil.mmltext/xml
.mndaudio/x-musicnet-download.mnsaudio/x-musicnet-stream
.mochaapplication/x-javascript.movievideo/x-sgi-movie
.mp1audio/mp1.mp2audio/mp2
.mp2vvideo/mpeg.mp3audio/mp3
.mp4video/mpeg4.mpavideo/x-mpg
.mpdapplication/vnd.ms-project.mpevideo/x-mpeg
.mpegvideo/mpg.mpgvideo/mpg
.mpgaaudio/rn-mpeg.mppapplication/vnd.ms-project
.mpsvideo/x-mpeg.mptapplication/vnd.ms-project
.mpvvideo/mpg.mpv2video/mpeg
.mpwapplication/vnd.ms-project.mpxapplication/vnd.ms-project
.mtxtext/xml.mxpapplication/x-mmxp
.netimage/pnetvue.nrfapplication/x-nrf
.nwsmessage/rfc822.odctext/x-ms-odc
.outapplication/x-out.p10application/pkcs10
.p12application/x-pkcs12.p7bapplication/x-pkcs7-certificates
.p7capplication/pkcs7-mime.p7mapplication/pkcs7-mime
.p7rapplication/x-pkcs7-certreqresp.p7sapplication/pkcs7-signature
.pc5application/x-pc5.pciapplication/x-pci
.pclapplication/x-pcl.pcxapplication/x-pcx
.pdfapplication/pdf.pdfapplication/pdf
.pdxapplication/vnd.adobe.pdx.pfxapplication/x-pkcs12
.pglapplication/x-pgl.picapplication/x-pic
.pkoapplication/vnd.ms-pki.pko.plapplication/x-perl
.plgtext/html.plsaudio/scpls
.pltapplication/x-plt.pngimage/png
.pngapplication/x-png.potapplication/vnd.ms-powerpoint
.ppaapplication/vnd.ms-powerpoint.ppmapplication/x-ppm
.ppsapplication/vnd.ms-powerpoint.pptapplication/vnd.ms-powerpoint
.pptapplication/x-ppt.prapplication/x-pr
.prfapplication/pics-rules.prnapplication/x-prn
.prtapplication/x-prt.psapplication/x-ps
.psapplication/postscript.ptnapplication/x-ptn
.pwzapplication/vnd.ms-powerpoint.r3ttext/vnd.rn-realtext3d
.raaudio/vnd.rn-realaudio.ramaudio/x-pn-realaudio
.rasapplication/x-ras.ratapplication/rat-file
.rdftext/xml.recapplication/vnd.rn-recording
.redapplication/x-red.rgbapplication/x-rgb
.rjsapplication/vnd.rn-realsystem-rjs.rjtapplication/vnd.rn-realsystem-rjt
.rlcapplication/x-rlc.rleapplication/x-rle
.rmapplication/vnd.rn-realmedia.rmfapplication/vnd.adobe.rmf
.rmiaudio/mid.rmjapplication/vnd.rn-realsystem-rmj
.rmmaudio/x-pn-realaudio.rmpapplication/vnd.rn-rn_music_package
.rmsapplication/vnd.rn-realmedia-secure.rmvbapplication/vnd.rn-realmedia-vbr
.rmxapplication/vnd.rn-realsystem-rmx.rnxapplication/vnd.rn-realplayer
.rpimage/vnd.rn-realpix.rpmaudio/x-pn-realaudio-plugin
.rsmlapplication/vnd.rn-rsml.rttext/vnd.rn-realtext
.rtfapplication/msword.rtfapplication/x-rtf
.rvvideo/vnd.rn-realvideo.samapplication/x-sam
.satapplication/x-sat.sdpapplication/sdp
.sdwapplication/x-sdw.sitapplication/x-stuffit
.slbapplication/x-slb.sldapplication/x-sld
.slkdrawing/x-slk.smiapplication/smil
.smilapplication/smil.smkapplication/x-smk
.sndaudio/basic.soltext/plain
.sortext/plain.spcapplication/x-pkcs7-certificates
.splapplication/futuresplash.spptext/xml
.ssmapplication/streamingmedia.sstapplication/vnd.ms-pki.certstore
.stlapplication/vnd.ms-pki.stl.stmtext/html
.styapplication/x-sty.svgtext/xml
.swfapplication/x-shockwave-flash.tdfapplication/x-tdf
.tg4application/x-tg4.tgaapplication/x-tga
.tifimage/tiff.tifapplication/x-tif
.tiffimage/tiff.tldtext/xml
.topdrawing/x-top.torrentapplication/x-bittorrent
.tsdtext/xml.txttext/plain
.uinapplication/x-icq.ulstext/iuls
.vcftext/x-vcard.vdaapplication/x-vda
.vdxapplication/vnd.visio.vmltext/xml
.vpgapplication/x-vpeg005.vsdapplication/vnd.visio
.vsdapplication/x-vsd.vssapplication/vnd.visio
.vstapplication/vnd.visio.vstapplication/x-vst
.vswapplication/vnd.visio.vsxapplication/vnd.visio
.vtxapplication/vnd.visio.vxmltext/xml
.wavaudio/wav.waxaudio/x-ms-wax
.wb1application/x-wb1.wb2application/x-wb2
.wb3application/x-wb3.wbmpimage/vnd.wap.wbmp
.wizapplication/msword.wk3application/x-wk3
.wk4application/x-wk4.wkqapplication/x-wkq
.wksapplication/x-wks.wmvideo/x-ms-wm
.wmaaudio/x-ms-wma.wmdapplication/x-ms-wmd
.wmfapplication/x-wmf.wmltext/vnd.wap.wml
.wmvvideo/x-ms-wmv.wmxvideo/x-ms-wmx
.wmzapplication/x-ms-wmz.wp6application/x-wp6
.wpdapplication/x-wpd.wpgapplication/x-wpg
.wplapplication/vnd.ms-wpl.wq1application/x-wq1
.wr1application/x-wr1.wriapplication/x-wri
.wrkapplication/x-wrk.wsapplication/x-ws
.ws2application/x-ws.wsctext/scriptlet
.wsdltext/xml.wvxvideo/x-ms-wvx
.xdpapplication/vnd.adobe.xdp.xdrtext/xml
.xfdapplication/vnd.adobe.xfd.xfdfapplication/vnd.adobe.xfdf
.xhtmltext/html.xlsapplication/vnd.ms-excel
.xlsapplication/x-xls.xlwapplication/x-xlw
.xmltext/xml.xplaudio/scpls
.xqtext/xml.xqltext/xml
.xquerytext/xml.xsdtext/xml
.xsltext/xml.xslttext/xml
.xwdapplication/x-xwd.x_bapplication/x-x_b
.sisapplication/vnd.symbian.install.sisxapplication/vnd.symbian.install
.x_tapplication/x-x_t.ipaapplication/vnd.iphone
.apkapplication/vnd.android.package-archive.xapapplication/x-silverlight-app

二. a标签download属性

2.1 下载同源静态资源文件

如下图所示,在static/img文件夹下保存着图片静态资源.

下载文件content-type,文件下载 response响应,a标签download属性

😵如果我们通过a标签超链接的方式直接访问,浏览器会以新标签页的方式打开

<!DOCTYPE html><html lang="en" xmlns:th="http://www.thymeleaf.org"><head>
    <meta charset="UTF-8">
    <title>Title</title></head><body><div>
    <a th:href="@{/img/test.png}">非跨域图片</a></div>


下载文件content-type,文件下载 response响应,a标签download属性
💪若我们给a标签添加了download属性

<!DOCTYPE html><html lang="en" xmlns:th="http://www.thymeleaf.org"><head>
    <meta charset="UTF-8">
    <title>Title</title></head><body><div>
    <a th:href="@{/img/test.png}" download>非跨域图片</a></div>


下载文件content-type,文件下载 response响应,a标签download属性
❗❗❗这种a标签配合download属性下载静态资源的方式,只适用于同源静态资源。
如果非同源的图片等。还是会直接打开,并不会触发下载。


2.2 下载非同源静态资源文件

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title></head><body>
    <a data-type="img" href="https://img-blog.yssmx.com/c8175b65d44d4316873590f19dfadd3b.gif">点击下载图片1</a>
    <a data-type="img" href="https://img-blog.yssmx.com/b2770c6e75cb478791f3b80f8448e2ba.png">点击下载图片2</a></body><script src="https://code.jquery.com/jquery-3.6.3.js"></script><script>
    $(function() {
        
        $("[data-type='img']").click(async function(event) {
            
            // 阻止a标签默认事件的触发
            event.preventDefault();
            const {
                currentTarget: {
                    href                }
            } = event;

            if (!href) {
                return;
            }

            // 通过fetch访问图片url,获取Blob对象
            try {
                const response = await fetch(href);
                const blob = await response.blob();
                const blobUrl = URL.createObjectURL(blob);

                // 创建a标签,并触发点击事件
                const aElement = document.createElement("a");
                aElement.href = blobUrl;
                // 获取数组的最后一个元素
                aElement.download = href.split('/').at(-1);
                aElement.click();

                // 从内存中移除blobUrl
                URL.revokeObjectURL(blobUrl);
            } catch (error) {
                console.log(error);
            }
            
        })
    })</script></html>


下载文件content-type,文件下载 response响应,a标签download属性


2.3 后台可省略Content-Disposition

通过编程方式下载文件,往往需要在response的header中设置Content-Disposition来指定下载文件的名称,如下代码所示。

import javax.servlet.http.HttpServletResponse;import javax.annotation.Resource;@Resourceprivate HttpServletResponse response;// 省略...response.setContentType("application/octet-stream");response.setHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(文件名, "UTF-8"));



如果我们在前台通过download指定了下载文件的名称和格式

<a th:href="@{/test24/fileDownload}" download="前台指定名称.txt">超链接直接下载文件</a>


则后台的代码可省略Content-Disposition的设置

// 省略Controller...@GetMapping("/fileDownload")public ResponseEntity<byte[]> fileDownload() throws Exception {

    // 读取本地的文件
    String filePath = "/temp/A110120119/测试文件.text";
    ClassPathResource readFile = new ClassPathResource(filePath);

    // 设置响应头,把文件名称放入响应头中,确保文件可下载
    HttpHeaders headers = new HttpHeaders();
    
    // 👇👇👇被注释掉
    // headers.set("Content-Disposition", "attachment;filename=" + URLEncoder.encode(readFile.getFilename(), "UTF-8"));
    
    headers.setContentType(MediaType.APPLICATION_OCTET_STREAM);

    // 获取File对象
    File file = readFile.getFile();
    Path path = Paths.get(file.toURI());
    // 获取File对象的字节码文件
    byte[] bytes = Files.readAllBytes(path);
    
    return new ResponseEntity<>(bytes, headers, HttpStatus.OK);}



⏹效果如下所示

下载文件content-type,文件下载 response响应,a标签download属性文章来源地址https://www.toymoban.com/news/detail-785324.html

到了这里,关于文件下载 response响应ContentType与a标签download属性的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • html利用a标签实现下载本地的文件

            在写html页面的时候,需要在网页上提供一个下载按钮可以下载我自己电脑中的文件。我已经知道了该文件的路径,但是之前看了很多文章都没找到正确办法,一直不知道如何能够下载本地的文件,经过不断实验发现,可以利用a标签中的downlo属性,同时将href属性设

    2023年04月15日
    浏览(42)
  • vue3利用 a 标签,文件流,JSZip 压缩包,实现文件下载

    在实现文件的下载,采用 a 标签,会出现图片,没有进行下载,而是,在当前页面打开了图片。 导致原因: ·a标签,有 download 属性,可以实现下载 同源文件( ip 和 端口 相同),当图片不同源 时,点击下载,会在当前窗口直接打开图片,而不是进入下载状态。 1.1 没有图片

    2023年04月08日
    浏览(40)
  • 实际记录uni-app使用uni-download和uni.saveFile下载保存文件遇到的问题以及解决方法

    app里的开发的小程序需要下载文件功能以及一个下载中心页面可以查看所有下载的文件,使用了uni.download下载以及uni.saveFile保存文件 下载中心页面实现逻辑 1.下载文件后保存文件名和uni.saveFile返回的路径uni.setStorageSync到缓存里 2.下载中心读取uni.getStorageSync缓存的文件列表 通

    2024年02月12日
    浏览(67)
  • response的Content-Length设置错误,导致springboot文件下载,代码已经return,postman一直等待到超时

    最近在工作中遇到了文件下载的需求, 期初以为也很简单, DownloadController 启动后访问,localhost:8080/download 请求处理完后,postman 一直在等待, response的head儿中设置了content-length,导致写出的数据不相等时, postman 便一直等待,直至超时, 已写出的数据就是byte字节数组,后台

    2024年01月17日
    浏览(61)
  • 前端下载文件或者图片方式,window.open或者a标签形式

    1.通过a标签的方式下载文件 我们点击下载,发现是跳转到了百度的首页,并没有真的下载文件。 因为 a 标签下载只能下载 同源 的文件;如果是 跨域 的文件,比如图片、音视频等媒体文件等都无法使用上面的 a 标签方式下载。 上面的代码是直接通过书写 a 标签来实现文件下

    2024年02月03日
    浏览(59)
  • java minio通过getPresignedObjectUrl设置(自定义)预签名URL下载文件的响应文件名之minio源码改造方案

    用户上传文件到Minio时,一般存储在Minio中的对象名称都是后端以UUID或者其他随机或非随机方案生成的唯一标识做为文件名,这个对象名称一般都不会是用户上传时的原文件名称。 在用户下载时,想让文件流不通过后端服务器,而是用户直接申请并使用某个要下载对象的Min

    2024年01月25日
    浏览(58)
  • Java 中,使用 HttpServletResponse 对象将服务器上的文件响应到客户端浏览器进行下载

    在服务器端,使用 FileInputStream 打开要下载的文件,并将其读取到字节数组中。 2.设置 HttpServletResponse 的响应头信息,告诉浏览器需要下载文件,并指定文件名和文件类型 其中,Content-Type 表示响应内容的类型,这里设置为 application/octet-stream,表示二进制流。Content-Length 表示

    2024年02月13日
    浏览(66)
  • response.contenttype详解

    大家好,我是免费搭建查券返利机器人赚佣金就用微赚淘客系统3.0的小编,也是冬天不穿秋裤,天冷也要风度的程序猿! 在Java Web开发中,我们时常需要控制服务器向浏览器发送的内容类型。今天,我们将深入研究 response.setContentType 方法,揭示其在Web开发中的神奇用途。 1

    2024年02月04日
    浏览(43)
  • okhttp下载文件 Java下载文件 javaokhttp下载文件 下载文件 java下载 okhttp下载 okhttp

    示例 http客户端 用的是 okhttp,也可以用 UrlConnetcion或者apache okhttp官网 也可以下载 okhttp jar方式引入 1.1、okhttp发起请求官网Demo 3.1读写内容

    2024年02月12日
    浏览(41)
  • 通俗易懂【Springboot】 单文件下载和批量下载(多个文件合成一个压缩包下载)

    1.简单理解文件下载 文件下载,是从服务器下载到本地电脑。 文件下载的原理,首先通过IO流将服务器的文件读取到内存里(只有将数据读到内存,电脑才可以操作数据),读取后文件数据存放在内存中,将内存中的数据通过网络发送给本地客户端的浏览器。本地客户端的浏

    2024年02月08日
    浏览(44)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包