vue文件下载

<template>
  <div>
    <button v-on:click="download">下载Excel</button>
    <button v-on:click="download1">下载文件</button>
  </div>
</template>

<script>
  // 引入需要使用的API
  import {exportExcel,exportFile} from '@/api/index'

  export default {
    name: 'FileDownLoad',
    methods: {
      // 下载Excel
      download() {
        // 下载模板
        exportExcel().then(response => {
          console.log(response);
          this.downloadFile(response.data);
        })
      },
      downloadFile(data) {
        // 文件导出
        if (!data) {
          return
        }
        let url = window.URL.createObjectURL(new Blob([data]));
        let link = document.createElement('a');
        link.style.display = 'none';
        link.href = url;
        link.setAttribute('download', '测试excel.xls');

        document.body.appendChild(link);
        link.click()
      },

      // 下载文件
      download1() {
        // 下载模板
        exportFile().then(response => {
          console.log(response);
          this.downloadFile1(response.data);
        })
      },
      downloadFile1(data) {
        // 文件导出
        if (!data) {
          return
        }
        let url = window.URL.createObjectURL(new Blob([data]));
        let link = document.createElement('a');
        link.style.display = 'none';
        link.href = url;
        link.setAttribute('download', '测试文件.pdf');

        document.body.appendChild(link);
        link.click()
      },
    }
  }
</script>

<style scoped="scoped">
</style>