首页 前端知识 【Vue】在vue3中实现pptx、word、excel预览

【Vue】在vue3中实现pptx、word、excel预览

2024-05-18 18:05:26 前端知识 前端哥 590 614 我要收藏

插件推荐

PPTXjs
vue-office

代码

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

需要你通过传参的方式渲染文件

    <h1>PPT文档预览</h1>
    <iframe :src="`/PPTXjs-1.21.1/index.html?file=` + pptx" width="100%" height="900" frameborder="0"></iframe>

需要你在原 index.html 中获取到你传参的文件地址

具体方法你怎么写都能,只要你能获取到。

在这里插入图片描述

转载请注明出处或者链接地址:https://www.qianduange.cn//article/8757.html
标签
wordexcel
评论
发布的文章

video 自定义视频播放控件

2024-05-26 01:05:25

HTML5 画布绘制海报

2024-05-26 01:05:13

HTML5学习(三)

2024-05-26 01:05:43

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!