Vue实现pptx在线预览

2023-06-02 16:37| 来源: 网络整理| 查看: 265

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

1.在PPTXjs官网下载插件，并在index.html内引入

2.html代码

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);

5.运行代码即可预览

【本文地址】

公司简介

联系我们