使用eggjs + axios post方式通过blob对象进行文件下载

今天药忘吃喽~ 2022-12-28 09:17 270阅读 0赞

以下是egg.js的后台代码

const Controller = require('egg').Controller;
    const path = require('path');
    const fs = require('fs');
    
    class HomeController extends Controller { 
      async index() { 
        const filePath = path.resolve(this.app.config.static.dir, 'file_message_to.png');
        this.ctx.attachment('file_message_to.png');
        this.ctx.set('Content-Type', 'image/png');
        this.ctx.body = fs.createReadStream(filePath);
      }
    }
    module.exports = HomeController;

以下是前台代码

<template>
      <div @click="goDownload">按钮</div>
    </template>
    <script>
    import axois from 'axios';
    export default { 
      methods: { 
        goDownload() { 
          axois({ 
          url: '/home',
          method: 'post',
          responseType: 'blob'
        }).then(res => { 
            this.download(res.data, res.headers);
            
          })
        },
        download(data, headers) { 
          // 以下的代码可以注释掉，因为本身data就是blob对象。Blob构造函数也可以接受一个Blob作为参数，所以加上也没问题
          // var blob = new Blob([data], { 
          // type: headers['content-type']
          // });
          var url = window.URL.createObjectURL(blob);
          var a = document.createElement("a");
          a.href = url;
          a.download = 'filename.png';
          a.click();
        }
      }
    }
    </script>

**createObjectURL用法**

objectURL = URL.createObjectURL(object);

参数：object  
用于创建 URL 的 File 对象、Blob 对象或者 MediaSource 对象。

函数返回值  
一个DOMString包含了一个对象URL，该URL可用于指定源 object的内容。

**兼容性**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ1OTg2Ng_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ1OTg2Ng_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ1OTg2Ng_size_16_color_FFFFFF_t_70]: /images/20221120/df0ec1d0f9534e3e82b37d7bdcb19a40.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ1OTg2Ng_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201216140120764.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ1OTg2Ng==,size_16,color_FFFFFF,t_70