フロントエンド プロジェクトの問題を解決し、vue ベースのバックエンド インターフェイスに基づいて Excel ファイルをエクスポートします

工具：vue2.0+element-ui+vscode

---

ファイル ストリームがバックエンド レスポンスと共に正常に返されました。

 

エクセルエクスポート機能の効果は以下の通りです。

エクセルファイルをダウンロードできます

ダウンロードしたエクセルテンプレートを開く 

---

①まず構造レイヤーにレイアウトし、

クリック イベント @click="daochu" を作成する

<li @click="daochu"><i class="el-icon-bottom"></i>导出</li>

 ②第二に、バックエンドのデータ相互作用のためにビヘイビア層で axios を使用する

daochu イベントは、関数パッケージを作成し、ローカル変数を再パッケージしてから、axios と対話します

daochu() {
      // let c= Object.assign([], this.Add.c);
      // c= c.splice(c.length - 1, c.length);
      let handleSSDW = "";
      if (this.Add.c.length > 0) {
        handleSSDW = this.Add.c.flat(Infinity).toString();
      }

      let zt = "";
      if (this.Add.zt) {
        zt = this.Add.zt;
      } else {
        if (this.activeName == "first") {
          zt = "0";
        } else {
          zt = "1,2";
        }
      }

      let d = this.Add.d;
      d = Object.assign([], d);
      // if (d.length >= 2) {
      //   d = gzlx.splice(1, 1);
      // } else {
      //   d = "";
      // }
      // 导出
      this.$confirm("此操作将导出excel文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          axios({
            method: "post",
            url:
              window.serverAPI.url +
              "/xxx/xx/xx/xx/xx", //api接口文档
            data: {
              zt: zt,
              // gzlx:this.Add.gzlx[1],
              a: this.Add.a,
              b: this.Add.b,

              c: c.toString(),

              d: this.Add.d,
             
              e: handleSSDW
             
            },
            responseType: "blob",
            headers: {
              "Content-Type": "application/json", //设置请求头请求格式为JSON
              Authorization: window.sessionStorage.getItem("token"),
            },
          }).then((data) => {
            let url = window.URL.createObjectURL(data.data); //表示一个指定的file对象或Blob对象
            let a = document.createElement("a");

            document.body.appendChild(a);

            // let fileName=data.headers["content-disposition"].split(";")[1].split("=")[1];  //filename名称截取
            // fileName = decodeURI(fileName);

            a.href = url;
            a.download = "报备审核"; //命名下载名称
            a.click(); //点击触发下载
            window.URL.revokeObjectURL(url); //下载完成进行释放
          });
        })
        .catch(() => {
          this.$message({
            message: "已取消导出",
            type: "info",
          });
        });
    }

③最後に、データ層でデータ転送を行うことを忘れずに、

ここではバックエンドからデータを受け取ります。命名はバックエンド データと一致している必要があります。

Add: {
        zt: 0, 
        a: "", 
        b: "", 
        
        c: "", 
        d: "",
        e: ""
       
     
      }

---

最後に、著者の最後の記事を添付してください 

フロントエンド プロジェクトの問題を解決します: elementui+vue、セレクターのデータ インタラクションを実現する方法、およびページをレンダリングする 2 つの方法はシンプルで理解しやすいものです。(バックエンドとローカル)_Yichu のブログ - CSDN ブログ①ローカルの組み込み静的データを介して、element-ui のセレクター (el-select コンポーネントと el-option コンポーネント) のページ レンダリングが実行される ②バックエンド データ (ライブ データ) を介して、その後受け取り、element-ui セレクター (el-select コンポーネントと el-option コンポーネント) [構造層] で次のようにページ レンダリングを実行します。データ層の for="item in options": item の空の配列を使用してデータ層の options 配列をトラバースし、item.xxx でデータを取得します: key="item.val https: // blog.csdn .net/weixin_43928112/article/details/125174935?spm=1001.2014.3001.5501