Vueで静的ファイルのダウンロードを実現します（例としてダウンロードフォームを取ります）

アプリケーションシナリオ：少数のファイルをダウンロードする必要があり、コンテンツが固定された静的ファイル（テンプレートなど）である場合は、サーバーと対話せずにフロントエンドでダウンロード機能を完了できます。より複雑な動的ファイルのコンテンツをダウンロードするには、ポータルを移動してください：Vueはファイルストリームのダウンロードを実現します

この記事のVue-cliバージョン：3.x、4.x

1.ダウンロードするファイルを
パブリックフォルダーに配置します。パブリックフォルダー内のファイルはWebpackによって処理されず、最終的なパッケージディレクトリに直接コピーされます。これらのファイル
は絶対パスを使用して参照する必要があります。簡単に言うと、publicは、何千年も変更されていないファイルを保存するために使用されます。

2.コンポーネントでのコードの実装

<template>
  <div class="about">
    <el-button type="primary" @click="download">下载</el-button>
  </div>
</template>

<script>
export default {
    
    
  data() {
    
    
    return {
    
    };
  },
  methods: {
    
    
    download(){
    
    
      let a = document.createElement('a');
      a.href = `/static/test.xlsx`;
      a.download = '测试表格.xlsx';
      a.click();
    }
  },
  mounted() {
    
    },
};
</script>

3. distファイル

最後に、distパッケージをサーバーにデプロイできます