VUE+ElementUI下载文件的几种方式(小结)

 更新时间:2023年01月13日 09:50:32   作者:白野泽  
本文主要介绍了VUE+ElementUI下载文件的几种方式(小结),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

1.创建超链接,通过a标签的链接向后端服务发get请求,接收后端的文件流

<a :href='"/user/downloadExcel"' >下载模板</a>

2.创建iframe的方式

<el-button size="mini" type="text" icon="el-icon-download" @click="handleDownload(scope.row)">下载</el-button>
    /* 下载 */
    handleDownload(row) {
      this.loadingOverLay = this.$loading({
        lock: true,
        text: "文件生成中",
        spinner: "el-icon-loading",
        background: "rgba(0,0,0,0.7)",
      });
      var elemIF = document.createElement("iframe");
      elemIF.src = process.env.VUE_APP_BASE_API + "/transcode/download/" + row.id;
      elemIF.style.display = "none";
      document.body.appendChild(elemIF);
      this.loadingOverLay.close();
    },

3.对后端发的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)
      }
    )
  })
}

4.导出json文件

1.安装:

npm install file-saver --save

2.引入:

import FileSaver from 'file-saver'
/** 
 * data: 封装好的json数据 
 * JSON.stringify(data, null, 2): 格式化json数据 方便阅读
 * new Blob(parame1, parame2): 转为Blob文件流.
 * parame1 [] 数据源 
 * parame2 文件流类型
 */
const blob = new Blob([JSON.stringify(data, null, 2)], {type: 'application/json'})
 
/** 
 * FileSaver.saveAs(parame1, parame2)  浏览器保存文件
 * parame1: Blob文件流
 * parame2:文件名
 */
FileSaver.saveAs(blob, '文件名.json')

到此这篇关于VUE+ElementUI下载文件的几种方式(小结)的文章就介绍到这了,更多相关VUE ElementUI下载文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue2移动端+swiper实现异形的slide方式

    vue2移动端+swiper实现异形的slide方式

    这篇文章主要介绍了vue2移动端+swiper实现异形的slide方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • 详解Vue如何进行表单联动与级联选择

    详解Vue如何进行表单联动与级联选择

    表单联动和级联选择是Vue.js中常见的功能,在下面的文章中,我们将讨论如何在Vue.js中实现表单联动和级联选择,感兴趣的小伙伴可以了解一下
    2023-06-06
  • Vue插件实现过程中遇到的问题总结

    Vue插件实现过程中遇到的问题总结

    随着Vue.js越来越火,Vue.js 的相关插件也在不断的被贡献出来,数不胜数,这篇文章主要给大家介绍了关于Vue插件实现过程中遇到的问题,需要的朋友可以参考下
    2021-08-08
  • Vue实现数据导入的四种方法(resource、Axios、Fetch、Excel导入)

    Vue实现数据导入的四种方法(resource、Axios、Fetch、Excel导入)

    本文主要介绍了Vue实现数据导入的四种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07
  • Vue前端利用slice()方法实现分页器

    Vue前端利用slice()方法实现分页器

    分页功能是常见的需求之一,本文主要介绍了Vue前端利用slice()方法实现分页器,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07
  • Vue中import与@import的区别及使用场景说明

    Vue中import与@import的区别及使用场景说明

    这篇文章主要介绍了Vue中import与@import的区别及使用场景说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06
  • 浅谈VUE uni-app 基础组件

    浅谈VUE uni-app 基础组件

    这篇文章主要介绍了uni-app 的基础组件,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-10-10
  • Vue中Axios从远程/后台读取数据

    Vue中Axios从远程/后台读取数据

    今天小编就为大家分享一篇关于Vue中Axios从远程/后台读取数据,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-01-01
  • 关于Vue中this.$set的正确使用

    关于Vue中this.$set的正确使用

    我们在项目开发的过程中,经常会遇到这种情况:为data中的某一个对象添加一个属性,我们该如何解决这个问题呢,下面小编给大家带来了Vue中this.$set的正确使用,感兴趣的朋友跟随小编一起看看吧
    2022-12-12
  • vue实现按钮文字动态改变

    vue实现按钮文字动态改变

    这篇文章主要介绍了vue实现按钮文字动态改变方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11

最新评论