// mock/index.js
import Mock from 'mockjs';

// 使用Mock.js創建一個10條記錄的模擬的數據集
const exportData = Mock.mock({
    'data|10': [{
        'id|+1': 1,//自增
        'labelname': '九資'
        '金額|500-50000': 1, //隨機生成500-50000隨機數 
        '狀態|0-1': 1
    }]
});

// 攔截對/api/export的GET請求
Mock.mock('/api/export', 'get', () => {
    return {
        status: 200,
        data: exportData.data
    };
});

===使用===
<template>
  <!-- 導出按鈕 -->
  <button @click="exportData">導出數據</button>
</template>

<script>
export default {
  methods: {
    async exportData() {
      try {
        // 發起GET請求以獲取模擬數據
        const response = await fetch('/api/export');
        const result = await response.json(); // 解析響應為JSON
        const data = result.data; // 獲取數據部分
//主要是下面這塊代碼，其他都一樣
        // 將數據轉換為CSV格式
        const csvContent = 'data:text/csv;charset=utf-8,'
          + data.map(e => Object.values(e).join(",")).join("\n");

        // 創建一個隱藏的下載鏈接
        const encodedUri = encodeURI(csvContent);
        const link = document.createElement("a");
        link.setAttribute("href", encodedUri); // 設置鏈接的href為CSV數據
        link.setAttribute("download", "export_data.csv"); // 設置下載文件名
        document.body.appendChild(link); // 將鏈接添加到文檔中

        // 程序化點擊下載鏈接以觸發下載
        link.click();
        document.body.removeChild(link); // 下載完成后移除鏈接
      } catch (error) {
        console.error('導出失敗:', error); // 捕獲并打印錯誤
      }
    }
  }
}
</script>

項目中有mock又有導出,我之前寫的導出都好好地,后來發現不能用了???太奇怪了,后來排查了好久,發現是mock底層對導出會有攔截,變成亂碼,解決方法:修改mock底層代碼即可:

找到node_modules中的mockjs,

打開mockjs,找到dist,

打開dist,點進mock.js

在mock.js中的八千三百多行有這個代碼:

// 原生 XHR

                    if (!this.match) {

                        this.custom.xhr.send(data)

                        return

                    }

把它修改為:

// 原生 XHR

                    if (!this.match) {

                        this.custom.xhr.responseType = this.responseType

                        this.custom.xhr.send(data)

                        return

                    }

關閉項目,重新啟動,就可以正常導出了,2023.12.27特此記錄
————————————————

                            版權聲明：本文為博主原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接和本聲明。
                        
原文鏈接：https://blog.csdn.net/wtd183833501176/article/details/135241930