【Vue+Elementui】后端返回文件流,前端接收文件流并下载文件

      var da = {
        'cs1': '参数1',
        'cs2': '参数2',
      }
      // 响应格式决定了是否能接收到文件流,这里文件流设置的响应格式为arraybuffer
      // withCredentials设置false,跨域请求
      axios({
        method: 'POST',
        responseType: 'arraybuffer',
        url: '接口地址',
        withCredentials: false,
        data: da
      }).then(res => {
        // res.data为接口所返回的文件流
        // vnd.openxmlformats-officedocument.spreadsheetml.sheet表示设置下载格式为xlsx
        // type是可变的,例如pdf的type为application/pdf等
        var blob = new Blob([res.data], {
          type: 'application/vnd.openxmlformats-           
                 officedocument.spreadsheetml.sheet;chartset=UTF-8'
        })
        // 新窗口打开
        var url = window.URL.createObjectURL(blob)
        var a = document.createElement('a')
        a.href = url
        // 文件名
        a.download = this.GetFileName()
        a.click()
      })

  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
你可以使用Vue.js和Element UI来实现前端界面,使用Spring Boot来处理后端逻辑来实现文件模板的上传和下载功能。 首先,你可以创建一个Vue组件来处理文件上传和下载的界面。可以使用Element UI中的Upload组件来实现文件上传功能,使用Button组件来实现文件下载功能。在上传组件中,你可以设置上传的文件类型和大小限制,并在上传成功后获取到文件的URL或者其他信息。 接下来,在后端使用Spring Boot来处理上传和下载的逻辑。你可以创建一个Controller来处理文件上传和下载的请求。在文件上传的方法中,你可以使用MultipartFile来接收上传的文件,并将其保存到服务器上的某个目录中。在文件下载的方法中,你可以根据传入的文件名或者其他标识,从服务器上读取相应的文件,并将其以的形式返回前端。 以下是一个简单的示例代码: 前端Vue.js + Element UI): ```vue <template> <div> <el-upload class="upload-demo" action="/api/upload" :on-success="handleSuccess" :before-upload="beforeUpload" > <el-button type="primary">点击上传</el-button> </el-upload> <el-button type="primary" @click="downloadTemplate">下载模板</el-button> </div> </template> <script> export default { methods: { handleSuccess(response) { // 处理上传成功后的逻辑 console.log(response); }, beforeUpload(file) { // 设置上传文件的类型和大小限制 const fileType = file.type; const fileSize = file.size / 1024 / 1024; // MB const allowedTypes = ['application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document']; // 允许的文件类型 const maxFileSize = 10; // 允许的最大文件大小,单位:MB if (!allowedTypes.includes(fileType)) { this.$message.error('只能上传pdf、doc或docx格式的文件'); return false; } if (fileSize > maxFileSize) { this.$message.error(`文件大小超过了${maxFileSize}MB`); return false; } return true; }, downloadTemplate() { // 处理下载模板的逻辑 window.location.href = '/api/download'; }, }, }; </script> ``` 后端(Spring Boot): ```java @RestController @RequestMapping("/api") public class FileController { @PostMapping("/upload") public String uploadFile(@RequestParam("file") MultipartFile file) { // 处理文件上传逻辑 // 可以将上传的文件保存到服务器上的某个目录中 return "上传成功"; } @GetMapping("/download") public void downloadTemplate(HttpServletResponse response) { // 处理文件下载逻辑 // 根据文件名或者其他标识,从服务器上读取相应的文件,并将其以的形式返回前端 String fileName = "template.docx"; // 下载文件名 String filePath = "/path/to/template.docx"; // 文件在服务器上的路径 try { File file = new File(filePath); InputStream inputStream = new FileInputStream(file); response.setContentType("application/octet-stream"); response.setHeader("Content-Disposition", "attachment; filename=" + URLEncoder.encode(fileName, "UTF-8")); IOUtils.copy(inputStream, response.getOutputStream()); response.flushBuffer(); } catch (Exception e) { e.printStackTrace(); } } } ``` 这是一个简单的示例,你可以根据自己的需求进行进一步的调整和优化。希望对你有帮助!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值