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

相关推荐
我在北京coding7 分钟前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js
海天胜景1 小时前
vue3 获取选中的el-table行数据
javascript·vue.js·elementui
YouYOUyouFairy1 小时前
EXCEL动态表格
excel
翻滚吧键盘1 小时前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
乆夨(jiuze)2 小时前
记录H5内嵌到flutter App的一个问题,引发后面使用fastClick,引发后面input输入框单击无效问题。。。
前端·javascript·vue.js
Maruko3102 小时前
Java 实现excel大批量导出
excel·poi
忧郁的蛋~2 小时前
HTML表格导出为Excel文件的实现方案
前端·html·excel
小彭努力中2 小时前
141.在 Vue 3 中使用 OpenLayers Link 交互:把地图中心点 / 缩放级别 / 旋转角度实时写进 URL,并同步解析显示
前端·javascript·vue.js·交互
xiguolangzi3 小时前
vue3+element-plus el-table列的显隐、列宽 持久化
前端·javascript·vue.js
大猩猩X3 小时前
vxe-upload vue 实现附件上传、手动批量上传附件的方式
vue.js·vxe-ui