vue2 点击预览本地 word excle pdf 文件

server/2024/9/26 1:23:31/

安装

考虑到三个包加一起的话会比较大,所以拆成了三个包,需要哪个自行安装即可。

//docx文档预览组件
npm install @vue-office/docx//excel文档预览组件
npm install @vue-office/excel//pdf文档预览组件
npm install @vue-office/pdf

npm i --save @vue/composition-api@1.3.0

使用示例

docx文档的预览

<template><vue-office-docx :src="docx" @rendered="rendered"/>
</template><script>
//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx'export default {components:{VueOfficeDocx},data(){return {docx: 'http://static.shanhuxueyuan.com/test6.docx' //设置文档地址}},methods:{rendered(){console.log("渲染完成")}}
}
</script>

excel文档预览

<template><vue-office-excel :src="excel" @rendered="rendered"/>
</template><script>
//引入VueOfficeExcel组件
import VueOfficeExcel from '@vue-office/excel'
//引入相关样式
import '@vue-office/excel/lib/index.css'export default {components:{VueOfficeExcel},data(){return {excel: 'http://static.shanhuxueyuan.com/demo/excel.xlsx'//设置文档地址}},methods:{rendered(){console.log("渲染完成")}}
}
</script>

pdf文档预览

<template><vue-office-pdf :src="pdf" @rendered="rendered"/>
</template><script>
//引入VueOfficePdf组件
import VueOfficePdf from '@vue-office/pdf'export default {components:{VueOfficePdf},data(){return {pdf: 'http://static.shanhuxueyuan.com/test.pdf' //设置文档地址}},methods:{rendered(){console.log("渲染完成")}}
}
</script>


http://www.ppmy.cn/server/24877.html

相关文章

【2024-4-28-001】我遇到的CMake语句

2024年4月28日&#xff0c;周日下午 set(CMAKE_RUNTIME_OUTPUT_DIRECTORY ${CMAKE_SOURCE_DIR}/bin/${CMAKE_BUILD_TYPE})这段语法是用于设置 CMake 构建过程中生成的可执行文件&#xff08;运行时文件&#xff09;的输出目录。 让我逐步解释它&#xff1a; set: 这是 CMake …

富格林:可信方略杜绝交易虚假

富格林指出&#xff0c;黄金市场是一个极具诱惑力的市场&#xff0c;它是在一个大家共同认可的游戏规则下&#xff0c;凭借自己可信的决策、判断来进行交易的一种投资市场。黄金市场不断有新手投资者的加入&#xff0c;但是要真正在该市场上获利&#xff0c;杜绝虚假套路是一个…

form1弹出子窗体form2,拖动子窗体判断是否离开父窗体区域,含源码(学习笔记)

一、效果&#xff08;进入和离开&#xff09; 子窗体到达父窗体边缘时变色。 二、代码分析 判断父窗体的目的&#xff0c;可以控制子窗体要随父窗体走。上面代码需要加以处理。 如&#xff1a;this.Location new Point(parentPoint.X distanceFromEdge, this.Location.Ydis…

苹果公司大量订购电容按钮组件,或将用于即将推出的iPhone 16系列

据外媒报道&#xff0c;苹果公司已经从供应商订购了大量电容按钮组件&#xff0c;这些组件据称将用于即将推出的iPhone 16系列。根据《台湾经济日报》的一份报告&#xff0c;该订单包括系统级封装(SIP)模块&#xff0c;模块将用于将电容组件与两个Taptic Engine电机集成在一起。…

stable diffusion QA

Q:有关于扩散模型的一个点不太懂,就是损失为何是去噪Unt的输出跟随机噪声的均方差?假如是图像修复任务,那为何不是去噪结果与真实图像进行损失计算呢? A:扩散模型simple loss将U-Net的输出与随机噪声计算MSE,其实不是为了预测噪声,而是为了解析分布,让预测结果的均值…

QT 开发COM(ActiveX)组件基础介绍和方案验证

一、COM简介 1.1 COM是什么&#xff1f; COM&#xff0c;Component Object Model&#xff0c;即组件对象模型&#xff0c;是一种以组件为发布单元的对象模型&#xff0c;这种模型使各软件组件可以用一种统一的方式进行交互。COM 既提供了组件之间进行交互的规范&#xff0c;也…

Pycharm远程连接实验室服务器Conda环境配置

如何配置Pycharm和远程服务器 这类博客较多&#xff0c;参考内容 https://blog.csdn.net/fengbao24/article/details/125515542 Python解释器选择&#xff08;conda3&#xff09; 1. Settings -> Add Interpreter -> On SSH 注意&#xff0c;这里的SSH需要在你把远程…

前端安全——最新:lodash原型漏洞从发现到修复全过程

人生的精彩就在于你永远不知道惊喜和意外谁先来&#xff0c;又是一个平平无奇的早晨&#xff0c;我收到了一份意外的惊喜——前端某项目出现lodash依赖原型污染漏洞。咋一听&#xff0c;很新奇。再仔细一看&#xff0c;呕吼&#xff0c;更加好奇了~然后就是了解和修补漏洞之旅。…