VUE+ElementUI下载文件的几种方式

这篇具有很好参考价值的文章主要介绍了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'文章来源地址https://www.toymoban.com/news/detail-509610.html

/** 
 * 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下载文件的几种方式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Java如何实现下载文件的几种方式

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接:https://blog.csdn.net/Boy_Martin/article/details/126058565

    2024年02月13日
    浏览(68)
  • 记录--盘点前端实现文件下载的几种方式

    前端涉及到的文件下载还是很多应用场景的,那么前端文件下载有多少种方式呢?每种方式有什么优缺点呢?下面就来一一介绍。 通过 a 标签的 download 属性来实现文件下载,这种方式是最简单的,也是我们比较常用的方式,先来看示例代码: 就上面的这个示例,我们点击下

    2024年02月13日
    浏览(52)
  • 前端常用的上传下载文件的几种方式,直接上传、下载文件,读取.xlsx文件数据,导出.xlsx数据

    1.1根据文件流Blob进行下载 1.2根据下载文件链接直接进行下载 html

    2024年02月12日
    浏览(44)
  • 创建线程的几种方式

    线程和进程的区别: 进程是操作系统进行资源分配的最小单元。 线程是操作系统进行任务分配的最小单元,线程隶属于进程。 如何开启线程? 1、继承Thread类,重写run方法。 2、实现Runnable接口,实现run方法。 3、实现Callable接口,实现call方法。通过FutureTask创建一个线程,获

    2024年02月03日
    浏览(56)
  • Unity Android 之 读取下载获取移动端 sdcard 路径下的指定文件夹的所有图片的几种方式的简单整理

    目录 Unity Android 之 读取下载获取移动端 sdcard 路径下的指定文件夹的所有图片的几种方式的简单整理 一、简单介绍 二、实现原理 三、注意事项 四、简单实现步骤 五、关键代码 附录: 一、不同平台使用宏区分路径加载 二、Unity3D中的资源路径 三、Unity3D各平台路径(包括手

    2024年01月19日
    浏览(79)
  • npm 下载的几种方式

    1.npm install moduleName 模块将会被安装到node_modules 目录下 不会把模块依赖写入devDependencies 或 dependencies 节点 运行npm i 初始化项目时不会自动下载 2.npm install --save moduleName 模块将会被安装到node_modules 目录下 会将模块依赖写入 dependencies 节点 运行npm i 初始化项目时会自动下载 运行

    2024年02月08日
    浏览(44)
  • 前端中对象的几种创建方式

    创建对象的几种方式: 1.字面量方式 2.工厂模式 3.构造函数模式 4.原型模式 缺点:创建多个对象时,需要重复代码,不能复用。 作用:批量创建同类型对象,降低代码冗余度。 缺点:创建出的新对象,不知道是什么Person或者Animal类型,需看函数内部代码。 构造函数 是一种特

    2023年04月08日
    浏览(51)
  • Java创建对象的几种方式

    在Java中,对象是程序中的一种基本元素,它通过类定义和创建。本篇教程旨在介绍Java中创建对象的几种方式,包括使用new、反射、clone、反序列化等方式。 在Java中,最常用的创建对象方式是使用new。使用new创建对象的具体步骤如下: 使用new并指定

    2024年02月12日
    浏览(41)
  • python创建虚拟环境的几种方式

    venv是Python的虚拟环境管理工具,它可以创建独立的Python环境,让不同项目使用不同的Python版本和依赖库,避免版本冲突和依赖冲突问题。使用Python venv可以方便地创建、激活、退出、删除虚拟环境,以及在虚拟环境中安装、升级、卸载包等操作。   以下是使用Venv创建和管理

    2024年02月02日
    浏览(53)
  • python中进程的几种创建方式

    在新创建的子进程中,会把父进程的所有信息复制一份,它们之间的数据互不影响。 该方式只能用于Unix/Linux操作系统中,在windows不能用。 multiprocessing模块提供了一个Process类来代表一个进程对象,下面的例子演示了启动一个子进程并等待其结束: join()方法表示主进程等待子

    2024年02月11日
    浏览(63)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包