在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 中获取文件地址

相关推荐
一个专注写代码的程序媛3 分钟前
为什么vue的key值,不用index?
前端·javascript·vue.js
vvilkim11 分钟前
React 与 Vue:两大前端框架的深度对比
vue.js·react.js·前端框架
CodeCraft Studio11 分钟前
Excel处理控件Aspose.Cells教程:使用 Python 在 Excel 中进行数据验
开发语言·python·excel
장숙혜14 分钟前
ElementUi的Dropdown下拉菜单的详细介绍及使用
前端·javascript·vue.js
时间之城27 分钟前
笔记:记一次使用EasyExcel重写convertToExcelData方法无法读取@ExcelDictFormat注解的问题(已解决)
java·spring boot·笔记·spring·excel
BillKu39 分钟前
Vue3父子组件数据双向同步实现方法
前端·javascript·vue.js
VBAMatrix44 分钟前
审计效率升级!快速匹配Excel报表项目对应的Word附注序号
excel·审计·财务报表·会计师事务所·审计工具
猿究院_xyz1 小时前
跟着尚硅谷学vue-day5
前端·javascript·vue.js·前端框架·html
醋醋2 小时前
vue2源码记录4
前端·vue.js
lovely_nn2 小时前
wps excel 常用操作
excel·wps