1. 效果展示

這里的進度展示，可以通過我們之前講到的Vue3實現類ChatGPT聊天式流式輸出(vue-sse實現) SSE技術實現，比如用戶點擊全量下載時，后臺需要將PDF文件打包為ZIP文件，由于量較大，需要展示進度，用戶點擊全量下載后后可到任務中心查看進度。對于任務中心的下載我們如果用瀏覽器自帶下載功能，可以如下

2. 瀏覽器強制高效下載

@Overridepublic void downloadStream(String fileId, HttpServletResponse response) {Path filePath = Paths.get(Constant.FILE_PREFIX + fileId);String fileName = filePath.getFileName().toString();try {if (!Files.exists(filePath)) {response.setStatus(HttpServletResponse.SC_NOT_FOUND);throw new RuntimeException("File not found: " + filePath);}String contentType = Files.probeContentType(filePath);response.setContentType(contentType != null ? contentType : MediaType.APPLICATION_OCTET_STREAM_VALUE);response.setHeader("Content-Disposition", "attachment; filename=\"" + fileName + "\"");response.setContentLengthLong(Files.size(filePath));String acceptEncoding = response.getHeader("Accept-Encoding");if (acceptEncoding != null && acceptEncoding.contains("gzip")) {response.setHeader("Content-Encoding", "gzip");try (FileChannel channel = FileChannel.open(filePath, StandardOpenOption.READ);GZIPOutputStream gzipOut = new GZIPOutputStream(response.getOutputStream())) {channel.transferTo(0, channel.size(), Channels.newChannel(gzipOut));}} else {try (FileChannel channel = FileChannel.open(filePath, StandardOpenOption.READ);OutputStream out = new BufferedOutputStream(response.getOutputStream(), BUFFER_SIZE)) {channel.transferTo(0, channel.size(), Channels.newChannel(out));}}} catch (IOException e) {response.setStatus(HttpServletResponse.SC_INTERNAL_SERVER_ERROR);throw new RuntimeException("Failed to download file: " + e.getMessage(), e);}}

3. 任務中心示例

<template><div class="task"><el-row style="margin: 20px"><el-table :data="dataList" @current-change="handleCurrentChange" border highlight-current-row :header-cell-style="setRowClass" :cell-style="{ textAlign: 'center' }" stripe><el-table-column prop="taskId" label="任務編號"> </el-table-column><el-table-column prop="taskName" label="任務名稱"></el-table-column><el-table-column prop="progress" label="任務進度"><template #default="scope"><el-progress :percentage="scope.row.progress" :color="progressColor"/></template></el-table-column><el-table-column prop="statusDesc" label="任務狀態"></el-table-column><el-table-column prop="createUser" label="創建人"></el-table-column><el-table-column prop="createTime" label="創建日期"><template v-slot="scope">{{ $formatDate(scope.row.createTime, 'yyyy-MM-dd') }}</template></el-table-column><el-table-column prop="operate" align="center" label="操作" width="170px"><template v-slot="scope"><el-button type="primary" size="small" :icon="Download"@click="handleDownload(scope.row)">下載</el-button></template></el-table-column></el-table></el-row><el-row style="float:right; margin-top: 15px;"><paginationbackground@pagination="updatePageInfo":page-size="page.pageSize"v-model:current-page="page.pageNumber":total="page.total"></pagination></el-row></div>
</template>
<script>
import {Delete, Download, Edit, Plus, Search} from "@element-plus/icons-vue";
import Pagination from "@/components/pagination/Index.vue";
import baseUrl from "../../util/baseUrl";export default {name: 'task',computed: {Delete() {return Delete},Edit() {return Edit},Plus() {return Plus},Search() {return Search},Download() {return Download},},components: {Pagination},data() {return {tree: [],dataList: [],// 查詢條件query: {username: '',account: ''},// 選中樹節點信息currentTreeNode: '',// 表格選中行信息currentRow: '',visible: {add: false,edit: false},progressColor: [{color: '#f56c6c', percentage: 20},{color: '#e6a23c', percentage: 40},{color: '#5cb87a', percentage: 60},{color: '#1989fa', percentage: 80},{color: '#6f7ad3', percentage: 100},],page: {pageNumber: 1,pageSize: 10,total: 10},importCustomData: false,fileUpload: {label: '',fileList: [],},url: ''}},created() {// 無需跨域，否則無法接收消息, 這個原因浪費我好多時間if (process.env.NODE_ENV === 'development') {this.url = 'http://127.0.0.1:8080/sse/subscribe?token=' + this.$store.getters.token} else {this.url = 'https://api-uat.sfxs.com/sse/subscribe?token=' + this.$store.getters.token}this.listData()},mounted() {this.connect()},methods: {connect () {// create the client with the user's configconst self = thislet client = self.$sse.create({url: this.url,includeCredentials: false})client.on('message', (data) => {// eslint-disable-next-line no-emptyif (data === '<SSE_START>') {} else {const ret = JSON.parse(data)self.dataList.forEach((item, index, arr) => {if (ret['taskId'] === item['taskId']) {// 更細進度與狀態self.dataList[index]['progress'] = ret['progress']self.dataList[index]['statusDesc'] = ret['statusDesc']}})}})client.on('error', () => { // eslint-disable-lineconsole.log('[error] disconnected, automatically re-attempting connection', 'system')})// and finally -- try to connect!client.connect() // eslint-disable-line.then(() => {console.log('[info] connected', 'system')}).catch(() => {console.log('[error] failed to connect', 'system')})},listData() {const self = thisself.$http.post('/task/list', self.query, 'apiUrl').then(res => {self.dataList = res.recordsself.page.total = res.total})},handleCurrentChange (val) {if (val) {this.currentRow = val}},setRowClass () {return {background: '#F3F3F3', textAlign: 'center', color: 'black'}},updatePageInfo (data) {const self = thisself.page.pageNumber = data.pageNumberself.page.pageSize = data.pageSizeself.listData()},handleDownload(row) {const self = thisself.visible.add = truewindow.open(baseUrl.apiUrl + '/download/stream?fileId=' + row.url, "_blank");}}
}
</script>