根据后端返回的excel文件路径，直接在页面上解析excel文件

可狗可乐

已于 2024-04-13 13:17:17 修改

阅读量721

点赞数

文章标签： excel javascript vue.js

于 2023-04-04 17:51:35 首次发布

本文链接：https://blog.csdn.net/weixin_43773218/article/details/129958352

版权

最近在做ocr智能识别的功能，有这么个需求，如下：

上传excel表格图片后点击文字识别，接口回返回给前端一个excel文件下载路径，这excel文件就是识别结果。但现在的需求是在不导出文件的情况下去解析这excel文件。

只有文件路径

然后点击解析，即直接展示解析excel的结果，需要导出再按左上角的导出按钮

实现过程

1.安装插件：利用xlsx和canvas插件解决

npm install xlsx --save

npm install canvas-datagrid --save

2.主要代码如下： exportPath即后端返回的文件下载地址

    openOCR(picName,picIndex){
        this.picURL = this.picFiles[picIndex].url
        this.exportName = picName
        this.exportPath = this.ocrData.data[picName]
        this.OCRvisible = true
        this.readExcel()
    },
    async readExcel(){
        const res = await fetch(this.exportPath)
        //拿到二进制数据
        const ab = await res.arrayBuffer()
        //转换为工作表
        const wb = read(ab)
        //拿到工作表中第一个sheet
        const sheet = wb.Sheets[wb.SheetNames[0]]
        console.log("sheet",sheet);
        //sheet转JSON
        const sheetJson = utils.sheet_to_json(sheet)
        console.log("sheetJson",sheetJson);
        //调用canvasDatagrid展示到页面上
        canvasDatagrid({
            //父组件dom
            parentNode:this.$refs.display,
            //数据：json
            data:sheetJson
        })
    },