vue项目PC端和移动端实现在线预览pptx文件
通过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在线预览，使用jquery的插件《PPTXjs》，纯前端实现pptx转html进行…...
uniapp适配暗黑模式配置plus.nativeUI.setUIStyle适配DarkMode配置
uniapp适配暗黑模式配置 目录 uniapp适配暗黑模式配置setUIStyleDarkMode 适配app-plus manifest.json配置theme.json配置pages.json配置页面切换代码实现同步手机暗黑配置额外适配 参考官方文档：https://uniapp.dcloud.net.cn/tutorial/darkmode.html 主要用到api…...
EXCEL 或 WPS 列下划线转驼峰
使用场景： 需要将下划线转驼峰，直接在excel或wps中第一行使用公式，然后快速刷整个列格式即可。全列工下划线转为格式，使用效果如下： 操作步骤： 第一步：在需要显示驼峰的一列，复制以…...
走进Linux的历史发展史
目录 前言 Linux的发展史 UNIX发展的历史 Linux发展历史 开源 企业应用现状 Linux在服务器领域的发展 桌面领域 移动嵌入式领域 云计算/大数据领域 发行版 编辑 Linux环境搭建方式 前言 本节博客内容较水，主要介绍Linux的发展历史和其相关的学习内容&a…...
学习yum工具，进行安装软件
目录 1.Linux 软件包管理器 yum 什么是软件包 2.Linux下安装软件的方案 3.Linux软件生态 Linux下载软件的过程（Ubuntu、Centos、other） 操作系统的好坏评估--- ⽣态问题 为什么会有⼈免费特定社区提供软件，还发布？还提供云服…...
union介绍及使用
union格式 在C中，union是一种特殊的数据类型，它允许在相同的内存位置存储不同的数据类型，但在任意时刻只能使用一个成员。以下是union类型的基本格式说明： union UnionName {memberType1 memberName1;memberType2 memberName2;m…...
安全，服务器证书和SSL连接
业务报错： 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…...
Java结合ElasticSearch根据查询关键字，高亮显示全文数据。
由于es高亮显示机制的问题。当全文内容过多，且搜索中标又少时，就会出现高亮结果无法覆盖全文。因此需要根据需求手动替换。 1.根据es的ik分词器获取搜索词的分词结果。 es部分： //中文分词解析 post /_analyze {"analyzer":"…...
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的翻译，Lab文件可以从以下链接获取。 Synopsys Design Co…...
【C语言】连接陷阱探秘(1)：声明与定义
目录 一、声明与定义的混淆 1.1. 声明（Declaration） 1.2. 定义（Definition） 1.3. 避免混淆的方法 1.4. 示例 二、声明与定义不匹配 2.1. 常见的不匹配情况 2.2. 解决方法 三、外部变量与静态变量的命名冲突 3.1. 外部变量命名冲突 3.2. 静态变量命名冲突 四、缺…...
ChatGPT学术专用版，一键润色纠错+中英互译+批量翻译PDF
ChatGPT academic项目是由中科院团队基于ChatGPT专属定制。论文润色、语法检查、中英互译、代码解释等可一键搞定，堪称科研神器。 功能介绍 我们以3.5版本为例，ChatGPT学术版总共分为五个区域：输入控制区、输出对话区、基础功能区、函数插件…...
)
python isinstance(True, int)
今天的bug 是布尔类型给的。 >>> a True >>> isinstance(a, int) True>>> a True >>> isinstance(a, bool) TruePython中的布尔类型（bool）实际上是整数类型（int）的一个子类，…...
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（Master Out Slave In）：主机输出，从机输入。MISOÿ…...
【EasyExcel】复杂导出操作-自定义颜色样式等（版本3.1.x）
文章目录 前言一、自定义拦截器二、自定义操作1.自定义颜色2.合并单元格 三、复杂操作示例1.实体(使用了注解式样式)：2.自定义拦截器3.代码4.最终效果 前言 本文简单介绍阿里的EasyExcel的复杂导出操作，包括自定义样式，根据数据合并单元格等。…...
机器学习 ---线性回归
目录 摘要： 一、简单线性回归与多元线性回归 1、简单线性回归 2、多元线性回归 3、残差 二、线性回归的正规方程解 1、线性回归训练流程 2、线性回归的正规方程解 （1）适用场景 （2）正规方程解的公式 三、衡量…...
深度学习每周学习总结J5（DenseNet-121 +SE 算法实战与解析 - 猴痘识别）
🍨 本文为🔗365天深度学习训练营 中的学习记录博客🍖 原作者：K同学啊 | 接辅导、项目定制 0. 总结 数据导入及处理部分：本次数据导入没有使用torchvision自带的数据集，需要将原始数据进行处理包括数据导入…...
VBA学习笔记：点击单元格显示指定的列
应用场景： 表格中列数较多，特定条件下隐藏一些无关的列，只保留相关的列，使表格更加清晰。 示例：原表格如下 点击一年级，只显示一年级相关的科目： 点击二年级，只显示二年级相关的科…...
windows C#-LINQ概述
语言集成查询 (LINQ) 是一系列直接将查询功能集成到 C# 语言的技术统称。 数据查询历来都表示为简单的字符串，没有编译时类型检查或 IntelliSense 支持。 此外，需要针对每种类型的数据源了解不同的查询语言：SQL 数据库、XML 文档、各种 Web 服…...
vue项目npm run serve出现【- Network: unavailable】（从排查到放弃）
1. 问题现象 环境： 系统：win11node：v16.20.2“vue”: “2.6.10” 执行npm run serve启动vue项目，期望： App running at:- Local: http://localhost:9528/ - Network: http://x.x.x.x:9528/实际： App runn…...
R语言贝叶斯分析：INLA 、MCMC混合模型、生存分析肿瘤临床试验、间歇泉喷发时间数据应用|附数据代码...
全文链接：https://tecdat.cn/?p38273 多模态数据在统计学中并不罕见，常出现在观测数据来自两个或多个潜在群体或总体的情况。混合模型常用于分析这类数据，它利用不同的组件来对数据中的不同群体或总体进行建模。本质上，混合模型是…...
YSYX学习记录（八）
C语言，练习0： 先创建一个文件夹，我用的是物理机： 安装build-essential 练习1： 我注释掉了 #include <stdio.h> 出现下面错误 在你的文本编辑器中打开ex1文件，随机修改或删除一部分，之后…...
第25节 Node.js 断言测试
Node.js的assert模块主要用于编写程序的单元测试时使用，通过断言可以提早发现和排查出错误。 稳定性: 5 - 锁定 这个模块可用于应用的单元测试，通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...
Keil 中设置 STM32 Flash 和 RAM 地址详解
文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面（Target 选项卡）1. IROM1（用于配置 Flash）2. IRAM1（用于配置 RAM）二、链接器设置界面（Linker 选项卡）1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数（如果没有勾选上面…...
三体问题详解
从物理学角度，三体问题之所以不稳定，是因为三个天体在万有引力作用下相互作用，形成一个非线性耦合系统。我们可以从牛顿经典力学出发，列出具体的运动方程，并说明为何这个系统本质上是混沌的，无法得到一般解…...
让AI看见世界：MCP协议与服务器的工作原理
让AI看见世界：MCP协议与服务器的工作原理 MCP（Model Context Protocol）是一种创新的通信协议，旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天，MCP正成为连接AI与现实世界的重要桥梁。…...
PAN/FPN
import torch import torch.nn as nn import torch.nn.functional as F import mathclass LowResQueryHighResKVAttention(nn.Module):"""方案 1: 低分辨率特征 (Query) 查询高分辨率特征 (Key, Value).输出分辨率与低分辨率输入相同。"""def __…...
Java毕业设计：WML信息查询与后端信息发布系统开发
JAVAWML信息查询与后端信息发布系统实现 一、系统概述 本系统基于Java和WML(无线标记语言)技术开发，实现了移动设备上的信息查询与后端信息发布功能。系统采用B/S架构，服务器端使用Java Servlet处理请求，数据库采用MySQL存储信息࿰…...
Python网页自动化Selenium中文文档
1. 安装 1.1. 安装 Selenium Python bindings 提供了一个简单的API，让你使用Selenium WebDriver来编写功能/校验测试。 通过Selenium Python的API，你可以非常直观的使用Selenium WebDriver的所有功能。 Selenium Python bindings 使用非常简洁方便的A…...
:LeetCode 142. 环形链表 II（Linked List Cycle II）详解)
Java详解LeetCode 热题 100(26):LeetCode 142. 环形链表 II（Linked List Cycle II）详解
文章目录 1. 题目描述1.1 链表节点定义 2. 理解题目2.1 问题可视化2.2 核心挑战 3. 解法一：HashSet 标记访问法3.1 算法思路3.2 Java代码实现3.3 详细执行过程演示3.4 执行结果示例3.5 复杂度分析3.6 优缺点分析 4. 解法二：Floyd 快慢指针法（…...
SQL进阶之旅 Day 22：批处理与游标优化
【SQL进阶之旅 Day 22】批处理与游标优化 文章简述（300字左右） 在数据库开发中，面对大量数据的处理任务时，单条SQL语句往往无法满足性能需求。本篇文章聚焦“批处理与游标优化”，深入探讨如何通过批量操作和游标技术提…...