当前位置： 首页 > news >正文

vue项目PC端和移动端实现在线预览pptx文件

news 2026/2/7 10:15:38

通过PPTXjs插件,实现PPTX文件在线预览,需下载PPTXjs,将其引入HTML页面,并编写相应的HTML和JS代码,如果是移动端还需调整div大小,这是一种便捷的前端PPTX转HTML技术,适合网页展示使用 

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

点击下载PPTXjs 

1.把下载的包放到public中ppt目录

2.在ppt目录新建index.html，添加内容

<html>
<header>
<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 -->
</header>
<body>
<div id="pptx"></div>
</body>
<script></script>
</html>

 3.在script中添加js脚本

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

4.如果是移动端项目需要把div缩放，否则生成的html元素过大会溢出屏幕（PC端可忽略此步骤）

再添加如下js脚本

// 由于生成的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.在vue文件中使用iframe来渲染html

<template><div><iframe width="100%" style="height: 100vh;border:none;" :src="pptSrc"></iframe></div>
</template>

 6.拼接pptSrc

<script setup lang="ts">const pptSrc= `/ppt/index.html?file=${encodeURIComponent(pptUrl)}`;
</script>

 至此，就可以在pc端和移动端查看ppt了

 

相关文章：

vue项目PC端和移动端实现在线预览pptx文件

通过PPTXjs插件,实现PPTX文件在线预览,需下载PPTXjs,将其引入HTML页面,并编写相应的HTML和JS代码,如果是移动端还需调整div大小,这是一种便捷的前端PPTX转HTML技术,适合网页展示使用 PPTX在线预览&#xff0c;使用jquery的插件《PPTXjs》&#xff0c;纯前端实现pptx转html进行…...

编程日记 2024/11/16 17:24:28

uniapp适配暗黑模式配置plus.nativeUI.setUIStyle适配DarkMode配置

uniapp适配暗黑模式配置 目录 uniapp适配暗黑模式配置setUIStyleDarkMode 适配app-plus manifest.json配置theme.json配置pages.json配置页面切换代码实现同步手机暗黑配置额外适配 参考官方文档&#xff1a;https://uniapp.dcloud.net.cn/tutorial/darkmode.html 主要用到api…...

编程日记 2024/11/16 17:22:26

EXCEL 或 WPS 列下划线转驼峰

使用场景&#xff1a; 需要将下划线转驼峰&#xff0c;直接在excel或wps中第一行使用公式&#xff0c;然后快速刷整个列格式即可。全列工下划线转为格式&#xff0c;使用效果如下&#xff1a; 操作步骤&#xff1a; 第一步&#xff1a;在需要显示驼峰的一列&#xff0c;复制以…...

编程日记 2024/11/16 17:21:25

走进Linux的历史发展史

目录 前言 Linux的发展史 UNIX发展的历史 Linux发展历史 开源 企业应用现状 Linux在服务器领域的发展 桌面领域 移动嵌入式领域 云计算/大数据领域 发行版 ​编辑 Linux环境搭建方式 前言 本节博客内容较水&#xff0c;主要介绍Linux的发展历史和其相关的学习内容&a…...

编程日记 2024/11/16 17:19:23

学习yum工具，进行安装软件

目录 1.Linux 软件包管理器 yum 什么是软件包 2.Linux下安装软件的方案 3.Linux软件生态 Linux下载软件的过程&#xff08;Ubuntu、Centos、other&#xff09; 操作系统的好坏评估--- ⽣态问题 为什么会有⼈免费特定社区提供软件&#xff0c;还发布&#xff1f;还提供云服…...

编程日记 2024/11/16 17:18:21

union介绍及使用

union格式 在C中&#xff0c;union是一种特殊的数据类型&#xff0c;它允许在相同的内存位置存储不同的数据类型&#xff0c;但在任意时刻只能使用一个成员。以下是union类型的基本格式说明&#xff1a; union UnionName {memberType1 memberName1;memberType2 memberName2;m…...

编程日记 2024/11/16 17:13:17

安全，服务器证书和SSL连接

业务报错&#xff1a; javax.net.ssl.SSLPeerUnverifiedException: Certificate for <10.5.20.137> doesn’t match any of the subject alternative names: [*.dt.zte.com.cn] at org.apache.http.conn.ssl.SSLConnectionSocketFactory.verifyHostname(SSLConnectionSoc…...

编程日记 2024/11/16 17:12:15

Java结合ElasticSearch根据查询关键字，高亮显示全文数据。

由于es高亮显示机制的问题。当全文内容过多&#xff0c;且搜索中标又少时&#xff0c;就会出现高亮结果无法覆盖全文。因此需要根据需求手动替换。 1.根据es的ik分词器获取搜索词的分词结果。 es部分&#xff1a; //中文分词解析 post /_analyze {"analyzer":"…...

编程日记 2024/11/16 17:11:14

Design Compiler：Topographical Workshop Lab2

相关阅读 Design Compilerhttps://blog.csdn.net/weixin_45791458/category_12738116.html?spm1001.2014.3001.5482 本文是对Synopsys Design Compiler Topographical/Graphical Workshop Lab Guide中Lab2的翻译&#xff0c;Lab文件可以从以下链接获取。 Synopsys Design Co…...

编程日记 2024/11/16 17:10:12

【C语言】连接陷阱探秘(1)：声明与定义

目录 一、声明与定义的混淆 1.1. 声明（Declaration） 1.2. 定义（Definition） 1.3. 避免混淆的方法 1.4. 示例 二、声明与定义不匹配 2.1. 常见的不匹配情况 2.2. 解决方法 三、外部变量与静态变量的命名冲突 3.1. 外部变量命名冲突 3.2. 静态变量命名冲突 四、缺…...

编程日记 2024/11/16 17:08:09

ChatGPT学术专用版，一键润色纠错+中英互译+批量翻译PDF

ChatGPT academic项目是由中科院团队基于ChatGPT专属定制。论文润色、语法检查、中英互译、代码解释等可一键搞定&#xff0c;堪称科研神器。 功能介绍 我们以3.5版本为例&#xff0c;ChatGPT学术版总共分为五个区域&#xff1a;输入控制区、输出对话区、基础功能区、函数插件…...

编程日记 2024/11/16 17:07:08

python isinstance(True, int)

今天的bug 是布尔类型给的。 >>> a True >>> isinstance(a, int) True>>> a True >>> isinstance(a, bool) True‌Python中的布尔类型&#xff08;bool&#xff09;实际上是整数类型&#xff08;int&#xff09;的一个子类&#xff0c;…...

编程日记 2024/11/16 17:05:06

1.5寸**进口 128128带灰阶oled屏 spi串口 老王电子diy 设备 OLED 2024/11/15 arduino

名:1.5寸**进口 128128带灰阶oled屏 协:spi串口 铺:老王电子diy 设备: OLED 时间:2024/11/15 IDE: arduino 兜兜转转还是打通了,他的接口 用的i2c 标志 夭寿咯 MOSI&#xff08;Master Out Slave In&#xff09;&#xff1a;主机输出&#xff0c;从机输入。MISO&#xff…...

编程日记 2024/11/16 17:04:05

【EasyExcel】复杂导出操作-自定义颜色样式等（版本3.1.x）

文章目录 前言一、自定义拦截器二、自定义操作1.自定义颜色2.合并单元格 三、复杂操作示例1.实体(使用了注解式样式)&#xff1a;2.自定义拦截器3.代码4.最终效果 前言 本文简单介绍阿里的EasyExcel的复杂导出操作&#xff0c;包括自定义样式&#xff0c;根据数据合并单元格等。…...

编程日记 2024/11/16 17:01:02

机器学习 ---线性回归

目录 摘要&#xff1a; 一、简单线性回归与多元线性回归 1、简单线性回归 2、多元线性回归 3、残差 二、线性回归的正规方程解 1、线性回归训练流程 2、线性回归的正规方程解 &#xff08;1&#xff09;适用场景 &#xff08;2&#xff09;正规方程解的公式 三、衡量…...

编程日记 2024/11/16 17:00:01

深度学习每周学习总结J5（DenseNet-121 +SE 算法实战与解析 - 猴痘识别）

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 | 接辅导、项目定制 0. 总结 数据导入及处理部分&#xff1a;本次数据导入没有使用torchvision自带的数据集&#xff0c;需要将原始数据进行处理包括数据导入…...

编程日记 2024/11/16 16:57:59

VBA学习笔记：点击单元格显示指定的列

应用场景&#xff1a; 表格中列数较多&#xff0c;特定条件下隐藏一些无关的列&#xff0c;只保留相关的列&#xff0c;使表格更加清晰。 示例&#xff1a;原表格如下 点击一年级&#xff0c;只显示一年级相关的科目&#xff1a; 点击二年级&#xff0c;只显示二年级相关的科…...

编程日记 2024/11/16 16:55:56

windows C#-LINQ概述

语言集成查询 (LINQ) 是一系列直接将查询功能集成到 C# 语言的技术统称。 数据查询历来都表示为简单的字符串&#xff0c;没有编译时类型检查或 IntelliSense 支持。 此外&#xff0c;需要针对每种类型的数据源了解不同的查询语言&#xff1a;SQL 数据库、XML 文档、各种 Web 服…...

编程日记 2024/11/16 16:54:55

vue项目npm run serve出现【- Network: unavailable】（从排查到放弃）

1. 问题现象 环境&#xff1a; 系统&#xff1a;win11node&#xff1a;v16.20.2“vue”: “2.6.10” 执行npm run serve启动vue项目&#xff0c;期望&#xff1a; App running at:- Local: http://localhost:9528/ - Network: http://x.x.x.x:9528/实际&#xff1a; App runn…...

编程日记 2024/11/16 16:53:53

R语言贝叶斯分析：INLA 、MCMC混合模型、生存分析肿瘤临床试验、间歇泉喷发时间数据应用|附数据代码...

全文链接&#xff1a;https://tecdat.cn/?p38273 多模态数据在统计学中并不罕见&#xff0c;常出现在观测数据来自两个或多个潜在群体或总体的情况。混合模型常用于分析这类数据&#xff0c;它利用不同的组件来对数据中的不同群体或总体进行建模。本质上&#xff0c;混合模型是…...

编程日记 2024/11/16 16:52:51

基于算法竞赛的c++编程（28）结构体的进阶应用

结构体的嵌套与复杂数据组织 在C中&#xff0c;结构体可以嵌套使用&#xff0c;形成更复杂的数据结构。例如&#xff0c;可以通过嵌套结构体描述多层级数据关系&#xff1a; struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...

编程新知 2025/11/16 19:06:23

应用升级/灾备测试时使用guarantee 闪回点迅速回退

1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间&#xff0c; 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点&#xff0c;不需要开启数据库闪回。…...

编程新知 2026/1/14 22:12:47

深入浅出：JavaScript 中的 `window.crypto.getRandomValues()` 方法

深入浅出&#xff1a;JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中&#xff0c;随机数的生成看似简单&#xff0c;却隐藏着许多玄机。无论是生成密码、加密密钥&#xff0c;还是创建安全令牌&#xff0c;随机数的质量直接关系到系统的安全性。Jav…...

编程新知 2025/10/8 4:56:09

Python爬虫（一）：爬虫伪装

一、网站防爬机制概述 在当今互联网环境中&#xff0c;具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类&#xff1a; 身份验证机制&#xff1a;直接将未经授权的爬虫阻挡在外反爬技术体系&#xff1a;通过各种技术手段增加爬虫获取数据的难度…...

编程新知 2026/1/30 20:42:46

python报错No module named ‘tensorflow.keras‘

是由于不同版本的tensorflow下的keras所在的路径不同&#xff0c;结合所安装的tensorflow的目录结构修改from语句即可。 原语句&#xff1a; from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后&#xff1a; from tensorflow.python.keras.lay…...

编程新知 2025/9/24 7:39:50

安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”（装配）

船舶制造装配管理现状&#xff1a;装配工作依赖人工经验&#xff0c;装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书&#xff0c;但在实际执行中&#xff0c;工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...

编程新知 2026/2/6 2:16:18

招商蛇口 | 执笔CID，启幕低密生活新境

作为中国城市生长的力量&#xff0c;招商蛇口以“美好生活承载者”为使命&#xff0c;深耕全球111座城市&#xff0c;以央企担当匠造时代理想人居。从深圳湾的开拓基因到西安高新CID的战略落子&#xff0c;招商蛇口始终与城市发展同频共振&#xff0c;以建筑诠释对土地与生活的…...

编程新知 2026/1/26 8:13:33

【从零开始学习JVM | 第四篇】类加载器和双亲委派机制(高频面试题)

前言&#xff1a; 双亲委派机制对于面试这块来说非常重要&#xff0c;在实际开发中也是经常遇见需要打破双亲委派的需求&#xff0c;今天我们一起来探索一下什么是双亲委派机制&#xff0c;在此之前我们先介绍一下类的加载器。 目录 ​编辑 前言&#xff1a; 类加载器 1. …...

编程新知 2026/1/23 7:37:12

comfyui 工作流中 图生视频 如何增加视频的长度到5秒

comfyUI 工作流怎么可以生成更长的视频。除了硬件显存要求之外还有别的方法吗&#xff1f; 在ComfyUI中实现图生视频并延长到5秒&#xff0c;需要结合多个扩展和技巧。以下是完整解决方案&#xff1a; 核心工作流配置&#xff08;24fps下5秒120帧&#xff09; #mermaid-svg-yP…...

编程新知 2025/11/4 17:30:04

用 Rust 重写 Linux 内核模块实战：迈向安全内核的新篇章

用 Rust 重写 Linux 内核模块实战&#xff1a;迈向安全内核的新篇章 ​​摘要&#xff1a;​​ 操作系统内核的安全性、稳定性至关重要。传统 Linux 内核模块开发长期依赖于 C 语言&#xff0c;受限于 C 语言本身的内存安全和并发安全问题&#xff0c;开发复杂模块极易引入难以…...

编程新知 2025/10/25 19:31:21