使用vue-office報錯TypeError: ft.createElementVNode is not a function

支持多種文件(.docx、.xlsx、.xls、.pdf、.pptx)預覽的vue組件庫,支持vue2/3。也支持非Vue框架的預覽。
不支持.doc、.ppt(2003年及以前的版本)

官網:https://www.npmjs.com/package/@vue-office/excel?activeTab=readme
官方有實例代碼,非常簡單。

可以試一下,你的文件是否支持
演示地址:https://501351981.github.io/vue-office/examples/dist/#/docx

安裝

#docx文檔預覽組件
npm install @vue-office/docx vue-demi@0.14.6#excel文檔預覽組件
npm install @vue-office/excel vue-demi@0.14.6#pdf文檔預覽組件
npm install @vue-office/pdf vue-demi@0.14.6#pptx文檔預覽組件
npm install @vue-office/pptx vue-demi@0.14.6

安裝后的版本

"@vue-office/docx": "^1.6.3","@vue-office/excel": "^1.7.14",
"@vue-office/pdf": "^2.0.10",
"@vue-office/pptx": "^1.0.1",

問題、報錯

vue2才需要安裝"@vue/composition-api": “^1.7.2”,vue3不需要,vue3版本至少要@3.2以上
nodejs:v16.20.1

npm install @vue/composition-api
#指定vue版本
npm install vue@3.2.13

如果提示錯誤,那就是vue版本不對
TypeError: ft.createElementVNode is not a function

建議升級vue版本
npm install vue@3.2.13

鏡像用的是淘寶鏡像
查看鏡像:npm config get registry
設置淘寶鏡像:npm config set registry https://registry.npmmirror.com

我這里有2個問題(太low,不知道原因):
1、在vue:~3.1.5版本下,可以安裝@vue-office/docx、excel、pdf、pptx,但是項目啟動后,顯示TypeError: ft.createElementVNode is not a function
錯誤。
2、如果是先更新vue:^3.2.13版本,再安裝@vue-office/docx、excel、pdf、pptx,就會安裝失敗(鏡像都是https://registry.npmmirror.com)

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/bicheng/71532.shtml
繁體地址,請注明出處:http://hk.pswp.cn/bicheng/71532.shtml
英文地址,請注明出處:http://en.pswp.cn/bicheng/71532.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Ubuntu部署ktransformers

準備工作 一臺服務器 CPU:500G GPU:48G(NVIDIA4090) 系統:Ubuntu20.04(github的文檔好像用的是22.04) 第一步:下載權重文件 1.下載hfd wget https://hf-mirror.com/hfd/hfd.s…

C++初階——簡單實現vector

目錄 1、前言 2、Vector.h 3、Test.cpp 1、前言 簡單實現std::vector類模板。 相較于前面的string,vector要注意: 深拷貝,因為vector的元素可能是類類型,類類型元素可以通過賦值重載,自己實現深拷貝。 迭代器失效…

全志A133 android10 適配SLM770A 4G模塊

一,模塊基本信息 1.官方介紹 SLM770A是美格智能最新推出的一款LTE Cat.4無線通訊模組,最大支持下行速率150Mbps及上行速率50Mbps。同時向下兼容現有的3G和2G網絡,以確保即使在偏遠地區也可以進行網絡通信。 SLM770A模組支持分集接收和MIMO技…

微信小程序:多菜單欄設計效果

一、實現效果 二、代碼 wxml 編輯前端界面,步驟 菜單邏輯: 逐步取出數組中的項,首先取出頂部菜單項,然后選中后取出選中的底部數據(左側菜單+右側內容),然后點擊左側菜單取出選中的左側菜單對應的右側內容 ①這里我的數據是全部封裝到一個數組對象的,首先我的循環…

C++基礎知識學習記錄—string類

string實際上是C內置的一個類,內部對char *進行了封裝,不用擔心數組越界問題,string類中,除了上課講解的函數外,還有很多函數可以使用,可以自行查閱文檔。 構造函數原型: string(); //創建一個…

Ollama+DeepSeek+Open-WebUi

環境準備 Docker Ollama Open-WebUi Ollama 下載地址:Ollama docker安裝ollama docker run -d \ -v /data/ollama/data:/root/.ollama \ -p 11434:11434 \ --name ollama ollama/ollama 下載模型 Ollama模型倉庫 # 示例:安裝deepseek-r1:7b doc…

設計模式--訪問者模式【行為型模式】

設計模式的分類 我們都知道有 23 種設計模式,這 23 種設計模式可分為如下三類: 創建型模式(5 種):單例模式、工廠方法模式、抽象工廠模式、建造者模式、原型模式。結構型模式(7 種)&#xff1…

前端循環全解析:JS/ES/TS 循環寫法與實戰示例

循環是編程中控制流程的核心工具。本文將詳細介紹 JavaScript、ES6 及 TypeScript 中各種循環的寫法、特性,并通過實際示例幫助你掌握它們的正確使用姿勢。 目錄 傳統三劍客 for 循環 while 循環 do...while 循環 ES6 新特性 forEach for...of for...in 數組…

數據中心儲能蓄電池狀態監測管理系統 組成架構介紹

安科瑞劉鴻鵬 摘要 隨著數據中心對供電可靠性要求的提高,蓄電池儲能系統成為關鍵的后備電源。本文探討了蓄電池監測系統在數據中心儲能系統中的重要性,分析了ABAT系列蓄電池在線監測系統的功能、技術特點及其應用優勢。通過蓄電池監測系統的實施&#…

Mac端homebrew安裝配置

拷打了一下午o3-mini-high,不如這位博主的超強帖子,10分鐘結束戰斗 跟隨該文章即可,2025/2/19親測可行 mac 安裝HomeBrew(100%成功)_mac安裝homebrew-CSDN博客文章瀏覽閱讀10w次,點贊258次,收藏837次。一直覺得自己寫…

機器學習實戰(8):降維技術——主成分分析(PCA)

第8集:降維技術——主成分分析(PCA) 在機器學習中,降維(Dimensionality Reduction) 是一種重要的數據處理技術,用于減少特征維度、去除噪聲并提高模型效率。主成分分析(Principal C…

windows環境下用docker搭建php開發環境dnmp

安裝WSL WSL即Linux子系統,比虛擬機占用資源少,安裝的前提是系統必須是win10以上。 WSL的安裝比較簡單,網上有很多教程,例如:WSL簡介與安裝流程(Windows 下的 Linux 子系統)_wsl安裝-CSDN博客&…

Python網絡爬蟲技術詳解文檔

Python網絡爬蟲技術詳解文檔 目錄 網絡爬蟲概述爬蟲核心技術解析常用Python爬蟲庫實戰案例演示反爬蟲機制與應對策略爬蟲法律與道德規范高級爬蟲技術資源推薦與學習路徑1. 網絡爬蟲概述 1.1 什么是網絡爬蟲 網絡爬蟲(Web Crawler)是一種按特定規則自動抓取互聯網信息的程序…

位運算,雙指針,二分,排序算法

文章目錄 位運算二進制中1的個數題解代碼我們需要0題解代碼 排序模版排序1題解代碼模版排序2題解代碼模版排序3題解代碼 雙指針最長連續不重復子序列題解代碼 二分查找題解代碼 位運算 1. bitset< 16 >將十進制數轉為16位的二進制數 int x 25; cout << bitset<…

一周學會Flask3 Python Web開發-redirect重定向

鋒哥原創的Flask3 Python Web開發 Flask3視頻教程&#xff1a; 2025版 Flask3 Python web開發 視頻教程(無廢話版) 玩命更新中~_嗶哩嗶哩_bilibili 前面我們學過渲染到模板頁面&#xff0c;這個其實是一種內部的轉發&#xff0c;瀏覽器地址欄地址沒有變化。如果我們想重定向…

圖片粘貼上傳實現

圖片上傳 html demo 直接粘貼本地運行查看效果即可&#xff0c;有看不懂的直接喂給 deepseek 會解釋的很清晰 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport" content"…

RedisTemplate存儲含有特殊字符解決

ERROR信息: 案發時間: 2025-02-18 01:01 案發現場: UserServiceImpl.java 嫌疑人: stringRedisTemplate.opsForValue().set(SystemConstants.LOGIN_CODE_PREFIX phone, code, Duration.ofMinutes(3L)); // 3分鐘過期作案動機: stringRedisTemplate繼承了Redistemplate 使用的…

Python正則表達式學習

Python正則表達式全攻略 一、正則表達式基礎 1. 什么是正則表達式&#xff1f; 用于描述字符串匹配規則的表達式廣泛應用于文本處理、表單驗證、數據清洗等領域 2. Python中的re模塊 import re3. 基礎語法 字符說明示例.匹配任意字符(除換行)a.c → abc\d數字 [0-9]\d\d …

20250218 隨筆 垂直分庫分表(Vertical Sharding) 和 水平分庫分表(Horizontal Sharding)

垂直分庫分表&#xff08;Vertical Sharding&#xff09; 和 水平分庫分表&#xff08;Horizontal Sharding&#xff09; 是數據庫拆分的兩種策略。它們在大規模數據庫優化、分布式架構設計中至關重要&#xff0c;主要用于 降低單庫壓力、提高查詢效率、支持高并發。 1. 垂直分…

notepad++右鍵菜單不見了

卸載時沒點擊完成&#xff0c;又重新安裝了一個&#xff0c;最終導致了一些bug&#xff0c;導致右鍵沒有notepad菜單。 解決方式&#xff1a; 新建一個register.reg文件&#xff0c;加入以下代碼&#xff0c;然后雙擊執行即可 代碼說明&#xff1a;Open with Notepad 是右…