a标签下载、blob下载、两种方法实现下载导出功能

最新推荐文章于 2024-07-04 15:15:40 发布

freya_Du

最新推荐文章于 2024-07-04 15:15:40 发布

阅读量1.7k

点赞数 1

分类专栏：前端文章标签： javascript vue.js html

本文链接：https://blog.csdn.net/freya_Du/article/details/113500074

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

方法一：a标签下载，最简单的下载

html代码~

 <div v-if="idx==0">
            <el-button @click="uploadUser" ><a :href='`http://192.168.2.151:8000/download?batchNumber=${this.formLabelAlign.batchNumber}`'>导出</a></el-button>
  </div>

methods方法

   /**
     * 导出
     */
    uploadUser(){
        this.queryParams = this.formLabelAlign
        ExportData(this.queryParams)
          .then(response => {
             this.$message({
                type: 'success',
                message: '导出成功!'
              })
              this.DownloadVisible = false
          })
          .catch(error => {
              this.DownloadVisible = false
          })
    },

方法二：blob 下载

html代码

      <el-button plain style="color:#FF9966" @click="getExcel()">导出</el-button>

JS代码

 /**
     * 下载功能
     */
    getExcel(index, row) {
      // const user = this.$store.state.userToken
      axios({
        method: 'post',
        url: 'http://111.205.85.40:8083/toll/vehicle/export/onQueryRoute',
        headers: {
          'Content-Type': 'application/json'
          // 'Authorization': `Bearer ${this.$store.state.userToken}`,
        },
        data: this.nowqueryData,
        responseType: 'arraybuffer', // 或者responseType: 'blob'
        xsrfHeaderName: 'Authorization'
      })
        .then(res => {
          const blob = new Blob([res.data], {
            type: 'application/vnd.ms-excel'
          })
          const objectUrl = URL.createObjectURL(blob)
          window.location.href = objectUrl
        })
        .catch(err => {
          this.$message.error(error.msg)
        })
    },