501351981 / vue-office

支持word(.docx)、excel(.xlsx,.xls)、pdf、pptx等各类型office文件预览的vue组件集合,提供一站式office文件预览方案,支持vue2和3,也支持React等非Vue框架。Web-based pdf, excel, word, pptx preview library
https://501351981.github.io/vue-office/examples/docs/
MIT License
3.96k stars 465 forks source link

vue3 + ts 使用报错 Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'. #363

Open heyidu-HYD opened 3 weeks ago

heyidu-HYD commented 3 weeks ago

<vue-office-excel:src="excelUrl":options="options" style="height: 100vh;"@rendered="renderedHandler"https://github.com/error="错误处理程序" />

import VueOfficeExcel from '@vue-office/excel' // 引入相关样式 import '@vue-office/excel/lib/index.css'

const excelUrl = ref(' https://******/192867adacb54723b0688495ad1219ff.xlsx ') const options = ref({ xls: false, //将预览xlsx文件设为false;预览xls文件设置true minColLength: 0, // excel最少渲染多少列,如果想实现xlsx文件内容有几列,就渲染几列,可以将值设置为0 , // excel最少渲染。行,如果想根据xlsx实际函数渲染实现多少,可以将宽度值设置为0, //如果渲染出来的结果单元宽度不够,可以在默认渲染的列表宽度上加上Npx宽 heightOffset 。 : 10, //在默认渲染的列表高度上加上Npx高 beforeTransformData: (workbookData: any) => { return workbookData }, //简单通过exceljs获取excel文件内容,通过该钩子函数,可以对获取的excel文件内容进行修改,比如某些单元格的数据显示不正确,可以在这里自行修改每个单元格的值。: (workbookData: any) => { return workbookData } //将获取到的excel数据进行处理之后且渲染到页面之前,可以通过transformData对即将渲染的数据及样式进行修改,此时每个单元格的文本值就是即将渲染到页面上的内容 })

function renderHandler() { console.log('渲染完成') } function errorHandler() { console.log('渲染失败') }

代码几乎跟官网使用方法一模一样,但是在页面渲染的时候报错:Failed toexecute 'observe' on 'MutationObserver':parameter 1 is not of type 'Node'. 缺少具体原因

heyidu-HYD commented 3 weeks ago

问题已解决,把vite版本升级到5以上就ok了