vue項目中實現前臺導出和後臺導出Excel或其他類型文件的方法合集

前言

此篇記錄一下導出功能，分爲後端導出和前端導出；網上都有很多方法了，特整理記錄一下，方便之後查閱；

正文

一、後臺導出

後端導出指的是，後端已經封裝好二進制流，前端只需要做的就是請求接口和下載；通常使用在數據量比較大的情況下；

• 在寫其他代碼之前一定測試接口是否正常；
• 例如接口：http://197.23.46.97:8088/exprotExcel，參數：type:'exprot',name:'excel002'，get請求，正常流在瀏覽器中直接訪問接口路徑http://197.23.46.97:8088/exprotExcel?type=exprot&name=excel002會直接下載文檔；

1.1 使用a鏈接直接下載

代碼如下：

<template>
  <div>
    <!-- 1.1.1 使用a鏈接無參數直接下載 -->
    <a :href="exportUrl" target="_block">導出</a>
     <!--1.1.2 使用a鏈接有參數直接下載 -->
    <a :href="exportByhrefUrl" target="_block">導出</a>
  </div>
</template>
<script>
export default {
  data() {
    return {
      exportUrl: "http://197.23.46.97:8088/exprotExcel",
      form: {}
    };
  },
  computed: {
    exportByhrefUrl(){
        let url = "http://197.23.46.97:8088/exprotExcel";
        if (this.form.type) url = url + "?type=" + this.form.type;
        if (this.form.name) url = url + "&name=" + this.form.name;
        return url
    }
  },
</script>

1.2 使用iframe下載

代碼如下：

<template>
  <div>
    <!-- 1.2 使用iframe下載 -->
    <button @click="exportExcel">導出</button>
    <iframe :src="exportUrl" style="display:none"></iframe>
  </div>
</template>
<script>
export default {
  data() {
    return {
      exportUrl: "",
      form: {}
    };
  },
  methods: {
    exportExcel() {
      // 1.不使用代理的情況
      let url = "http://197.23.46.97:8088/exprotExcel";
      // 2.使用vue代理有參數的情況
      let url2 = "/api-proxy/exprotExcel";
      if (this.form.type) url = url + "?type=" + this.form.type;
      if (this.form.name) url = url + "&name=" + this.form.name;
      this.exportUrl = url;
    },
  }
};
</script>

1.3 axios請求後使用blob下載

代碼如下：

<template>
  <div>
    <!-- 1.3 使用axios/ajax請求數據後使用blob下載 -->
    <button @click="exportExcelByAxios">導出</button>
  </div>
</template>
<script>
import axios from axios
export default {
  data() {
    return {
      exportUrl: "",
      form: {}
    };
  },
  methods: {
    exportExcelByAxios() {
      let url = "/api-proxy/exprotExcel";
      axios.get(url, {params:this.form}, { responseType: "blob" }).then(res => {
          const fileName = "測試表格123.xls";
          //   res.data:請求到的二進制數據 
          const blob = new Blob([res.data], { type: "application/vnd.ms-excel" }); //1.創建一個blob
          const link = document.createElement("a"); //2.創建一個a鏈接
          link.download = fileName; //3.設置名稱
          link.style.display = "none"; // 4.默認不顯示
          link.href = URL.createObjectURL(blob); // 5.設置a鏈接href
          document.body.appendChild(link);//6.將a鏈接dom插入當前html中
          link.click();//7.點擊事件
          URL.revokeObjectURL(link.href); //8.釋放url對象
          document.body.removeChild(link); //9.移除a鏈接dom
      });
    }
  }
};
</script>

提示：

• 這裏一定要注意設置：responseType: "blob"；
• 這種方法原理是使用JS的內置對象Blob，Blob 對象表示一個不可變、原始數據的類文件對象。Blob 表示的不一定是JavaScript原生格式的數據。MDN關於Blob語法和介紹。
• 如果你想下載不是excel格式的文件，只用修改new Blob([res.data], { type: "application/vnd.ms-excel" })中type類型，比如下載word文件：

  const blob = new Blob([res.data], { type: "application/msword" });
  

• 附： 常見的MIME 類型列表

二、前臺導出

前臺導出指的是：前端直接導出數據，不經過後臺處理，在數據量小的情況下，也很方便處理；

2.1使用插件——vue-json-excel

在main.js中導入

import JsonExcel from 'vue-json-excel'
Vue.component('downloadExcel', JsonExcel)

頁面代碼如下：

<template>
  <div>
    <!-- 2.1前臺導出，雙向綁定數據 -->
    <download-excel
      :data="tableData"
      :fields="json_fields"
      :name="excelName"
    >
      <button>導出EXCEL</button>
    </download-excel>
  </div>
</template>
<script>
export default {
  data() {
    return {
      //報表名稱
      excelName:'數據報表.xls',
      //數據列表
      tableData: [
      	{id:01,name:'測試數據1',amountNum:99,amountPrice:500},
      	{id:02,name:'測試數據2',amountNum:30,amountPrice:100},
      ],
      //導出的列的key和名稱
       json_fields: {
        序號: "id",
        名稱: "name",
        數量: "amountNum",
        金額: "amountPrice"
      }
    };
  },
};
</script>

2.2 使用插件 ——file-saver

我習慣用上一種方法，我覺得比較簡單好用的，file這種網上也有很多人介紹的很詳細，就不再水文章了，詳情可以參考：【js-xlsx和file-saver插件】前端導出數據到excel

結語

這種功能在我們開發中還是很常見的，記錄一下方便以後查閱；這是在vue中的寫法同理在原生中也可以這樣寫。只是語法有改變；
over~
如果本文對你有幫助的話，請不要忘記給我點贊評論打call哦~o(￣▽￣)ｄo