vueのantdのExcelテーブルのインポートとエクスポート

要件: バックエンド管理システムの特定のテーブルをインポートおよびエクスポートする必要があります。

この記事は vue と antdesign に基づいています

テーブルのインポート:

まず、インポートテンプレートをダウンロードする必要があります。インポートされたテーブルがプロジェクト内のテーブルに対応しない場合、バックエンドに渡した後、バックエンドはそのテーブルを認識しません。

インポートテンプレートをダウンロードすると、リクエストがバックエンドに直接送信され、リクエスト時にデータが BLOB ストリームに変換されます (重要な手順)。

上記のコードの一部:

let url = window.URL.createObjectURL(new Blob([res.data], { type: '.xlsx' }));
            let a = document.createElement('a');
            a.style.display = 'none';
            a.href = url;
            a.setAttribute('download', ``);
            document.body.appendChild(a);
            a.click();
            url = window.URL.revokeObjectURL(url);
            document.body.removeChild(a)
            this.$message.success('下载成功', 3)

1.2. インポートテンプレートをダウンロードした後、このファイルをプロジェクトフォームにインポートします

antd コンポーネントライブラリには、a-upload アップロードコンポーネントがあります。注意すべき重要な点はアクションです。このプロパティの値は、action="requested Base path (axios.defaults.baseURL + import Interface)" である必要があります。動的には、アクションの前にコロンを追加する必要があります

html:
<a-upload name="file" :action="actionURL+''" @change="handleChange":showUploadList="false" method="post" :data="file.file" :headers="headers">
 <a>导入</a>
 </a-upload>
js:
      handleChange(info) { // 导入
         this.file['file'] = info.file.name
         if (info.file.status !== 'uploading') {
            //   console.log(info.file, info.fileList);
         }
         if (info.file.status === 'done') {
            this.$message.success('导入成功', 3)
         } else if (info.file.status === 'error') {
            this.$message.error('文件导入失败', 3);
            this.isImportExcel = false
         }
      },

1.3. コンポーネントを使用せずに、通常どおりインターフェイスを呼び出すだけでファイルをインポートすることもできます (1.2 および 1.3 ではオプション)

  importExcel(info) {
      let input = document.createElement("input");
      input.type = "file";
      input.onchange = this.handleUpload;
      input.click();
    },
    handleUpload(event) {
        let file = event.target.files[0];
        POST_IMPORT_FILE(file).then((res) => {
          console.log(res)
            if (res.data.code === 0) {
                this.$message.success('导入成功', 3);
                this.pagination.current = 1
                this.getList();
            } else {
                this.$message.error('导入失败', 3);
            }
        });
    },

//  axios请求封装
export const POST_IMPORT_FILE = (data) => {
  let formData=new FormData()
  formData.append('file',data);
  formData.append('type',0);
  return axios.post(`接口`, formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  });
}

2. テーブルのエクスポート

html:
            <a-button type="primary" style="margin-left:20px"
               loading>导出</a-button>     
js:

      async exportExcel() { // 导出
         axios({
            method: '',
            url: '/',
            params: {},
            responseType: "blob"
         }).then((res) => {
            let url = window.URL.createObjectURL(new Blob([res.data], { type: '.xlsx' }));
            let a = document.createElement('a');
            a.style.display = 'none';
            a.href = url;
            a.setAttribute('download', `维护.xlsx`);
            document.body.appendChild(a);
            a.click();
            url = window.URL.revokeObjectURL(url);
            document.body.removeChild(a)
            this.$message.success('导出成功', 3)
         }).catch(error => {
            this.$message.error('导出失败', 3)
         });
         }
      }

これでインポートとエクスポートが完了するので、上記のコードを貼り付けてコピーし、要求された内容を自分で変更することができます。

要約:

ニーズを分析し、解決策を見つけ、徐々に改善していきます。矛盾がある場合は、他の人に誤解を与えないように、お知らせください。ありがとうございます。