vue下载excel文件的四种方法实例

2024-08-23 23:24:19

1、通过url下载

即后端提供文件的地址，直接使用浏览器去下载

通过window.location.href = 文件路径下载

window.location.href = `${location.origin}/operation/ruleImport/template`

通过 window.open(url, '_blank')

window.open(`${location.origin}/operation/ruleImport/template`)

这两种使用方法的不同：

window.location：当前页跳转，也就是重新定位当前页；只能在网站中打开本网站的网页。

window.open：在新窗口中打开链接；可以在网站上打开另外一个网站的地址。

2、通过 a 标签 download 属性结合 blob 构造函数下载

a 标签的 download 属性是 HTML5 标准新增的，作用是触发浏览器的下载操作而不是导航到下载的 url，这个属性可以设置下载时使用新的文件名称。

前端创建超链接，接收后端的文件流：

axios.get(`/operation/ruleImport/template`, {
        responseType: "blob" //服务器响应的数据类型，可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'，默认是'json'
    })
    .then(res =>
        if(!res) return
        const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' }) // 构造一个blob对象来处理数据，并设置文件类型

        if (window.navigator.msSaveOrOpenBlob) { //兼容IE10
            navigator.msSaveBlob(blob, this.filename)
        } else {
            const href = URL.createObjectURL(blob) //创建新的URL表示指定的blob对象
            const a = document.createElement('a') //创建a标签
            a.style.display = 'none'
            a.href = href // 指定下载链接
            a.download = this.filename //指定下载文件名
            a.click() //触发下载
            URL.revokeObjectURL(a.href) //释放URL对象
        }
        // 这里也可以不创建a链接，直接window.open(href)也能下载
    })
    .catch(err => {
        console.log(err)
    })

注：请求后台接口时要在请求头上加{responseType: 'blob'}；download 设置文件名时，可以直接设置扩展名，如果没有设置浏览器将自动检测正确的文件扩展名并添加到文件。

3、通过 js-file-download 插件

安装：

npm install js-file-download --S

使用

import fileDownload from 'js-file-download'

axios.get(`/operation/ruleImport/template`, {
        responseType: 'blob' //返回的数据类型
    })
    .then(res => {
        fileDownload(res.data, this.fileName)
    })

4、使用fetch下载

      exportFile() {
          fetch('http://127.0.0.1:8765/course/exportCourse/33', {
              method: 'GET',
              headers: new Headers({
                  'Authorization': Cookie.get('Authorization')
              }),
          })
         .then(res => res.blob())
         .then(data => {
              const blobUrl = window.URL.createObjectURL(data);
              const a = document.createElement('a');
              a.download = this.fileName+'.xlsx';
              a.href = blobUrl;
              a.click();
      });
      },

总结

到此这篇关于vue下载excel文件的四种方法的文章就介绍到这了,更多相关vue下载excel文件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

vue中如何下载excel流文件及设置下载文件名

概述导出excel需求,当点击下载模板或下载反馈结果,axios发起后端接口请求,返回的数据获取 response 时出现乱码,如图: 现总结如下几种处理方法. 1.通过 url 下载即后端提供文件的地址,直接使用浏览器去下载通过window.location.href = 文件路径下载 window.location.href = `${location.origin}/operation/ruleImport/template` 通过 window.open(url, '_blank'
vue下载excel的实现代码后台用post方法

后台方法的参数必须是@RequestBody修饰的. 前台关键代码: axios ( { method : 'post', url : api.exportPlayTime , // 请求地址 data : { choose : type, begindate : startDate, enddate : endDate }, responseType : 'arraybuffer', observe: 'response', } ) .then ( ( res ) => { const fil
vue实现Excel文件的上传与下载功能的两种方式

一.前言项目中使用到比较多的关于Excel的前端上传与下载,整理出来,以便后续使用或分析他人. 1.前端vue:模板下载与导入Excel 导入Excel封装了子组件,点击导入按钮可调用子组件,打开文件上传的对话框,上传成功后返回结果 <el-col style="padding: 10px 0 20px;"> <el-button class="pull-right" icon="el-icon-upload" type=&qu
vue使用axios实现excel文件下载的功能

前端VUE页面上的导出或者下载功能,一般是调用后端的一个接口,由接口生成excel,word这些文件的流信息,返回给vue,然后由vue去构建下载的动作,这边整理了一下,封装了一下,方便以后复用. 封装一个download文件使用年月日时分秒毫秒做为文件的名称,下载为excel文件 /** * 下载文件 */ export const downloadFile = (url,ext, params) => { let accessToken = getStore('accessToken');
vue下载excel文件的四种方法实例

目录 1.通过url下载 2.通过 a 标签 download 属性结合 blob 构造函数下载 3.通过 js-file-download 插件 4.使用fetch下载总结 1.通过url下载即后端提供文件的地址,直接使用浏览器去下载通过window.location.href = 文件路径下载 window.location.href = `${location.origin}/operation/ruleImport/template` 通过 window.open(url, '_b
从性能方面考虑PHP下载远程文件的3种方法

今天在做导出Excel的时候,总是要测试导出的Excel文件,频繁的下载和打开,很麻烦就想着写段代码一气呵成服务端导出Excel==>下载Excel文件到本地==>并打开的操作. 这里摘出PHP下载远端文件的方案,以备忘.其中第3种方法考虑到文件过大时的性能问题. 3种方案: -rw-rw-r-- 1 liuyuan liuyuan 470 Feb 20 18:12 test1_fopen.php -rw-rw-r-- 1 liuyuan liuyuan 541 Feb 20 18:06
Vue导入excel文件的两种方式(form表单和el-upload)

目录前言第一种方法:form表单一.文件上传的三要素是什么? 二.具体使用步骤第二种方法:el-upload 总结前言两种导入文件的方法:form表单和el-upload 第一种方法:form表单一.文件上传的三要素是什么? 文件上传的三要素: 表单post请求 input框的type=file 在form表单中添加enctype=“multipart/form-data” 二.具体使用步骤代码如下(示例): <form action="/" method=&qu
php原生导出excel文件的两种方法(推荐)

第一种方法: $filename='文件名称'; $filetitle='你的标题'; if($_POST){ set_time_limit(10000): $title = ''; ini_set('memory_limit','300M'); header('Content-Type: application/vnd.ms-excel;charset=utf-8'); $name = $title.".xls"; header('Content-Disposition: attac
java读取XML文件的四种方法总结(必看篇)

JAVA操作XML文档主要有四种方式,分别是DOM.SAX.JDOM和DOM4J,DOM和SAX是官方提供的,而JDOM和DOM4J则是引用第三方库的,其中用的最多的是DOM4J方式.运行效率和内存使用方面最优的是SAX,但是由于SAX是基于事件的方式,所以SAX无法在编写XML的过程中对已编写内容进行修改,但对于不用进行频繁修改的需求,还是应该选择使用SAX. 下面基于这四种方式来读取XML文件. 第一,以DOM的方式实现. package xmls; import org.w3c.dom.D
前端axios下载excel文件(二进制)的处理方法

需求:通过后端接口下载excel文件,后端没有文件地址,返回二进制流文件实现:axios(ajax类似) 主要代码: axios:设置返回数据格式为blob或者arraybuffer 如: var instance = axios.creat({ ... //一些配置 responseType: 'blob', //返回数据的格式,可选值为arraybuffer,blob,document,json,text,stream,默认值为json }) 请求时的处理: getExcel().then
Vue 实现双向绑定的四种方法

1. v-model 指令 <input v-model="text" /> 上例不过是一个语法糖,展开来是: <input :value="text" @input="e => text = e.target.value" /> 2. .sync 修饰符 <my-dialog :visible.sync="dialogVisible" /> 这也是一个语法糖,剥开来是: <my
AJAX跨域请求数据的四种方法(实例讲解)

由于浏览器的同源策略 ajax请求不可以接收到请求响应回来的数据请求数据需要调用浏览器的内置构造函数 XMLHttpRequest() 进行实例对象 var xhr = new XMLHttpRequest(); 注意点在IE8之前支持的 ActiveXobject("Microsoft.XMLHTTP"); 记住要进行兼容处理哦在这里我就不写了通过该对象进行获取获取数据的四种状态 xhr.readyState 该属性保存着请求数据的几种状态 1.xhr.open(请
vue实现组件通信的八种方法实例

目录 1.props 父组件--->子组件通信 2.$emit 子组件--->父组件传递 3.bus(事件总线) 兄弟组件通信 4.$parent.$children 直接访问组件实例 5.$refs 6.provide/inject(提供/注入) 多组件或深层次组件通信 7.slot(slot-scope作用域插槽) 子元素-->父元素(类似于通信) 8.vuex状态管理总结对于vue来说,组件之间的消息传递是非常重要的,下面是我对组件之间消息传递的常用方式的总结 1.props
PHP从数组中删除元素的四种方法实例

茴香豆的"茴"字有四种写法,PHP从数组中删除元素也有四种方法 ^_^. 删除一个元素,且保持原有索引不变使用 unset 函数,示例如下: <?php $array = array(0 => "a", 1 => "b", 2 => "c"); unset($array[1]); //↑ 你想删除的key ?> 输出: Array ( [0] => a [2] =>

vue下载excel文件的四种方法实例

目录

1、通过url下载

2、通过 a 标签 download 属性结合 blob 构造函数下载

3、通过 js-file-download 插件

4、使用fetch下载

总结

相关推荐

随机推荐