vue項目中使用 SheetJS / js-xlsx 導入文件

原表格樣式;

 導入效果：

1.  安裝

npm install xlsx

2. 在App.vue 中引入xlsx

import * as XLSX from 'xlsx'; // 數據導出導入所需要的依賴

<input> 標簽用於搜集用戶信息。根據不同的 type 屬性值，輸入字段擁有很多種形式。輸入字段可以是文本字段、復選框、掩碼后的文本控件、單選按鈕、按鈕等等。

<input> 導入文件后返回一個FileList對象：https://www.mifengjc.com/api/FileList.html

event使用方法介紹：  https://www.jianshu.com/p/9fbf0703e502 、 https://segmentfault.com/q/1010000015312323

 3. 使用

https://docs.sheetjs.com/#parsing-options

https://github.com/rockboom/SheetJS-docs-zh-CN#utilities

// 讀取表格文件
readExcel(e) {
    let that = this;
    const files = e.target.files;
    console.log("files:", files);
    that.upload_file = files[0].name;
    console.log('that.upload_file:', that.upload_file);

    /**
     * https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader
     * 
     * FileReader 對象允許Web應用程序異步讀取存儲在用戶計算機上的文件（或原始數據緩沖區）的內容，使用 File 或 Blob 對象指定要讀取的文件或數據。
     * 其中File對象可以是來自用戶在一個<input>元素上選擇文件后返回的FileList對象,也可以來自拖放操作生成的 DataTransfer對象,
     * 還可以是來自在一個HTMLCanvasElement上執行mozGetAsFile()方法后返回結果。
     * 重要提示： FileReader僅用於以安全的方式從用戶（遠程）系統讀取文件內容 它不能用於從文件系統中按路徑名簡單地讀取文件。 
     * 要在JavaScript中按路徑名讀取文件，應使用標准Ajax解決方案進行服務器端文件讀取，如果讀取跨域，則使用CORS權限。
     * */
    const fileReader = new FileReader();
    /**
     * https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader/onload
     * 
     * FileReader.onload
     * 處理load (en-US)事件。該事件在讀取操作完成時觸發。
     * */
    fileReader.onload = function(event) {
        const data = event.target.result;
        const workbook = XLSX.read(data, {type: "array"}); //XLSX.read(data, read_opts) attempts to parse data
        const wsname = workbook.SheetNames[0]; //取第一張表
        const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); //生成json表格內容
        console.log(ws);
    }
    /* https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader/readAsArrayBuffer */
    fileReader.readAsArrayBuffer(files[0]);
}

---

全部代碼：

<template>
    <div>
        <div>
            {{ upload_file || "導入" }}
            <input type="file" accept=".xls,.xlsx"  @change="readExcel($event)" />
        </div>
    </div>
</template>

<script>
    import * as XLSX from 'xlsx'; // 數據導出導入所需要的依賴
    export default {
        name: 'app',
        data() {
            return {
                upload_file: ''
            }
        },
        methods: {
            /**
             * https://docs.sheetjs.com/#parsing-options
             *         Parsing Workbooks
             *             Browser file upload form element (click to show)
             * 
             * https://github.com/rockboom/SheetJS-docs-zh-CN#utilities
             * https://zhuanlan.zhihu.com/p/114607174
             * https://blog.csdn.net/a736755244/article/details/99568133
             * */
            readExcel(e) {
                // 讀取表格文件
                let that = this;
                const files = e.target.files;
                console.log("files:", files);
                that.upload_file = files[0].name;
                console.log('that.upload_file:', that.upload_file);

                /**
                 * https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader
                 * 
                 * FileReader 對象允許Web應用程序異步讀取存儲在用戶計算機上的文件（或原始數據緩沖區）的內容，使用 File 或 Blob 對象指定要讀取的文件或數據。
                 * 其中File對象可以是來自用戶在一個<input>元素上選擇文件后返回的FileList對象,也可以來自拖放操作生成的 DataTransfer對象,
                 * 還可以是來自在一個HTMLCanvasElement上執行mozGetAsFile()方法后返回結果。
                 * 重要提示： FileReader僅用於以安全的方式從用戶（遠程）系統讀取文件內容 它不能用於從文件系統中按路徑名簡單地讀取文件。 
                 * 要在JavaScript中按路徑名讀取文件，應使用標准Ajax解決方案進行服務器端文件讀取，如果讀取跨域，則使用CORS權限。
                 * */
                const fileReader = new FileReader();
                /**
                 * https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader/onload
                 * 
                 * FileReader.onload
                 * 處理load (en-US)事件。該事件在讀取操作完成時觸發。
                 * */
                fileReader.onload = function(event) {
                    const data = event.target.result;
                    const workbook = XLSX.read(data, {type: "array"}); //XLSX.read(data, read_opts) attempts to parse data
                    const wsname = workbook.SheetNames[0]; //取第一張表
                    const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); //生成json表格內容
                    console.log(ws);
                }
                /* https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader/readAsArrayBuffer */
                fileReader.readAsArrayBuffer(files[0]);
            }
        }
    }
</script>

<style>
</style>

參考鏈接：

[1] https://zhuanlan.zhihu.com/p/114607174

[2] https://github.com/rockboom/SheetJS-docs-zh-CN#utilities

[3] https://docs.sheetjs.com/#parsing-options

[4] https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader