【记录49】vue2 vue-office在线预览 docx、pdf、excel文档

vue2
在线预览 docx、pdf、excel文档

docx

npm install @vue-office/docx vue-demi@0.14.6 指定版本
npm install @vue-office/docx vue-demi

<template><VueOfficeDocx :src="pdf" style="height: 100vh;" @rendere="rendereHandler" @error="errorHandler" />
</template>

在这里插入图片描述

pdf

npm install @vue-office/pdf vue-demi@0.14.6 指定版本
npm install @vue-office/pdf vue-demi

<template><VueOfficePdf :src="pdf" style="height: 100vh;" @rendere="rendereHandler" @error="errorHandler" />
</template>

在这里插入图片描述

excel

npm install @vue-office/excel vue-demi@0.14.6 指定版本
npm install @vue-office/excel vue-demi

<template><VueOfficeExcel :src="pdf" style="height: 100vh;" @rendere="rendereHandler" @error="errorHandler" />
</template>

在这里插入图片描述

vue版本小于2.6的需下载
npm install @vue/composition-api/

vue-office 适用于vue2/3

源码:源码git仓库

// docx
import VueOfficeDocx from '@vue-office/docx'
import '@vue-office/docx/lib/index.css'//  pdf
//import VueOfficePdf from '@vue-office/pdf'
//import '@vue-office/docx/lib/index.css'//  excel
//import VueOfficeExcel from '@vue-office/excel'
//import '@vue-office/excel/lib/index.css'
export default {name: 'pdf在线浏览',components: {VueOfficeDocx},data () {return {pdf: 'http://static.shanhuxueyuan.com/test6.docx' 
//            pdf: 'http://static.shanhuxueyuan.com/test6.pdf' 
//            pdf: 'http://static.shanhuxueyuan.com/test6.excel' }},methods: {rendereHandler() {console.log('渲染成功');},errorHandler() {console.log('渲染成功');},}
}
</script>

控制台报错:不影响使用

TypeError: ft.defineComponent is not a function
在这里插入图片描述

vue-office发现只适用docx格式,doc的不可以,xlx没找到资源待测

vue-office 文章特点:将docx、pdf、excel三个拆开详情的解说

vue-office 文章特点:将docx、pdf、excel三种格式文件同步讲解,并一起使用

两篇文章都附带案例

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/62948.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MVC模式的理解和实践

在软件开发中&#xff0c;MVC&#xff08;Model-View-Controller&#xff09;模式是一种经典的设计模式&#xff0c;特别适用于构建用户界面复杂的Web应用程序。MVC通过将应用程序的业务逻辑、数据显示和用户交互分离&#xff0c;使代码结构更加清晰&#xff0c;易于维护和扩展…

[A-22]ARMv8/v9-SMMU多级页表架构

ver0.1 [看前序文章有惊喜,关注W\X\G=Z+H=“浩瀚架构师”,可以解锁全部文章] 前言 前文我们对SMMU的系统架构和基本功能做了简要的介绍,现在大家大致对SMMU在基于ARM体系的系统架构下的总线位置和产品形态有了基本的了解。这里我们还是简单做个前情回顾,从总线架构角度看…

【UE5 “RuntimeLoadFbx”插件】运行时加载FBX模型

前言 为了解决在Runtime时能够直接根据FBX模型路径直接加载FBX的问题&#xff0c;推荐一款名为“RuntimeLoadFBX”的插件。 用法 插件用法如下&#xff0c;只需要指定fbx的地址就可以在场景中生成Actor模型 通过指定输入参数“Cal Collision”来设置FBX模型的碰撞 还可以通过…

精品基于Python实现的微信小程序校园导航系统-微信小程序

[含文档PPT源码等] [包运行成功永久免费答疑辅导] 《django微信小程序校园导航系统》该项目采用技术Python的django框架、mysql数据库 &#xff0c;项目含有源码、文档、PPT、配套开发软件、软件安装教程、项目发布教程、核心代码介绍视频等 软件开发环境及开发工具&#xf…

Rstudio-server的安装、配置、维护

一、安装Rstudio-server (1)安装R语言&#xff1a; sudo apt install r-base # 如果没有管理员权限无法操作 # 这样装上R默认在/usr/bin/R其实基本上的流程都可以参考posit的官网&#xff08;也就是Rstudio的官网&#xff09;&#xff1a; https://posit.co/download/rstudio…

Python序列的应用(八):元组、字典

前言&#xff1a;在Python编程语言中&#xff0c;序列是一种非常重要的数据结构&#xff0c;它允许我们存储和操作有序的数据集合。在前几期的内容中&#xff0c;我们已经探讨了列表&#xff08;List&#xff09;和集合&#xff08;Set&#xff09;这两种序列的应用&#xff0c…

OpenCV 功能函数介绍

一&#xff0c; 二值化函数 功能&#xff1a; 用于对图像进行二值化处理 参数&#xff1a; cv2.threshold(输入你的图像所对应的灰度图&#xff0c; 阈值&#xff1a;是浮点还是整数取决予图像的数据类型 最大值;高于阈值的像素值&#xff0c; 阈值类型&#xff1a;cv2.THR…

【Python】使用Selenium的find_element模块获取网页上的大段文字和表格的方法(建议收藏!)

发现了一个使用Selenium的find_element模块&#xff0c;快速获取文字和表格的方法&#xff0c;很实在&#xff0c;以后爬网的时候&#xff0c;就不用beautifulSoup 和 pandas的read_html 混起来用了&#xff01; 文字部分&#xff1a;实现网络节点下&#xff0c;某个节点下的其…

【AI知识】有监督学习之回归任务(附线性回归代码及可视化)

1. 回归的基本概念 在机器学习的有监督学习中&#xff0c;回归&#xff08;Regression&#xff09;是一种常见的任务&#xff0c;它的目标是通过观察数据来建立一个模型&#xff0c;用一个或多个自变量来预测因变量的值。 回归分析通常用于&#xff1a; a.预测&#xff0c;基于…

边缘计算+人工智能:让设备更聪明的秘密

引言&#xff1a;日常生活中的“智能”设备 你是否发现&#xff0c;身边的设备正变得越来越“聪明”&#xff1f; 早上醒来时&#xff0c;智能音箱已经根据你的日程播放舒缓音乐&#xff1b;走进厨房&#xff0c;智能冰箱提醒你今天的食材库存&#xff1b;而在城市道路上&…

JVM 双亲委派模型以及垃圾回收机制

目录 1. JVM 内存区域划分 2. JVM 中类加载的过程 1) 类加载的基本流程 2) 双亲委派模型 3. JVM 中垃圾回收机制 1) 找到垃圾 a) 引用计数 b) 可达性分析 2) 释放垃圾 1. JVM 内存区域划分 一个运行起来的 Java 进程&#xff0c;其实就是一个 JVM 虚拟机。 而进程是…

ansible自动化运维(四)jinjia2模板

Jinjia2模板 前面说到playbook组成的时候&#xff0c;有介绍到template模块&#xff0c;而template模块对模板文件进行渲染时&#xff0c;使用的就是jinja2模板引擎&#xff0c;jinja2本身就是基于python的模板引擎&#xff0c;所以下面先来了解一下jinjia2模板的一些用法 基…

Windows安装Jira

下载 Download Jira Data Center | Atlassian https://product-downloads.atlassian.com/software/jira/downloads/atlassian-jira-software-10.3.0-x64.exe 以管理员身份安装&#xff0c;否则弹出以下提醒 创建和配置MySQL数据库&#xff1a;参照 Connecting Jira applicat…

uniapp - 微信小程序

一、background-image 大图不显示的问题 解决方法&#xff1a; 1、使用网络地址&#xff1b;2、使用 base64 urlTobase64(filePath) {// #ifdef MP-WEIXINlet img ${filePath},imgBase64 wx.getFileSystemManager().readFileSync(img, "base64"),base64Url data:…

DETR: End-to-End Object Detection with Transformers论文学习

论文地址&#xff1a;https://arxiv.org/pdf/2005.12872 代码地址&#xff1a;https://github.com/facebookresearch/detr 相关学习视频&#xff1a;https://space.bilibili.com/94779326/lists?sid1531941 标题前言&#xff1a; DETR 是 Facebook 团队于 2020 年提出的基于…

Vue3状态管理:Pinia架构设计分析

Vue3状态管理:Pinia架构设计分析 介绍 在Vue.js开发中&#xff0c;状态管理是一个非常重要的部分。随着Vue3的发布&#xff0c;Pinia作为一种新的状态管理架构也相继问世。本文将对Pinia架构进行深入分析&#xff0c;帮助读者了解其设计原理、特点以及在实际项目中的应用。 架构…

【IDEA】启动报错

今天启动IDEA报错 报错信息&#xff1a; Cannot connect to already running IDE instance. Exception: Process 5,444 is still running 打开任务管理器&#xff0c;关掉进程ID5444的任务

socket编程UDP-实现停等机制(接收确认、超时重传)

在下面博客中&#xff0c;我介绍了利用UDP模拟TCP连接、按数据包发送文件的过程&#xff0c;并附上完整源码。 socket编程UDP-文件传输&模拟TCP建立连接脱离连接&#xff08;进阶篇&#xff09;_udp socket发送-CSDN博客 下面博客实现的是滑动窗口机制&#xff1a; sock…

python xpath解析笔记

与bs4的区别 bs4有很多属性和方法&#xff0c;而xpath只有一个方法&#xff0c;是通过不同的xpath表达式实现很多功能的。 html例子 定位 tree.xpath(‘/html/head/title’) 返回列表。 开头的斜杠表示从根节点遍历。 中间的斜杠表示层级。&#xff08;相当于bs4中的>…

Q学习(Q-Learning)详解

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…