vue 文件下载方法_vue下载文件流

vue 文件下载方法_vue下载文件流一,前端创建超链接,通过a标签的链接向后端服务发get请求 1、页面中a标签的方式: <a class="downloadUrl" v-show="false" :href="downloadUrl" ref="downlo

vue

一,前端创建超链接,通过a标签的链接向后端服务发get请求

1、页面中a标签的方式:

<a class="downloadUrl" v-show="false" :href="downloadUrl" ref="downloadUrl"></a>

this.downloadUrl = res.data.url;
let _this = this;
setTimeout(function(){
    _this.$refs.downloadUrl.dispatchEvent(new MouseEvent('click'))
},200)

2、动态创建a标签

fileToZip(url){
    //url:下载文件的url
    let a = document.createElement('a')
    a.href = url;
    a.click();
}

3、链接跳转

window.location.href = this.downloadUrl;

 

二、通过iframe的方式

handleExport(url) {
    var elemIF = document.createElement('iframe')
    elemIF.src = url;
    elemIF.style.display = 'none'
    document.body.appendChild(elemIF)
}

三、通过对后端发送post请求,使用blob格式:

<el-button  size="mini" class="filter-item" type="primary" icon="el-icon-download" @click="handleExport(scope.row)">导出</el-button>
//method方法
handleExport(row){
const url="/user/downloadExcel"
const options = {snapshotTime:formatDate(new Date(row.snapshotTime), 'yyyy-MM-dd hh:mm')}
exportExcel(url,options)
}
/**
 * 封装导出Excal文件请求
 * @param url
 * @param data
 * @returns {Promise}
 */
//api.js
export function exportExcel(url, options = {}) {
  return new Promise((resolve, reject) => {
    console.log(`${url} 请求数据,参数=>`, JSON.stringify(options))
    axios.defaults.headers['content-type'] = 'application/json;charset=UTF-8'
    axios({
      method: 'post',
      url: url, // 请求地址
      data: options, // 参数
      responseType: 'blob' // 表明返回服务器返回的数据类型
    }).then(
      response => {
        resolve(response.data)
        let blob = new Blob([response.data], {
          type: 'application/vnd.ms-excel'
        })
        console.log(blob)
        let fileName = Date.parse(new Date()) + '.xlsx'
        if (window.navigator.msSaveOrOpenBlob) {
          // console.log(2)
          navigator.msSaveBlob(blob, fileName)
        } else {
          // console.log(3)
          var link = document.createElement('a')
          link.href = window.URL.createObjectURL(blob)
          link.download = fileName
          link.click()
          //释放内存
          window.URL.revokeObjectURL(link.href)
        }
      },
      err => {
        reject(err)
      }
    )
  })
}

 

今天的文章vue 文件下载方法_vue下载文件流分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/45755.html

(0)
编程小号编程小号
上一篇 2023-09-06
下一篇 2023-09-06

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注