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

相关推荐
江城开朗的豌豆2 小时前
退出登录后头像还在?这个缓存问题坑过多少前端!
前端·javascript·vue.js
江城开朗的豌豆2 小时前
Vue的'读心术':它怎么知道数据偷偷变了?
前端·javascript·vue.js
江城开朗的豌豆2 小时前
手把手教你造一个自己的v-model:原来双向绑定这么简单!
前端·javascript·vue.js
我在北京coding2 小时前
el-tree 懒加载 loadNode
前端·vue.js·elementui
江城开朗的豌豆2 小时前
v-for中key值的作用:为什么我总被要求加这个'没用的'属性?
前端·javascript·vue.js
小杨爱学习zb3 小时前
如何将公式图片转换为公式格式到wps/word里面
word
干净的坏蛋4 小时前
Microsoft Word 中 .doc 和 .docx 的区别
microsoft·word
码银6 小时前
基于Java的Markdown到Word文档转换工具的实现
java·word
markyankee1016 小时前
Vue 组件系统深度解析
vue.js
bitbitDown6 小时前
从一个Bug到Vue核心原理:聊聊模板作用域的那些事
前端·javascript·vue.js