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

概述

导出excel需求，当点击下载模板或下载反馈结果，axios发起后端接口请求，返回的数据获取 response 时出现乱码，如图：

现总结如下几种处理方法。

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)
    })

以上就是vue中如何下载excel流文件及设置下载文件名的详细内容，更多关于vue中下载excel流文件及设置下载文件名的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 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通过Blob对象实现导出Excel功能示例代码

    不同的项目有不同的导出需求,有些只导出当前所显示结果页面的表格进入excel,这个时候就有很多插件,比如vue-json-excel或者是Blob.js+Export2Excel.js来实现导出Excel功能.但是有些需求因为数据量太大,成千上万条数据,所以是需要后端拼接,然后输出二进制流文件,然后前端直接下载,这次我们谈谈后者的做法. Blob对象表示一个不可变.原始数据的类文件对象,通常我也叫它二进制流对象.我们可以通过Blob对象实现导出Excel功能,先放上代码: <el-button

  • 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 excel上传预览和table内容下载到excel文件中

    excel上传预览 这里会用到 npm i element-ui npm i xlsx 在vue的template中写上,排版和css看个人需求 <div> 选择文件 <input type="file" d="file_input" @change="importf(this)" accept=".csv, application/vnd.openxmlformats-officedocument.spreadshe

  • vue通过接口直接下载java生成好的Excel表格案例

    通过浏览器直接访问导出接口就会自动下载创建好的 Excel 表格.但是我们在vue里使用axios请求接口,一般是处理json数据,如果要处理文件流数据,需要做下特殊处理即可直接下载文件. 假如 下载Excel接口为:/apis/downExcel,则请求如下 import axios from 'axios' export const exportFile = params => { var param = new URLSearchParams() param.append('beginTi

  • Vue项目利用axios请求接口下载excel

    本文实例为大家分享了Vue项目利用axios请求接口下载excel的具体代码,供大家参考,具体内容如下 据我了解的前端的下载方式有三种,第一种是通过a标签来进行下载,第二种时候通过window.location来下载,第三种是通过请求后台的接口来下载,今天就来记录一下这三种下载方式. 方法一:通过a标签 // href为文件的存储路径或者地址,download为问文件名 <a href="/images/logo.jpg" rel="external nofollow&

  • vue使用axios实现excel文件下载的功能

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

  • vue+element表格导出为Excel文件

    vue+element表格导出为Excel文件

    本文实例为大家分享了vue+element表格导出为Excel文件的具体代码,供大家参考,具体内容如下 安装这三个依赖 npm install xlsx file-saver -S npm install script-loader -S -D 组件代码 <template> <div> <el-button type="primary" @click="exportExcel">导出文件</el-button> &l

  • 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导出功能返回数据流前端的处理操作

    项目中有一个导出功能的实现,用博客来记录一下.因为需求对导出表格的数据格式和样式有要求,所以这个导出功能放到后端来做,而且后端返回的是数据流,所以需要处理成想要的表格并导出来. 先看下效果图: 页面效果: 点击 导出Excel 调用导出接口成功了: 后台返回的数据流,一堆看不懂的乱码: 接下来要处理这堆乱码,因为用到的地方多,所以在util.js文件里封装了一个公共方法并抛出: 虽然vue里有封装好的请求接口的方法,但这里要单独用axios,所以先在util.js里引入axios import

  • Vue中通过minio上传文件的详细步骤

    Vue中通过minio上传文件的详细步骤

    目录 1.minio的安装 2.minio.js文件 2.1连接minio 2.2通过stream流上传 2.3通过带预签名的url上传(最好是minio设置了链接永久访问) 2.4删除对象 补充:base64转blob 3.获取时间方法 4.minio设置链接永久访问(客户端) 5.解决跨域问题 6.存储大小限制问题 7.minio官方文档 8.minio设置链接永久访问(其他方法) 总结 在Vue中minio上传文件(stream流和链接) 1.minio的安装 直接使用npm或者cnpm下

  • Java从服务端下载Excel模板文件的两种方法

    Java从服务端下载Excel模板文件的两种方法

    本文实例为大家分享了Java从服务端下载Excel模板文件的具体实现代码,供大家参考,具体内容如下 方法一 (2021年01月更新) 生成excel模板 @RequestMapping("/downloadExcel") public void downloadExcel(HttpServletResponse response, HttpServletRequest request) {         String [] excelHeader = {"姓名",

  • vue中实现图片压缩 file文件的方法

    项目中遇到上传图片需要在前端进行图片压缩,将我的实现思路记录一下.(我已经拿到上传的file文件的前提下) 先创建一个公用的js,这里我的是api.js,里面封装一些常用的方法 将图片压缩的方法写到这个公用的js(api.js)中 //base64转码(压缩完成后的图片为base64编码,这个方法可以将base64编码转回file文件) function dataURLtoFile(dataurl) { var arr = dataurl.split(','), mime = arr[0].ma

  • vue中使用vue-pdf组件实现文件预览及相应报错解决

    vue中使用vue-pdf组件实现文件预览及相应报错解决

    目录 前言 一.安装npm 依赖 二.引入组件 1.html中使用组件 单页 2.数据处理 单页 三.项目使用--代码部分 四.报错解决 总结 前言 使用vue-pdf组件实现文件预览功能 并在文件上增加操作按钮vue3不支持vue-pdf,vue3项目用pdfjs-dist 一.安装npm 依赖 1.在根目录下输入一下命令 npm i pdfjs-dist@2.5.207 --save npm i vue-pdf@4.2.0 --save 2.修改pacakge.json文件 "depende

  • 在vue中通过render函数给子组件设置ref操作

    正常我们的写法是,这样ref不会生效,h是作用在渲染的时候的,而ref是渲染之后才创建的,因此在h函数中使用ref是无效的. render: (h, params) => { return h(expandRow, { ref:'child', props: { row: params.row } }) } 我们常见h函数的用法是: render: (h) => { return h(ele) } => 是es6的用法,相当于 (h) => {} 相当于 function(){},

  • 使用Vue+Spring Boot实现Excel上传功能

    1.使用Vue-Cli创建前端项目 运用vue-cli工具可以很轻松地构建前端项目,当然,使用WebStorm来构建会更加简洁(如图).本文推荐使用WebStorm,因为在后续开发中,IDE会使我们的开发更加简洁.部分配置如图: 2.Navbar编写 作为一个WebApp,Navbar作为应用的导航栏是必不可少的.在本项目中,笔者引入了bootstrap对Navbar进行了轻松地构建.在vue中我们需要在components文件夹中将我们的组件加进去,对于本工程来说,Navbar是我们要加入的第

  • springboot操作阿里云OSS实现文件上传,下载,删除功能

    参考资料:Java操作阿里云OSS操作官方文档 学会看文档,并实际运用也是一种习惯和技能 下面就来简单入门一下,用当下比较热门的Springboot 去操作阿里云OSS文件存储. 1.需求 (没踩过下面的坑的小伙伴可以直接跳过这一章节) 问题简述 首先,我在之前自己做一些开源小项目案例中遇到一些文件上传下载的问题,比如在本机文件上传和下载都可以正常使用,通过将文件上传到Springboot项目的根目录下,按日期分文件夹,文件访问也很方便,可以直接返回文件相对路径地址,并直接可以访问. 问题 然而

  • ASP.NET Core 导入导出Excel xlsx 文件实例

    ASP.NET Core 导入导出Excel xlsx 文件实例

    ASP.NET Core 使用EPPlus.Core导入导出Excel xlsx 文件,EPPlus.Core支持Excel 2007/2010 xlsx文件导入导出,可以运行在Windows, Linux和Mac. EPPlus.Core 是基于EPPlus 更改而来,在Linux 下需要安装libgdiplus . EPPlus:http://epplus.codeplex.com/ EPPlus.Core:https://github.com/VahidN/EPPlus.Core 下面在A

随机推荐