vue 项目中 base64格式文件下载

在这里插入图片描述
其中 this.info 是里包含后端返回的base64文件
数据结构如图
在这里插入图片描述

<template>
  <div>
    <el-dialog
      :title="title"
      width="40%"
      :visible.sync="visible"
      :before-close="onClose"
      :close-on-click-modal="false"
      v-on="$listeners"
    >

      <el-alert
        :title="info.msg"
        type="warning"

        :closable="false"
      />

      <p>
        <el-button
          size="small"
          type="text"

          :loading="loading"
          @click.stop="downloadFun"
        >下载文件</el-button>

      </p>

      <div slot="footer" class="dialog-footer">
        <el-button @click="onClose">取消</el-button>
      </div>

    </el-dialog>

  </div>
</template>

<script>

export default {
  props: {
    visible: {
      type: Boolean,
      default: true
    },
    info: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      title: '',
      loading: false
    }
  },
  mounted() {
    // console.log(this.info, 'info')
    this.title = this.info.extra.fileName
  },
  methods: {
    onClose() {
      this.$emit('update:visible', false)
    },
    downloadFun() {
      this.loading = true

      const blob = this.dataURLtoBlob(this.info.extra.fileStream)
      const link = document.createElement('a')
      link.style.display = 'none'
      link.href = URL.createObjectURL(blob)
      link.setAttribute('download', this.info.extra.fileName)
      document.body.appendChild(link)
      link.click()

      this.loading = false
    },
    dataURLtoBlob(base64Str) {
      var bstr = atob(base64Str); var n = bstr.length; var u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      // 下载的是excel格式的文件
      return new Blob([u8arr], { type: 'application/vnd.ms-excel' })
    }

  }
}
</script>

<style lang="scss" scoped>

</style>

GitHub 加速计划 / vu / vue
80
16
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:4 个月前 )
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 6 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 6 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐