vue2实现后台管理系统导出文件并进行下载

努力站桩的奶酪呦

于 2023-04-10 14:45:25 发布

阅读量215

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/liuli0927/article/details/130059779

版权

本文介绍如何在Vue2的后台管理系统中实现文件的导出和下载功能。通过在src/utils创建common.js模块，并在main.js中全局注册，以便在应用中调用this.$common进行文件操作。

摘要由CSDN通过智能技术生成

 <el-button
            type="danger"
            @click="expot"
            icon="el-icon-download"
            v-permission="'merchants:enter:tenant:export'"
            >导出</el-button
          >

// 导出excel表
      expor(where) {
        console.log(where, '导出elcel表');
        this.req
          .get('后端接口', {
            params: where,//可以进行搜索条件帅选出来下载
            deep: true,
            responseType: 'blob'
          })
          .then((res) => {
            this.$common.downFile(res);//这个this.$common是一个js文件，之后全局挂载
          });
      },

在src下面utils下面新建一个common.js

export default {
  downFile(octetStream) {
    let blob = new Blob([octetStream.data], {
      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
    });