Vue如何实现pptx在线预览

 更新时间:2024年09月26日 09:58:01   作者:张鲁一  
通过PPTXjs插件,实现PPTX文件在线预览,需下载PPTXjs,将其引入HTML页面,并编写相应的HTML和JS代码,如果是移动端还需调整div大小,这是一种便捷的前端PPTX转HTML技术,适合网页展示使用

Vue实现pptx在线预览

PPTX在线预览,使用jquery的插件《PPTXjs》,纯前端实现pptx转html进行展示

1.在PPTXjs官网下载插件

在index.html内引入

<link rel="stylesheet" href="/PPTXjs/css/pptxjs.css" rel="external nofollow" >
<link rel="stylesheet" href="/PPTXjs/css/nv.d3.min.css" rel="external nofollow" > <!-- for charts graphs -->
<script type="text/javascript" src="/PPTXjs/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="/PPTXjs/js/jszip.min.js"></script> <!-- v2.. , NOT v.3.. -->
<script type="text/javascript" src="/PPTXjs/js/filereader.js"></script> <!--https://github.com/meshesha/filereader.js -->
<script type="text/javascript" src="/PPTXjs/js/d3.min.js"></script> <!-- for charts graphs -->
<script type="text/javascript" src="/PPTXjs/js/nv.d3.min.js"></script> <!-- for charts graphs -->
<script type="text/javascript" src="/PPTXjs/js/pptxjs.js"></script>
<script type="text/javascript" src="/PPTXjs/js/divs2slides.js"></script> <!-- for slide show -->

2.html代码

<div id="pptx"></div>

3.js代码

$("#pptx").pptxToHtml({ 
    pptxFileUrl: "Sample_12.pptx", //pptx文件地址
    slidesScale: "100%", 
    slideMode: false, 
    keyBoardShortCut: false 
});

4.如果是移动端项目

需要把div缩放

否则生成的html元素过大会溢出屏幕(PC端可忽略此步骤)

// 由于生成的html元素过大会溢出,这里用定时器检测元素生成完毕后进行缩放显示
let timer = setInterval(() => {
    const $slides = $(".slides");
    if ($slides.children().length) {
      const slidesWidth = Math.max(...Array.from($slides.children()).map((s) => s.offsetWidth))
      const $wrapper = $('#pptx');
      const wrapperWidth = $wrapper[0].offsetWidth;
      $wrapper.css({
        transform: `scale(${wrapperWidth / slidesWidth})`,
        "transform-origin": "top left",
      })
      clearInterval(timer)
    }
}, 100);

运行代码即可预览

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue实现tab切换的3种方式及切换保持数据状态

    vue实现tab切换的3种方式及切换保持数据状态

    这篇文章主要给大家介绍了关于vue实现tab切换的3种方式及切换保持数据状态的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-05-05
  • vue3页面query参数变化并重新加载页面数据方式

    vue3页面query参数变化并重新加载页面数据方式

    在Web开发中,页面间的跳转及数据刷新是常见问题,通过使用$router.push和$router.replace方法,可以控制页面跳转的行为,具体操作时,若发现页面ID变更后数据未刷新,可通过给router-view标签添加key值解决,若使用keep-alive
    2024-10-10
  • React和Vue实现路由懒加载的示例代码

    React和Vue实现路由懒加载的示例代码

    路由懒加载是一项关键技术,它可以帮助我们提高Web应用的加载速度,本文主要介绍了React和Vue实现路由懒加载的示例代码,具有一定的参考价值,感兴趣的可以了解一下
    2024-01-01
  • 在Vue中使用antv的示例代码

    在Vue中使用antv的示例代码

    这篇文章主要介绍了在Vue中使用antv的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06
  • vue的简介及@vue/cli 脚手架的使用示例

    vue的简介及@vue/cli 脚手架的使用示例

    vue 是一个 渐进式的javascript框架,脚手架是一个通用概念,帮助搭建项目的工具,本文以vue2为例结合实例代码给大家详细讲解,感兴趣的朋友跟随小编一起看看吧
    2022-12-12
  • 解决elementUI中el-tree树形结构中节点过滤的问题

    解决elementUI中el-tree树形结构中节点过滤的问题

    这篇文章主要介绍了解决elementUI中el-tree树形结构中节点过滤的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • vue引入element-ui之后,页面是空白的问题及解决

    vue引入element-ui之后,页面是空白的问题及解决

    这篇文章主要介绍了vue引入element-ui之后,页面是空白的问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • vue3.0实现考勤日历组件使用详解

    vue3.0实现考勤日历组件使用详解

    这篇文章主要为大家详细介绍了vue3.0实现考勤日历组件使用,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-08-08
  • 怎样查看vue-cli的安装位置

    怎样查看vue-cli的安装位置

    这篇文章主要介绍了怎样查看vue-cli的安装位置问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • 在vue中axios设置timeout超时的操作

    在vue中axios设置timeout超时的操作

    这篇文章主要介绍了在vue中axios设置timeout超时的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09

最新评论