Back-end technology selection
Traditional Excel operations or analysis are performed using Apache POI, but anyone who has used this framework knows that this framework is not perfect and has many defects:
- Use steps are cumbersome
- It is very troublesome to dynamically write Excel operations
- For novices, it is difficult to get started in a short time
- When reading and writing, it needs to occupy a large amount of content. When the amount of data is large, the container will OOM
Based on the above reasons, Ali open sourced an easy-to-use and memory-saving Excel operation framework: EasyExcel
Apache POI
java implements import and export of Excel files
easyexcel (recommended)
official document: https://www.yuque.com/easyexcel/doc/easyexcel
java Use Ali's easyExcel to realize the Excel export/import function
Use easyexcel to complete the export function of complex table headers and titles (custom style and multiple Sheet export)
background deployment to docker also needs to pay attention to installing fonts, relying on images when packaging aesopcmc/openjdk:8-jdk-alpine-font, for example:
echo "
FROM aesopcmc/openjdk:8-jdk-alpine-font
COPY ./${jarName}.jar /usr/local/app/
WORKDIR /usr/local/app/
CMD java -Djava.security.egd=file:/dev/./urandom -jar -Duser.timezone=GMT+08 ${jarName}.jar --spring.profiles.active=${active}
" > Dockerfile
Otherwise an error will be reported:
java.lang.NullPointerException: null
at sun.awt.FontConfiguration.getVersion(FontConfiguration.java:1264) ~[na:1.8.0_212]
...
Front-end implementation to download files
The front end uses vue + axios to request the background to obtain the file stream download file:
1. Configure the request in utils/api.js, which is dedicated to downloading files
//文件下载专用请求配置（通常用于excel导出、文件下载）
export async function $postExcel(url, obj = {
}) {
console.log("obj", obj);
/* request payload */
return await axios({
method: "post",
url: process.env.BASE_URL+url,
responseType: 'blob', // 请求为blob类型
headers: {
'session': "",
"Content-Type": "application/json"
},
transformRequest: [
function (data) {
return data;
}
],
data: obj
}).then(res=>{
return res.data
}).catch(catchError)
}
let catchError = error => {
console.error('err' + error)// for debug
Message({
message: error.message,
type: 'error',
duration: 3 * 1000
})
return Promise.reject(error)
}
- mount in main.js
import {
$postExcel} from './utils/api'
Vue.prototype.$postExcel = $postExcel
- used in the file
<el-button type="primary" @click="handleExportExcel" :loading="exportLoading">导出Excel</el-button>
async handleExportExcel() {
this.exportLoading = true
const data = await this.$postExcel('/order/listExportExcel/', this.listQuery)
let fileName = 'Excel表模板.xlsx' // xlsx和xls都是支持的
// 通过创建a标签实现文件下载
let link = document.createElement('a')
link.download = fileName
link.style.display = 'none'
link.href = URL.createObjectURL(data)
document.body.appendChild(link)
link.click()
URL.revokeObjectURL(link.href) // 释放URL 对象
document.body.removeChild(link)
this.exportLoading = false
},