Vue 兼容IE9的后台下载excel文件

2,112 阅读1分钟

前端代码:

html部分:新建一个a标签,后面要通过他来下载

    <div class="activityDetailBtn">
      <ct-button style="float:right" @click="back">返回</ct-button>
      <ct-button
        v-if="isVisible"
        type="save"
        style="float:right;margin-right:4px"
        @click="toedit"
      >
        修改
      </ct-button>
      <ct-button v-if="canExport" style="float:right;margin:0 10px" @click="handleDownload">导出结果</ct-button>
      <a id="myDownload" href=""></a>
    </div>

js部分: 点击导出按钮时给a标签的href属性赋值,并触发a标签点击事件 (这里注意:recmdName这个参数传了中文时页面会报400错误)

    handleDownload() {
      document.getElementById('myDownload').href = process.env.VUE_APP_BASE_API + '/***/***/***?recmdId='
      + this.RecommendBase.recommendID + '&recmdName=' + this.RecommendBase.title + '&x-auth-token=' + getToken() + '&time=' + new Date().getTime()
      document.getElementById('myDownload').click()
    }

拼上token防止后台过滤器拦截,再加个time时间戳(IE的get请求默认会从缓存里取)

后端代码:

这边只着重介绍前端,后端就是正常的流返回就行了(不贴详细代码了,网上例子很多)

这样就行了,不要用axios发送请求然后用Blob转换那种方式,那种方式只能兼容到IE10