vue从后台下载.zip压缩包文件

小灰灰 2022-12-24 07:57 416阅读 0赞

### vue前后端分离，使用element的el-button组件从后台下载文件，并且解决乱码问题  ###

1.添加下载按钮

![20201127140217565.png][]

2.（更正版）用axios（\{\}）这种方式，配置参数

this.$axios({
                      method: "POST",
                      url: "/api/image_down",
                      responseType: "blob",
                      data: that.qs.stringify({
                        get_id: that.cy_id,
                      }),
                   }).then((res) => {
                        if (response.data.size === 0) {
                          console.log('下载失败')
                        } else {
                          this.downloadFile(res.data);
                        }
                   }).catch((error) => this.$message.error(error));
        downloadFile(data) {
          let blob = new Blob([data], { type: "application/zip" });
          let url = window.URL.createObjectURL(blob);
          const link = document.createElement("a"); // 创建a标签
          link.href = url;
          link.download = "下载图片"; // 重命名文件
          link.click();
          URL.revokeObjectURL(url); // 释放内存
        },

![20201127142022949.png][]

type：'application/zip'可以更改下载文件的类型，具体有以下这些类型

'doc'        => 'application/msword',
        'bin'        => 'application/octet-stream',
        'exe'        => 'application/octet-stream',
        'so'        => 'application/octet-stream',
        'dll'        => 'application/octet-stream',
        'pdf'        => 'application/pdf',
        'ai'        => 'application/postscript',
        'xls'        => 'application/vnd.ms-excel',
        'ppt'        => 'application/vnd.ms-powerpoint',
        'dir'        => 'application/x-director',
        'js'        => 'application/x-javascript',
        'swf'        => 'application/x-shockwave-flash',
        'xhtml'        => 'application/xhtml+xml',
        'xht'        => 'application/xhtml+xml',
        'zip'        => 'application/zip',
        'mid'        => 'audio/midi',
        'midi'        => 'audio/midi',
        'mp3'        => 'audio/mpeg',
        'rm'        => 'audio/x-pn-realaudio',
        'rpm'        => 'audio/x-pn-realaudio-plugin',
        'wav'        => 'audio/x-wav',
        'bmp'        => 'image/bmp',
        'gif'        => 'image/gif',
        'jpeg'        => 'image/jpeg',
        'jpg'        => 'image/jpeg',
        'png'        => 'image/png',
        'css'        => 'text/css',
        'html'        => 'text/html',
        'htm'        => 'text/html',
        'txt'        => 'text/plain',
        'xsl'        => 'text/xml',
        'xml'        => 'text/xml',
        'mpeg'        => 'video/mpeg',
        'mpg'        => 'video/mpeg',
        'avi'        => 'video/x-msvideo',
        'movie'        => 'video/x-sgi-movie',

参考文章：[https://blog.csdn.net/qq\_42345108/article/details/102842492?utm\_medium=distribute.pc\_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.control&depth\_1-utm\_source=distribute.pc\_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.control][https_blog.csdn.net_qq_42345108_article_details_102842492_utm_medium_distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.control_depth_1-utm_source_distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.control]

[20201127140217565.png]: /images/20221120/a42abeed4261477f9fd37852a1f34dc1.png
[20201127142022949.png]: /images/20221120/4e292a0c6b06423c89c4ea4b61f4792c.png
[https_blog.csdn.net_qq_42345108_article_details_102842492_utm_medium_distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.control_depth_1-utm_source_distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.control]: https://blog.csdn.net/qq_42345108/article/details/102842492?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.control