在vue3中实现pptx、word、excel预览

插件推荐

PPTXjs
vue-office

代码

html 复制代码
<script setup lang="ts" name="home">
import { computed, nextTick, ref, onMounted } from 'vue';
//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx';
//引入VueOfficeExcel组件
import VueOfficeExcel from '@vue-office/excel';
//引入相关样式
import '@vue-office/docx/lib/index.css';
const docx = ref('/file/test.docx'); //设置文档网络地址,可以是相对地址
const excel = ref('/file/test.xlsx'); //设置excel网络地址,可以是相对地址
const pptx = ref('/file/test.pptx'); //设置ppt网络地址,可以是相对地址

const renderedHandler = () => {
  console.log('渲染完成');
};
const errorHandler = () => {
  console.log('渲染失败');
};
</script>

<template>
  <div>
    <h1>PPT文档预览</h1>
    <iframe :src="`/PPTXjs-1.21.1/index.html?file=` + pptx" width="100%" height="900" frameborder="0"></iframe>
    <h1>word文档预览</h1>
    <vue-office-docx :src="docx" style="width: 100%; height: 900px" @rendered="renderedHandler" @error="errorHandler" />
    <h1>excel预览</h1>
    <vue-office-excel
      :src="excel"
      style="width: 100%; height: 900px"
      @rendered="renderedHandler"
      @error="errorHandler"
    />
  </div>
</template>

<style scoped></style>

pptxjs 文件传递

需要在 index.html 中获取文件地址

相关推荐
会飞的小菠菜4 小时前
如何根据Excel数据表生成多个合同、工作证、录取通知书等word文件?
word·excel·模板·数据表·生成文件
weixin_584121438 小时前
vue3+ts导出PDF
javascript·vue.js·pdf
尚学教辅学习资料9 小时前
Ruoyi-vue-plus-5.x第五篇Spring框架核心技术:5.1 Spring Boot自动配置
vue.js·spring boot·spring
给月亮点灯|9 小时前
Vue基础知识-脚手架开发-使用Axios发送异步请求+代理服务器解决前后端分离项目的跨域问题
前端·javascript·vue.js
IT小农工10 小时前
Windows 文件资源管理器无法预览文件内容word、ppt、excel、pdf
windows·word·powerpoint
BillKu10 小时前
在 Delphi 5 中获取 Word 文档页数的方法
word·delphi
Access开发易登软件10 小时前
Access开发导出PDF的N种姿势,你get了吗?
后端·低代码·pdf·excel·vba·access·access开发
課代表11 小时前
VBA 中的 Excel 工作表函数
excel·vba·函数·对象·属性·range·静态变量
quan263113 小时前
Vue实践篇-02,AI生成代码
前端·javascript·vue.js
qb13 小时前
vue3.5.18源码-编译-入口
前端·vue.js·架构