vue下载excel直接上代码

1.使用vue的el-button标签定义一个点击事件

<el-form-item>

<el-button size="small" type="text" @click="downloadTemplate">下载模板</el-button>

</el-form-item>

2.downloadTemplate下载模板方法

 //下载excel模板downloadTemplate(){axios({url: this.$http.adornUrl('localhost:8080/demo/export'),method: 'POST',responseType: 'blob', //不可省，非常重要headers: { // 设置请求头token: Vue.cookie.get('token')//你的token认证}}).then(res => {let fileName = window.decodeURI(res.headers['content-disposition'].split('=')[1]);let contentType = res.headers['content-type'];let blob = new Blob([res.data], {type: contentType + ';charset=utf-8'});let downloadElement = document.createElement('a');let href = window.URL.createObjectURL(blob); //创建下载的链接downloadElement.href = href;downloadElement.download = fileName; //下载后文件名document.body.appendChild(downloadElement);downloadElement.click(); //点击下载document.body.removeChild(downloadElement); //下载完成移除元素window.URL.revokeObjectURL(href); //释放掉blob对象})},

3.Java后台接口代码

 /*** 模板下载* @param response*/@RequestMapping("/export")public void moduleExport(HttpServletResponse response){ExcelFactory.createWriter(QuestionExcelVo.class, response).valid(true).write(null,subjectMap).flush();}

vue下载excel直接上代码相关推荐

js vue 下载excel(.xls)文件
@[TOC](js vue 下载excel(.xls)文件) 先看下载下来的excel文件 1.首先,后端给到的是一个文件在服务器中的存储地址 D:\MaxSecFile\Export\Alarm_2 ...
vue下载excel表格模板和导入excel表格数据
vue下载excel表格模板和导入excel表格数据 vue制作excel表格模板给前端下载 vue制作excel表格模板给前端下载最近有个需求,需要导入excel表格,并且还需要制作模板给用户下载 ...
Vue 下载 Excel 文件
Vue 下载 Excel 文件 Vue前端将List列表下载为Excel文件安装依赖包首先前端将List列表生成Excel文件需要下载几个依赖包. npm install -S file-save ...
php上传下载excel,PHPExcel 上传下载的示例代码
1:首先用composer require phpoffice/phpexcel 2: 引入相关的类: use PHPExcel; use PHPExcel_Cell; use PHPExcel_Wr ...
vue 电子表格Excel的上传导入、导出下载、读取本地Excel、json转Excel
上传导入Excel 安装插件 npm install xlsx main.js中 // 导入excel插件 import XLSX from 'xlsx' Vue.prototype.$XLSX = ...
关于Mock -- vue下载excel乱码(血的教训)
当时在同步代码到svn上时,运维的同事同步代码npm install,本地环境调试做代码review. 这时忽略了一点,他打开着mockServer,噩梦开始了. 一个下载Excel的数据流接口,下载 ...
SpringBoot+Vue下载Excel文件流（No converter、Excel乱码）
目录介绍 No converter Excel乱码正确代码后端代码前端代码方法1 方法2 方法3 介绍后端使用SpringBoot.Mybatis Plus,前端使用Vue,进行Excel ...
vue下载excel模板文件，excel读取
一.下载excel模板文件 <template><a-button type="primary" @click="downloadExcel" ...
springmvc下载excel模板示例代码
以下是通过springmvc下载项目中的excel模板文件示例代码: @ApiOperation("下载excel模板")@RequestMapping(value = " ...

vue下载excel直接上代码

vue下载excel直接上代码相关推荐

最新文章

热门文章