Java Excel、vue + axios フロントエンドのインポートとエクスポート ボタンをクリックしてダウンロード

バックエンドテクノロジーの選択

従来の Excel 操作や分析は Apache POI を使用して実行されますが、このフレームワークを使用したことのある人なら誰でも、このフレームワークが完璧ではなく、多くの欠陥があることを知っています。
 

  • 利用手順が面倒
  • Excelの操作を動的に書くのは非常に面倒
  • 初心者にとって、短期間で始めるのは難しい
  • 読み書き時に大量のコンテンツを占有する必要があり、データ量が多いとコンテナがOOMしてしまう
     

上記の理由に基づいて、Ali は使いやすくメモリを節約する Excel 操作フレームワーク EasyExcel をオープンソース化しました。

Apache POI
JavaはExcelファイルのインポートとエクスポートを実装します

easyexcel (推奨)
公式ドキュメント: https://www.yuque.com/easyexcel/doc/easyexcel
java Ali の easyExcel を使用して Excel のエクスポート/インポート機能を実現
easyexcel を使用して複雑な表のヘッダーとタイトル (カスタム スタイルとタイトル) のエクスポート機能を完成複数のシートのエクスポート)
Docker へのバックグラウンド デプロイメントでは、パッケージ化するときにイメージに依存して、フォントのインストールにも注意を払う必要がありますaesopcmc/openjdk:8-jdk-alpine-font。例:

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

それ以外の場合は、エラーが報告されます。

java.lang.NullPointerException: null
	at sun.awt.FontConfiguration.getVersion(FontConfiguration.java:1264) ~[na:1.8.0_212]
	...

ファイルをダウンロードするためのフロントエンド実装

フロントエンドは vue + axios を使用して、バックグラウンドでファイル ストリーム ダウンロード ファイルを取得するように要求します。
1. ファイルのダウンロード専用の utils/api.js で要求を構成します。

//文件下载专用请求配置(通常用于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)
}
  1. main.jsにマウントする
import {
    
    $postExcel} from './utils/api'

Vue.prototype.$postExcel = $postExcel
  1. ファイルで使用されている
<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
},

おすすめ

転載: blog.csdn.net/u014438244/article/details/121695418