文件预览和下载

文件预览和下载

Content-Disposition是一个HTTP响应头字段,用于指示接收方应该如何处理响应的实体内容。它主要应用于指示浏览器是直接显示内容、还是作为附件下载,以及下载时的文件名建议等。这一字段在处理文件下载、预览等功能时尤为重要

Content-Disposition的值可以是inline或attachment,后面可跟随一个可选的filename参数来指定建议的文件名。

  1. inline: 表示响应内容应该被显示在页面内,即直接在浏览器中打开。这对于图片、HTML文档或脚本等媒体类型是默认行为。

  2. attachment: 表示响应内容应该作为附件处理,即触发文件下载对话框供用户保存文件。大多数情况下,当希望用户提供下载功能时,会使用此选项。

  • 下载
//告诉浏览器不要缓存
  response.setHeader("Pragma", "no-cache");
  response.setHeader("Cache-Control", "no-cache");
  response.setIntHeader("Expires", -1);
  response.setHeader("Content-disposition", "attachment; filename=" + URLEncoder.encode(fileEntity.getData().getFileName(),"UTF-8"));
  response.getOutputStream().write(fileEntity.getData().getBytes());

  • 预览
//告诉浏览器不要缓存
  response.setHeader("Pragma", "no-cache");
  response.setHeader("Cache-Control", "no-cache");
  response.setIntHeader("Expires", -1);
  response.setHeader("Content-disposition", "inline; filename=" + URLEncoder.encode(fileEntity.getData().getFileName(),"UTF-8"));
  response.getOutputStream().write(fileEntity.getData().getBytes());

  • 3
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用HTML5的File API来实现文件下载。下面是一个简单的示例: ```html <input type="file" id="file-input"> <button id="preview-btn"></button> <button id="download-btn">下载</button> <script> const fileInput = document.getElementById('file-input'); const previewBtn = document.getElementById('preview-btn'); const downloadBtn = document.getElementById('download-btn'); // 文件 previewBtn.addEventListener('click', () => { const file = fileInput.files[0]; if (file) { const reader = new FileReader(); reader.readAsDataURL(file); reader.onload = () => { const preview = document.createElement('img'); preview.src = reader.result; document.body.appendChild(preview); }; } }); // 下载文件 downloadBtn.addEventListener('click', () => { const file = fileInput.files[0]; if (file) { const url = URL.createObjectURL(file); const link = document.createElement('a'); link.href = url; link.download = file.name; document.body.appendChild(link); link.click(); document.body.removeChild(link); URL.revokeObjectURL(url); } }); </script> ``` 该示例中,我们通过`<input type="file">`元素来选择要操作的文件。点击“”按钮时,我们使用`FileReader`对象来读取文件数据,并将其转换为Data URL格式,然后在页面上创建一个`<img>`元素来显示该文件。点击“下载”按钮时,我们使用`URL.createObjectURL`方法来生成一个临时的URL,然后创建一个`<a>`元素来指向该URL并设置`download`属性来指定文件名。最后点击该链接来触发下载,完成后需要使用`URL.revokeObjectURL`方法来释放该URL。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值