vue项目中实现前台导出和后台导出Excel或其他类型文件的方法合集
前言此篇记录一下导出功能,分为后端导出和前端导出;网上都有很多方法了,特记录一下,方便之后查阅;正文一、后台导出后端导出指的是,后端已经封装好二进制流,前端只需要做的就是请求接口和下载;在写其他代码之前一定测试接口是否正常;例如接口:http://197.23.46.97:8088/exprotExcel,参数:type:'exprot',name:'excel002',get请求,正常流在浏览器
·
目录
前言
此篇记录一下导出功能,分为后端导出和前端导出;网上都有很多方法了,特整理记录一下,方便之后查阅;
正文
一、后台导出
后端导出指的是,后端已经封装好二进制流,前端只需要做的就是请求接口和下载;通常使用在数据量比较大的情况下;
- 在写其他代码之前一定测试接口是否正常;
- 例如接口:
http://197.23.46.97:8088/exprotExcel
,参数:type:'exprot',name:'excel002'
,get请求,正常流在浏览器中直接访问接口路径http://197.23.46.97:8088/exprotExcel?type=exprot&name=excel002
会直接下载文档;
1.1 使用a链接直接下载
代码如下:
<template>
<div>
<!-- 1.1.1 使用a链接无参数直接下载 -->
<a :href="exportUrl" target="_block">导出</a>
<!--1.1.2 使用a链接有参数直接下载 -->
<a :href="exportByhrefUrl" target="_block">导出</a>
</div>
</template>
<script>
export default {
data() {
return {
exportUrl: "http://197.23.46.97:8088/exprotExcel",
form: {}
};
},
computed: {
exportByhrefUrl(){
let url = "http://197.23.46.97:8088/exprotExcel";
if (this.form.type) url = url + "?type=" + this.form.type;
if (this.form.name) url = url + "&name=" + this.form.name;
return url
}
},
</script>
1.2 使用iframe下载
代码如下:
<template>
<div>
<!-- 1.2 使用iframe下载 -->
<button @click="exportExcel">导出</button>
<iframe :src="exportUrl" style="display:none"></iframe>
</div>
</template>
<script>
export default {
data() {
return {
exportUrl: "",
form: {}
};
},
methods: {
exportExcel() {
// 1.不使用代理的情况
let url = "http://197.23.46.97:8088/exprotExcel";
// 2.使用vue代理有参数的情况
let url2 = "/api-proxy/exprotExcel";
if (this.form.type) url = url + "?type=" + this.form.type;
if (this.form.name) url = url + "&name=" + this.form.name;
this.exportUrl = url;
},
}
};
</script>
1.3 axios请求后使用blob下载
代码如下:
<template>
<div>
<!-- 1.3 使用axios/ajax请求数据后使用blob下载 -->
<button @click="exportExcelByAxios">导出</button>
</div>
</template>
<script>
import axios from axios
export default {
data() {
return {
exportUrl: "",
form: {}
};
},
methods: {
exportExcelByAxios() {
let url = "/api-proxy/exprotExcel";
axios.get(url, {params:this.form}, { responseType: "blob" }).then(res => {
const fileName = "测试表格123.xls";
// res.data:请求到的二进制数据
const blob = new Blob([res.data], { type: "application/vnd.ms-excel" }); //1.创建一个blob
const link = document.createElement("a"); //2.创建一个a链接
link.download = fileName; //3.设置名称
link.style.display = "none"; // 4.默认不显示
link.href = URL.createObjectURL(blob); // 5.设置a链接href
document.body.appendChild(link);//6.将a链接dom插入当前html中
link.click();//7.点击事件
URL.revokeObjectURL(link.href); //8.释放url对象
document.body.removeChild(link); //9.移除a链接dom
});
}
}
};
</script>
提示:
- 这里一定要注意设置:
responseType: "blob"
; - 这种方法原理是使用JS的内置对象Blob,Blob 对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。MDN关于Blob语法和介绍。
- 如果你想下载不是excel格式的文件,只用修改
new Blob([res.data], { type: "application/vnd.ms-excel" })
中type类型,比如下载word文件:const blob = new Blob([res.data], { type: "application/msword" });
- 附: 常见的MIME 类型列表
1.4 方法二: 如果项目中封装了axios
- request.js(封装axios的文件)
import axios from "axios";
const TIMEOUT = 30000; // 接口超时时间
const instance = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // 请求的基础链接,在环境变量文件中定义
timeout: TIMEOUT, // 超时
withCredentials: true,//携带cookie
headers: {
"Content-Type": "application/json;charset=UTF-8"
}
});
/* 在实例已创建后修改请求头内容默认值 */
instance.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest";
instance.interceptors.response.use(
response => {
let contentType =
response.headers["content-type"] || response.headers["Content-Type"];
// 判断后端是否返回的数据流,如果是数据流,则将整个响应返回,因为需要从header中取文件名
if (contentType.indexOf("application/octet-stream") > -1) {
return response;
} else {
return response.data;
}
},
error => {
console.error(error);
return Promise.reject(error);
}
);
export default instance;
- api.js(封装api的文件)
import request from '@/utils/request'
export function exportExcelByAxios(data) {
return request({
url: '/api-proxy/exprotExcel',
method: 'POST',
data,
responseType: 'blob',
})
}
1.4.1使用file-saver
npm install file-saver -s
import { saveAs } from 'file-saver'
export function exportBlobToExcel(res, f) {
const contentDisposition =
res.headers['content-disposition'] || res.headers['Content-Disposition']
const filename =
(contentDisposition && contentDisposition.split('=')[1]) || f || ''
// 实例化一个blob对象
const blob = new Blob([res.data], { type: 'text/plain;charset=utf-8' })
// 将blob保存为excel文件
saveAs(blob, filename)
}
1.4.2 使用a链接
export function download(response) {
const blob = new Blob([response.data], {
type:
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8',
})
const contentDisposition =
response.headers['content-disposition'] ||
response.headers['Content-Disposition']
const filename =
(contentDisposition && contentDisposition.split('=')[1]) || f || ''
if (!filename) return
const link = document.createElement('a') //2.创建一个a链接
link.download = filename //3.设置名称
link.style.display = 'none' // 4.默认不显示
link.href = URL.createObjectURL(blob) // 5.设置a链接href
document.body.appendChild(link) //6.将a链接dom插入当前html中
link.click() //7.点击事件
URL.revokeObjectURL(link.href) //8.释放url对象
document.body.removeChild(link) //9.移除a链接dom
}
调用
<template>
<div>
<button @click="exportExcelByAxios">导出</button>
</div>
</template>
<script>
import {exportBlobToExcel,download} from './export.js'
import {exportExcelByAxios} from './api.js'
export default {
methods: {
exportExcelByAxios() {
exportExcelByAxios({data:'参数'}).then(res=>{
exportBlobToExcel(res)//使用file-saver
//#or
download(res)//使用a 链接
})
},
};
</script>
二、前台导出
前台导出指的是:前端直接导出数据,不经过后台处理,在数据量小的情况下,也很方便处理;
2.1使用插件——vue-json-excel
在main.js中导入
import JsonExcel from 'vue-json-excel'
Vue.component('downloadExcel', JsonExcel)
页面代码如下:
<template>
<div>
<!-- 2.1前台导出,双向绑定数据 -->
<download-excel
:data="tableData"
:fields="json_fields"
:name="excelName"
>
<button>导出EXCEL</button>
</download-excel>
</div>
</template>
<script>
export default {
data() {
return {
//报表名称
excelName:'数据报表.xls',
//数据列表
tableData: [
{id:01,name:'测试数据1',amountNum:99,amountPrice:500},
{id:02,name:'测试数据2',amountNum:30,amountPrice:100},
],
//导出的列的key和名称
json_fields: {
序号: "id",
名称: "name",
数量: "amountNum",
金额: "amountPrice"
}
};
},
};
</script>
2.2 使用插件 ——file-saver
我习惯用上一种方法,我觉得比较简单好用的,file这种网上也有很多人介绍的很详细,就不再水文章了,详情可以参考:【js-xlsx和file-saver插件】前端导出数据到excel
结语
这种功能在我们开发中还是很常见的,记录一下方便以后查阅;这是在vue中的写法同理在原生中也可以这样写。只是语法有改变;
over~
如果本文对你有帮助的话,请不要忘记给我点赞评论打call哦~o( ̄▽ ̄)do
更多推荐
已为社区贡献6条内容
所有评论(0)