使用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.mzph.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 是右…