vue下载excel的实现代码后台用post方法

后台方法的参数必须是@RequestBody修饰的。

前台关键代码:

axios ( {
     method : 'post',
     url : api.exportPlayTime , // 请求地址
     data : {
      choose : type,
      begindate : startDate,
      enddate : endDate
     },
     responseType : 'arraybuffer',
     observe: 'response',
    } )
     .then ( ( res ) => {

      const fileName = ""+filename+".xlsx"
      let blob = new Blob([res.data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"});
      if ( 'download' in document.createElement ( 'a' ) ) { // 非IE下载
       const elink = document.createElement ( 'a' )
       elink.download = fileName
       elink.style.display = 'none'
       elink.href = URL.createObjectURL ( blob )
       document.body.appendChild ( elink )
       elink.click ()
       URL.revokeObjectURL ( elink.href ) // 释放URL 对象
       document.body.removeChild ( elink )
      } else { // IE10+下载
       navigator.msSaveBlob ( blob, fileName )
      }
     })
download(data) {
    if (!data) {
     return
    }
    let url = window.URL.createObjectURL(new Blob([data]))
    let link = document.createElement('a')
    link.style.display = 'none'
    link.href = url
    link.setAttribute('download', 'excel.xlsx')

    document.body.appendChild(link)
    link.click()
   },

总结

以上所述是小编给大家介绍的vue下载excel的实现代码后台用post方法，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

赞 (0)

相关推荐

  • Vue2.0实现将页面中表格数据导出excel的实例

    这两天学习了Vue.js 感觉知识点挺多的,所以,今天添加一点小笔记. 项目中将后台返回的数据v-for到表格中,然后需要将这个表格导出为EXCEL 只说怎么做. 一.需要安装三个依赖: npm install -S file-saver xlsx npm install -D script-loader 二.项目中新建一个文件夹:(vendor---名字任取) 里面放置两个文件Blob.js和 Export2Excel.js. Blob.js和 Export2Excel.js文件下载地址:E

  • Vue导出json数据到Excel电子表格的示例

    Vue导出json数据到Excel电子表格的示例

    网上看了很多文档感觉都不全,这里写一篇完整的详细教程. 一.安装依赖(前面基本一样) npm install file-saver --save npm install xlsx --save npm install script-loader --save-dev 二.下载两个所需要的js文件Blob.js和 Export2Excel.js. 这里贴下下载地址: Export2Exce_jb51.rar 三.src目录下新建vendor文件夹,将Blob.js和 Export2Excel.js

  • vue2.0 + element UI 中 el-table 数据导出Excel的方法

    1.安装相关依赖 主要是两个依赖 npm install --save xlsx file-saver 如果想详细看着两个插件使用,请移步github. https://github.com/SheetJS/js-xlsx https://github.com/eligrey/FileSaver.js 2.组件里头引入 import FileSaver from 'file-saver' import XLSX from 'xlsx' 3.组件methods里写一个方法 exportExcel

  • 基于vue+canvas的excel-like组件实例详解

    基于vue+canvas的excel-like组件实例详解

    a vue component,基于vue的表格组件,主要解决大数据量的表格渲染性能问题,使用canvas绘制表格,同时支持类似excel的批量选中,复制黏贴删除,实时编辑等功能. vue-grid-canvas Install NPM / Yarn Install the package: npm install vue-canvas-grid --save Then import it in your project import Vue from 'vue' import Grid fro

  • vue中导出Excel表格的实现代码

    项目中我们可能会碰到导出Excel文件的需求,一般后台管理系统中居多,将table中展示的数据导出保存到本地.当然我们也可以通过一些处理来修改要导出的数据格式,具体需求具体对待. 1.首先我们需要安装3个依赖,file-saver.xlsx和script-loader. 使用npm安装: npm install file-saver xlsx -S npm install script-loader -D 使用yarn安装: yarn add file-saver xlsx -S yarn ad

  • Vue实现导出excel表格功能

    引言: 最近使用vue在做一个后台系统,技术栈 vue + iView ,在页面中生成表格后, iView可以实现表格的导出,不过只能导出csv格式的,并不适合项目需求. 如果想要导出Excel 在src目录下创建一个文件(vendor)进入 Blob.js 和 Export2Excel.js npm install -S file-saver 用来生成文件的web应用程序 npm install -S xlsx 电子表格格式的解析器 npm install -D script-loader 将

  • 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文件的四种方法实例

    目录 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

  • vue.js element-ui validate中代码不执行问题解决方法

    vue.js element-ui validate中代码不执行问题解决方法

    先说结论 在自定义验证里面每一个判断都要有callback(),就是要保证callback()一定会执行到 因为要验证数字,参考了官网参考代码如下,发现有如下图bug,当输入为以数字开头包含字符串的内容时,验证不会报错,因为业务逻辑也不相符,随改写代码 <el-form-item label="年龄" prop="age"> <el-input v-model.number="ruleForm2.age"></el-

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

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

  • 解决vue下载后台传过来的乱码流的问题

    解决vue下载后台传过来的乱码流的问题

    后台返回的乱码流 解决办法: 请求方式用的是axios,主要加关键的 {responseType: 'blob'} axios封装 export function postDownload(url, data) { return new Promise((resolve, reject) => { instance.post(url,data,{responseType: 'blob'}).then(response => { resolve(response); }, err => {

  • Vue导入excel表,导入失败的数据自动下载

    Vue导入excel表,导入失败的数据自动下载

    有这么一个需求:一个导入按钮,点击按钮导入excel表,如果excel表中部分数据导入失败,则自动下载该部分导入失败数据的excel表,如果全部导入成功,则提示"导入成功". 首先附上ElementUI的上传文件组件 Element - The world's most popular Vue UI framework Element,一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 https://element.eleme.cn/#/zh-CN/compon

  • Vue实现Excel本地下载及上传的方法详解

    Vue实现Excel本地下载及上传的方法详解

    相信大家在项目中经常会遇到一些上传下载文件的相关功能,本文就Excel的相关功能进行简述: 咱直接看代码: <div class="import-main-content"> <div class="import-main-button" @click="checkFile"> <div class="import-center" style="cursor: hand">

  • 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

  • React获取Java后台文件流并下载Excel文件流程解析

    记录使用blob对象接收java后台文件流并下载为xlsx格式的详细过程,关键部分代码如下. 首先在java后台中设置response中的参数: public void exportExcel(HttpServletResponse response, String fileName, String sheetName, List<String> titleRow, List<List<String>> dataRows) { OutputStream out = nu

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

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

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

随机推荐