vue下载excel文件( .xls .xlsx)
- 直接上代码
<template>
<div>
{{message}}
</div>
</template>
<script>
import { exportBuyerOrderList } from '@/getData'
export default {
name: 'buyerStatisticsList',
data() {
return {
message: "黑黑黑"
}
},
methods: {
async exportFile() {
const res = await exportBuyerOrderList(
{
userId: "123",
name: "名称",
},
{
responseType: 'arraybuffer'
}
)
let filename = "excel表格.xls";
this.fileDownload(res, filename);
},
fileDownload(data, fileName) {
let blob = new Blob([data], {
type: "application/octet-stream"
});
let filename = fileName || "filename.xls";
if (typeof window.navigator.msSaveBlob !== "undefined") {
window.navigator.msSaveBlob(blob, filename);
} else {
var blobURL = window.URL.createObjectURL(blob);
var tempLink = document.createElement("a");
tempLink.style.display = "none";
tempLink.href = blobURL;
tempLink.setAttribute("download", filename);
if (typeof tempLink.download === "undefined") {
tempLink.setAttribute("target", "_blank");
}
document.body.appendChild(tempLink);
tempLink.click();
document.body.removeChild(tempLink);
window.URL.revokeObjectURL(blobURL);
}
},
},
}
</script>
接口文件 getData.js
import fetch from '@/config/fetch'
export const exportBuyerOrderList = (data,param) => fetch('wxsupplier/supplierProvider/exportBuyerOrderList', data,param);
axios请求封装 fetch.js
import axios from "axios";
axios.defaults.transformRequest = [function (data) {
return qs.stringify(data);
}];
export default async (url = '', data = {}, parame = {},type = 'POST', method = 'fetch') => {
if (type == 'GET') {
let dataStr = '';
Object.keys(data).forEach(key => {
dataStr += key + '=' + data[key] + '&';
})
if (dataStr !== '') {
dataStr = dataStr.substr(0, dataStr.lastIndexOf('&'));
url = url + '?' + dataStr;
}
}
if (window.fetch && method == 'fetch') {
return new Promise((resolve, reject) => {
axios.post(url, data, parame).then(res => {
if (res.status === 200)
resolve(res.data)
else
console.log("响应状态码 不等于 200");
}).catch(error => {
reject(error)
})
})
}
}