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项目打包优化策略

    浅谈vue项目打包优化策略

    这篇文章主要介绍了浅谈vue项目打包优化策略,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • 17个vue常用的数组方法总结与实例演示

    17个vue常用的数组方法总结与实例演示

    这篇文章主要介绍了vue中常用的数组方法,包括:VUE数组转换字符串,VUE数组遍历,VUE数组过滤,VUE数组查询,VUE数组排序等功能,需要的朋友可以参考下
    2022-12-12
  • Vue.js实现文件上传和进度条显示功能

    Vue.js实现文件上传和进度条显示功能

    在现代Web开发中,文件上传是一个常见而重要的需求,无论是在用户上传头像、文档或者其他类型的文件时,良好的用户体验都是至关重要的,在这篇博客中,我们将介绍如何使用Vue.js来实现文件上传功能,同时显示上传进度条,需要的朋友可以参考下
    2024-11-11
  • Composition API思想封装NProgress示例详解

    Composition API思想封装NProgress示例详解

    这篇文章主要为大家介绍了Composition API思想封装NProgress示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • Vue中@keyup.enter @v-model.trim的用法小结

    Vue中@keyup.enter @v-model.trim的用法小结

    这篇文章主要介绍了Vue中@keyup.enter @v-model.trim的用法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-12-12
  • 详解Vue中组件传值的多重实现方式

    详解Vue中组件传值的多重实现方式

    这篇文章主要介绍了详解Vue中组件传值的多重实现方式,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-08
  • vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知

    vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知

    这篇文章主要介绍了vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-08
  • 详解vue-router传参的两种方式

    详解vue-router传参的两种方式

    Vue Router 是 Vue.js 官方的路由管理器。这篇文章主要介绍了详解vue-router传参的两种方式,需要的朋友可以参考下
    2018-09-09
  • vue移动端下拉刷新和上拉加载的实现代码

    vue移动端下拉刷新和上拉加载的实现代码

    这篇文章主要介绍了vue移动端下拉刷新和上拉加载的实现代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • 浅谈关于.vue文件中style的scoped属性

    浅谈关于.vue文件中style的scoped属性

    本篇文章主要主要介绍了浅谈关于.vue文件中style的scoped属性,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08

最新评论