vue纯前端 导入excel 并解析成json

1.安装xlsx

npm i xlsx 

2.封装函数

引入xlsx

const XLSX = require('xlsx');

/**

 * 把文件按照二进制进行读取

 * @param file

 * @returns

 */

export function readFile(file) {

    return new Promise(resolve=>{

        let reader = new FileReader();

        reader.readAsBinaryString(file);

        reader.onload = ev =>{

            resolve(ev.target?.result);

        }

    });

}

 

 

/**

 * 根据sheet索引读取Excel文件中的数据

 * @param file 文件

 * @param sheetIndex excel文件中sheet表索引 默认是从0开始

 * @returns  将表中的数据以json形式的数据返回

 */

export async function  readExcelFile(file,sheetIndex)

{

    let data = await readFile(file);

    let workbook = XLSX.read(data,{type:'binary'});

    let worksheet = workbook.Sheets[workbook.SheetNames[sheetIndex]];

    data = XLSX.utils.sheet_to_json(worksheet);

    return data;

}

 

3.在vue中使用

如果使用ant vue 的 a-upload组件

在beforeUpload中：

 beforeUpload(file,fileList) {            

            const isXlsxOrXls =

                file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||

                file.type === 'application/vnd.ms-excel'

            if (!isXlsxOrXls) {

                this.$message.error('您只能上传excel文件!')

            } else {

                let data = readExcelFile(file, 0)

                data.then((d) => {

           　　 this.isshowFooter='true'

                    this.isSuccess=false

                    this.companyList=[]

                    this.companyList=d

                    this.title='公司列表'

                    this.pagination.total=d.length

                    //读取文件数据

                    // console.log(d)                    

                })

                .catch(err=>{

                    console.log(err);

                    this.companyList=[]

                    this.$message.error('文件格式错误或文件内容个数错误!')

                })

                return false

            }

            return isXlsxOrXls

        },