一、后台返回数据流
当后台返回的是数据流时，有下面两种方法可以处理，第二种更简单
方法一：
1.新建一个js文件
import axios from 'axios'
// 导出Excel公用方法
export function exportExcel(data) {
return axios({
headers: {
'Content-Type': 'application/json'
},
responseType: 'blob', // 一定要写
method: 'post',
url: data.url,
data: data.params
}).then(res => {
const link = document.createElement('a')
const blob = new Blob([res.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
link.style.display = 'none'
link.href = URL.createObjectURL(blob)
// link.download = res.headers['content-disposition'] // 下载后文件名
link.download = data.fileName // 下载的文件名
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
}).catch((err) => {
console.log('catch-err', err)
})
}
/**
* 导出功能(接口返回二进制流，导出)
* @param {String} url
* @param {Object} param
* @param {String} fileName
*/
export const exportExcel = (url, param, fileName) => {
axios
.get(axios.defaults.baseURL + url, {
params: param,
responseType: 'blob'
})
.then(res => {
const blob = new Blob([res.data], {
type: 'Content-Type: text/csv' // 将会被放入到blob中的数组内容的MIME类型
})
var downloadElement = document.createElement('a')
var 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对象
})
}
2.在页面调用
import { exportExcel } from '@/utils/Excel'
// 导出Excel
educeTable() {
let fileName
switch (this.activeName) {
case 'zhao':
fileName = '赵'
break
case 'li':
fileName = '李'
break
case 'zhang':
fileName = '张'
break
case 'liu':
fileName = '刘'
break
}
exportExcel({
url: '/account/download',
params: {
no: this.$route.query.no,
type: this.activeName
},
fileName
})
},
方法二：
只需要讲后台提供的接口用a标签的href链接过去就行
// 这个好简单
<a :href="`${baseUrl}/account/download?no=${this.$route.query.no}&type=${activeName}`" >
二、后台值返回普通数据
当后台值返回普通数据，这时候就完全依靠前端来处理了
方法一：
通过将json遍历进行字符串拼接，将字符串输出到csv文件，输出的文件不会再是html类型的文件而是真正的csv文件，方法如下：
function tableToExcel(){
//要导出的json数据
var jsonData = [
{
name:'路人甲',
phone:'123456789',
email:'000@123456.com'
},
{
name:'炮灰乙',
phone:'123456789',
email:'000@123456.com'
},
{
name:'土匪丙',
phone:'123456789',
email:'000@123456.com'
},
{
name:'流氓丁',
phone:'123456789',
email:'000@123456.com'
},
]
//列标题，逗号隔开，每一个逗号就是隔开一个单元格
let str = `姓名,电话,邮箱\n`;
//增加\t为了不让表格显示科学计数法或者其他格式
for(let i = 0 ; i < jsonData.length ; i++ ){
for(let item in jsonData[i]){
str+=`${jsonData[i][item] + '\t'},`;
}
str+='\n';
}
//encodeURIComponent解决中文乱码
let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
//通过创建a标签实现
var link = document.createElement("a");
link.href = uri;
//对下载的文件命名
link.download = "json数据表.csv";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
补充：在写CSV文件时，如果要让一个单元格内的内容换行的话，需要将这个单元格的内容都用双引号括起来，如 "aabb"，然后在需要换行的位置写入换行的转义字符，/r/n或者\n
例如：`"${val.entity_name}\n${val.bank_account_name}"`
方法二：
将table标签，包括tr、td等对json数据进行拼接，将table输出到表格上实现，这种方法的弊端在于输出的是伪excel，虽说生成xls为后缀的文件，但文件形式上还是html，代码如下
<html>
<head>
<p style="font-size: 20px;color: red;">使用table标签方式将json导出xls文件</p>
<button onclick='tableToExcel()'>导出</button>
</head>
<body>
<script>
const tableToExcel = () => {
// 要导出的json数据
const jsonData = [
{
name:'路人甲',
phone:'123456',
email:'123@123456.com'
},
{
name:'炮灰乙',
phone:'123456',
email:'123@123456.com'
},
{
name:'土匪丙',
phone:'123456',
email:'123@123456.com'
},
{
name:'流氓丁',
phone:'123456',
email:'123@123456.com'
},
]
// 列标题
let str = '<tr><td>姓名</td><td>电话</td><td>邮箱</td></tr>';
// 循环遍历，每行加入tr标签，每个单元格加td标签
for(let i = 0 ; i < jsonData.length ; i++ ){
str+='<tr>';
for(const key in jsonData[i]){
// 增加\t为了不让表格显示科学计数法或者其他格式
str+=`<td>${ jsonData[i][key] + '\t'}</td>`;
}
str+='</tr>';
}
// Worksheet名
const worksheet = 'Sheet1'
const uri = 'data:application/vnd.ms-excel;base64,';
// 下载的表格模板数据
const template = `<html xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:x="urn:schemas-microsoft-com:office:excel"
xmlns="http://www.w3.org/TR/REC-html40">
<head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>
<x:Name>${worksheet}</x:Name>
<x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>
</x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->
</head><body><table>${str}</table></body></html>`;
// 下载模板
window.location.href = uri + base64(template);
};
// 输出base64编码
const base64 = s => window.btoa(unescape(encodeURIComponent(s)));
</script>
</body>
</html>
网友评论