当前位置: 首页 > news >正文

vue+jave实现文件报表增加文件下载功能

需求背景:系统有文件交互功能。但没有做页面展示。为了测试方便,写了报表展示并可下载文件做检查。(所以下载是依赖表数据的)

使用语言和框架:
前端:vue-cli 后端:springBoot

前端实现
1、在报表vue文件,显示下载按钮并实现下载接口请求和处理。

//报表操作栏添加下载按招
//  slot-scope="{ row, $index ) -- 绑定行数据
// downloadFile(row, $index)"-- 调下载方法,入参行数据
// v-if="'0, 1, 2, 6+ 7 . indexOf(row.FILE_STATUS)>= 0” -- 指定文件状态才显示下载按钮 
<el-table-colum label="操作”width="120" fixed="right" align="center">
<template slot-scope="{ row, $index }"
<el-button v-if="2,3,5,9 '.indexOf(row. FILE_STATUS) >= 0" type="primary" size="mini" @c1ick="downloadFile(row, $index)>下载</el-button>
<el-button> v-if="'0, 1; 2, 6, 7'. indexOf(row.FILE_STATUS) >= 0" type-"primary" size="mini" @click="openUploadFileDielog(row,$index)">上传</el-button>
</template)
</el-table-column>
// js脚本
<script>
//导入需要用到的api
import { getReportList,downloadFile } from '@/api/report'// method 增加下载方法
//文件下载
downloadFile(row){ 
const params ={
fileType : encodeURIComponent(row.FILE_TYPE ), 
fileDir : encodeURIComponent(row.FILE_DIR), 
id:row.ID}
downloadFile(params).then(res ->{ 
console.log("下载的文件流”,res)
const link=document.createElement('a'); 
try{
let blob =res.data //如果后台返回的直接是b1ob对象类型,直接获取数据
console.log(JSON.stringify(res.headers ))
let _fileName = res.headers['content-disposition' ].split('; ')[1].split('=')[1];//拆解读取文件名
link.style.display='none';
const url = window.URL || window.webkitURL || window.moxURL;
link.href=window.URL.createObjectURL(new Blob([blob],(type:'application/txt'}));
link.download =_fileName; //下载的文件名称
link.click();
window.URL.revokeObjectURL(ur1);
}catch (e){
console.log('下载的文件出错',e)
}
})
}
</script>

2、接口管理页面,新增下载接口
\项目路径\src\api\report.js

// 下载接口
export function downloadFile(data) {
return request({
url: '/downloadFile', 
method: 'post', 
timeout: 90000,
responseType: 'blob', 
data
})
}

后端实现
1、controller新增接口

@RequestMapping(value ={"/{env}/downloadFile"})
public vaid downloadFile(@PathVariable String env, @valid FileDTO fileDTO,HttpServletRequest httpRequest,HttpServletResponse response) throws IOException {
xxServiceImpl.downloadFi1e(env,response,fileDTO);

xxServiceImpl = service类名

2、service层实现下载功能

public void downloadFile(String env, HttpServletResponse response,FileDTO fileDTO) throws BizException, IOException {
System,out.println("downloadFile fileDTO =" + fileDTO);
// 本来是需要通过fileDTO来获取文件路径的,省略,假设文件路径在./filePath/fileName.XX  
//服务器文件路径,仅当下载服务跟文件在同一个服务器时可行。如果文件在其他服务器,需要开通ssh访问权限后,通过 sshConnect来获取文件。
String localPath ="./filePath/fileName.XX"; 
String os = System.getProperty("os.name").toLowerCase();
// 方便本地调式下载功能
if (os.contains("windows")){
localPath = "D:\localPath\fileName.xx"; 
}
OutputStream out= null; 
InputStream is= null;
try{
File file = new File(localPath);
//包装错误信息
if (!file.exists()){
System.out.println("文件不存在"+ localPath); 
JSONObject res = new JSONObject();
String err = localPath +”文件不存在"; 
res.put("desc",err);
response.setContentType("application/json;charset=UTF-8");
response.setCharacterEncoding("UTF-8");
response.getOutputStream().write(res.toString().getBytes("UTF-8")); 
return;
}
String fileName =file.getName();
fileName = new String(fileName.getBytes("UTF-8"),"iso8859-1"); 
System.out.println("fileName="+ fileName);
//防止前端找不到 content-disposition
response.setHeader("Access-Control-Expose-Headers", "content-disposition"); 
response.setHeader("content-disposition","attachment;filename="+ fileName);
response.setContentType("application/x-download"); 
response,setCharacterEncoding("GBK"); 
response.addHeader("Pargam","no-cache");
response,addHeader("Cache-Control", "no-cache"); 
response.flushBuffer();
//获取文件流
is = new FileInputStream(fu11Fi1eNamePath); 
int len =0;
byte[] b = new byte[1024];
out = response.getOutputStream(); 
while ((len = is.read(b)) != -1){
//将缓冲区数据输出到浏览器 
out.write(b,0, len);
}
out.flush( );
} catch (Exception e) {
System.out .println("e.getMessage() = " + e.getMessage());
} finally {
try{
if (null != out) {
out.close();
}
if (null != is) {
is.close();
} catch (Exception e){
System.out.println("e = " + e.getMessage());
}}}

ps: 依赖包都是框架有的,爆红的位置按键alt+enter,按提示导入即可。

http://www.lryc.cn/news/368962.html

相关文章:

  • 网站安全性评估方法
  • 【小程序】WXML模板语法
  • [数据集][目标检测]厨房积水检测数据集VOC+YOLO格式88张2类别
  • QSlider样式示例
  • 【Linux】进程3——PID/PPID,父进程,子进程
  • 开发常用的组件库
  • 深度解析地铁票务系统的技术架构与创新应用
  • Python集合的基本概念和使用方法
  • 谷歌浏览器124版本Webdriver驱动下载
  • 十大排序
  • 微信小程序学习笔记(1)
  • OpenGauss数据库-6.表空间管理
  • 相约乌镇 续写网络空间命运与共的新篇章(二)
  • 【全网最简单的解决办法】vscode中点击运行出现仅当从 VS 开发人员命令提示符处运行 VS Code 时,cl.exe 生成和调试才可用
  • NFS共享存储服务
  • Docker面试整理-Docker 常用命令
  • Cinema 4D 2024 软件安装教程、附安装包下载
  • 2024全国高考作文题解读(Chat GPT 4.0版本)
  • 欧美北美南美国外媒体投稿和东南亚中东亚洲媒体海外新闻发稿软文推广营销策略有哪些?
  • Rust-10-数据类型
  • C#面:PDB是什么东西? 在调试中它应该放在哪里
  • C#--使用CMake构建C++程序调用示例
  • 三十七篇:大数据架构革命:Lambda与Kappa的深度剖析
  • Vue3【十五】标签的Ref属性
  • Java实现数据结构——顺序表
  • 线程知识点总结
  • 计算机网络:数据链路层 - 扩展的以太网
  • 视频修复工具,模糊视频变清晰!
  • 协程库——面试问题
  • 数据结构与算法题目集(中文)6-2顺序表操作集