vue下载excel模板

一、错误示例
1、请求接口

export const downloadTemplateApi = () => {return request({url: '/file/downloadTemplate',method: 'get'})
}

2、请求代码

 async downloadFnA () {const res = await downloadTemplateApi({responseType: 'blob'}) const blob = new Blob([res], {type: 'application/vnd.ms-excel;charset=utf-8'})const fileName = '空白导入模版'if ('download' in document.createElement('a')) {const link = document.createElement('a')link.href = window.URL.createObjectURL(blob)link.download = fileNamelink.click()window.URL.revokeObjectURL(blob)} else {window.navigator.msSaveBlob(blob, fileName)}},

3、请求回来的文件流数据（就是请求代码中的res）

4、下载结果

二、成功案例

1、下载按钮

<el-link type="warning" @click.stop="downloadFnA">下载空白模板</el-link>

2、方法

async downloadFnA () {   const res = await downloadGoodsbaseTemplateApi({responseType: 'blob'}) // 非IE浏览器if ('download' in document.createElement('a')) {   const link = document.createElement('a');link.style.display="none";let binaryData = [];binaryData.push(res);link.href = window.URL.createObjectURL(new Blob(binaryData));link.setAttribute("download", "导入模版.xlsx");document.body.appendChild(link);link.click();document.body.removeChild(link);} else {//IE浏览器window.navigator.msSaveBlob(new Blob(binaryData), fileName)}},

3、downloadGoodsbaseTemplateApi请求接口

export const downloadGoodsbaseTemplateApi = () => {return request({url: '/file/downloadGoodsbaseTemplate',method: 'get',responseType:"arraybuffer"   })
}

注：必须要添加responseType:“arraybuffer”
4、下载结果

参考文章：https://blog.csdn.net/WuqibuHuan/article/details/125442079

vue下载excel模板相关推荐

vue下载excel模板文件，excel读取
一.下载excel模板文件 <template><a-button type="primary" @click="downloadExcel" ...
vue实现下载EXCEL模板、导入EXCEL文件
vue实现下载EXCEL模板.导入EXCEL文件在项目中很常见需要先下载模板,根据模板导入下面展示一些下载模板代码片段. 需要有一个下载模板的接口,点击下载触发函数,调用接口,返回下载地址接口 ...
vue下载excel表格模板和导入excel表格数据
vue下载excel表格模板和导入excel表格数据 vue制作excel表格模板给前端下载 vue制作excel表格模板给前端下载最近有个需求,需要导入excel表格,并且还需要制作模板给用户下载 ...
Vue实现Excel模板文件的上传与下载
Vue实现Excel模板文件的上传与下载一.前言越来越多的项目开始使用前后端分离的方式来进行开发了,前端使用的vue来进行页面处理的,所以正常的文件下载和上传肯定是少不了的,因为这也是自己第一次使 ...
vue下载excel直接上代码
1.使用vue的el-button标签定义一个点击事件 <el-form-item> <el-button size="small" type="tex ...
js vue 下载excel(.xls)文件
@[TOC](js vue 下载excel(.xls)文件) 先看下载下来的excel文件 1.首先,后端给到的是一个文件在服务器中的存储地址 D:\MaxSecFile\Export\Alarm_2 ...
vue导出excel模板
1.首先需要导入第三方插件xlsx(最好是指定版本,要不然容易报错) npm install --save xlsx@0.17.0 后续可能还会用到导入导出,也需要安装第三方插件 npm instal ...
Java下载Excel模板文件的实现
在项目中经常会用到文件下载的功能,比如下载excel模板,这里简单记录一下实现过程 1.将模板文件放到项目资源文件目录中,也可以自定义其他位置,只要通过路径能找到该文件就行: 2.controller ...
springmvc下载excel模板示例代码
以下是通过springmvc下载项目中的excel模板文件示例代码: @ApiOperation("下载excel模板")@RequestMapping(value = " ...

vue下载excel模板

vue下载excel模板相关推荐

最新文章

热门文章