vue 導入Excel

昨天分享了一篇導出Excel功能，今天再分享一篇關於導入的功能，導入相對於導出使用起來相對簡單，具體我們看實現步驟：

1，安裝

cnpm install xlsx --save -dev;

2，部分

<code>import * as XLSX from 'xlsx'


//導入excel
onImportExcel(file) {
    // 獲取上傳的文件對象
    let that = this;
    const { files } = file.target;
    // 通過FileReader對象讀取文件
    const fileReader = new FileReader();
    fileReader.onload = event => {
        try {
            const { result } = event.target;
            // 以二進制流方式讀取得到整份excel表格對象
            const workbook = XLSX.read(result, { type: 'binary' });
            // 存儲獲取到的數據
            let data = [];
            // 遍歷每張工作表進行讀取（這裡默認只讀取第一張表）
            for (const sheet in workbook.Sheets) {
                // esline-disable-next-line
                if (workbook.Sheets.hasOwnProperty(sheet)) {
                    // 利用 sheet_to_json 方法將 excel 轉成 json 數據
                    data = data.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
                    // break; // 如果只取第一張表，就取消註釋這行
                }
            }
            // 最終獲取到並且格式化後的 json 數據
            const uploadData = data.map(item=> {
                return {
                    'sc_name': item['服務點'],
                    'sc_desc': item['描述'],
                    'sc_province': item['省份'], 

                    'sc_city': item['城市'],
                    'sc_region': item['地區'],
                    'sc_address': item['地址'],
                    'sc_tel': item['電話'],
                    'longitude': item['經度'],
                    'latitude': item['緯度'],
                    'status': 1,
                }
                // console.log(item)
            })
            console.log(uploadData)//這裡得到了後端需要的json數據，調用接口傳給後端就行了
            
        } catch (e) {
            // 這裡可以拋出文件類型錯誤不正確的相關提示
            alert('文件類型不正確')
        }
    };
    // 以二進制方式打開文件
    fileReader.readAsBinaryString(files[0]);
}/<code>

至此導入功能就接入完成了。

閱讀更多 小小技術 的文章

關鍵字: Excel Line 導入