Blazor中使用impress.js

impress.js是什么?

你想在浏览器中做PPT吗?比如在做某些类似于PPT自动翻页,局部放大之类,炫酷无比。

官方示例直接放到Blazor中是不可用的。几经尝试,用以下方法可以实现。

(写文不易,请点赞、收藏、关注,并在转载请注明出处和作者)

1、在启动页中静态引用javascript 

...
<body>
<script src="_framework/blazor.server.js" asp-append-version="true"></script>
<script type="text/javascript" src="lib/impress.js/impress.js"></script>
</body>
</html>

注意,是在body的最后来引用,在<script src="_framework/blazor.server.js" asp-append-version="true"></script>之后。

2、创建一个javascript函数来初始化。

function startPPT() {
    impress().init();
}

3、在OnAfterRenderAsync(bool firstRender)中调用

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        await _jsRuntime.InvokeVoidAsync("startPPT");

        await InvokeAsync(() => StateHasChanged());
    }
}

impress.js的具体用法在这里:

https://github.com/impress

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/314300.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Java常用类---日期时间类

日期时间类 Date类 简介 在Java中&#xff0c;Date类用来封装当前的日期和时间。Date类提供两个构造函数来初始化对象&#xff0c;如下所示。 通过Date() 使用当前日期和时间来初始化对象。 通过Date(long millisec) 来初始化对象&#xff0c;其中的参数是从1970年1月1日起…

RS触发器

转自&#xff1a;【基础】RS触发器_两个或非门构成rs触发器-CSDN博客 RS触发器为什么能 “保持上一状态” 触发器就是在常规的门电路的基础上加入了反馈&#xff0c;这样触发器就实现了存储数据的功能。这也是上面章节 “RS触发器实验” 的 RS触发器特征表 中第3条 “保持上一…

Redis的优化

1 Redis的高可用 1.1 高可用的定义 在web服务器中&#xff0c;高可用是指服务器可以正常访问的时间&#xff0c;衡量的标准是在多长时间内可以提供正常服务&#xff08;99.9%、99.99%、99.999%等等&#xff09;。 但是在Redis语境中&#xff0c;高可用的含义似乎要宽泛一些&…

mat数据格式转png

目的 将多个.mat数据格式转化成多个文件夹下的png图片格式 即 一个PAT.mat文件&#xff0c;生成一个PAT文件夹下的图片 方法 1 单文件处理 import scipy.io as scio from PIL import Image import numpy as npdef MatrixToImage(data):data data*255new_im Image.fromarray…

windos exe 以服务的形式运行(开机运行)

windos 品台编写的 小工具 exe 或者 批处理 .bat 经常需要开机自启动&#xff0c;可以直接把它 加在开启启动项&#xff0c;或者做成 windos服务&#xff0c;这样既可以开机自动启动而且还可以 防止误触关闭掉&#xff1b; windos 以服务启动 exe/bat 的通用方式&#xff1…

Word不同部分(分节)设置页眉和页码的使用指南——附案例操作

Word页眉和页码分节设置的使用指南 目录 Word页眉和页码分节设置的使用指南摘要1. 插入分节符2. 设置不同的页眉3. 设置不同的页码4. 调整页码的起始值5. 删除或更改分节6. 预览和调整 摘要 在撰写word文档时&#xff0c;我们经常需要在不同的部分应用不同的页眉和页码格式。在…

androj studio安装及运行源码

抖音教学视频 目录 1、 jdk安装 2、下载安装androj studio 3 、打开源码安装运行相关组件 4、 安装模拟器 1、 jdk安装 安卓项目也是java开发的&#xff0c;运行在虚拟机上&#xff0c;安装jdk及运行的时候&#xff0c;就会自动生成虚拟机&#xff0c; jdk前面已经讲过&…

宏景eHR 多处 SQL注入漏洞复现

0x01 产品简介 宏景eHR人力资源管理软件是一款人力资源管理与数字化应用相融合,满足动态化、协同化、流程化、战略化需求的软件。 0x02 漏洞概述 宏景eHR view、trainplan_tree.jsp等接口处存在SQL注入漏洞,未经过身份认证的远程攻击者可利用此漏洞执行任意SQL指令,从而窃…

C++力扣题目106,105--中序和后序,前序和中序遍历构造二叉树

106.从中序与后序遍历序列构造二叉树 力扣题目链接(opens new window) 根据一棵树的中序遍历与后序遍历构造二叉树。 注意: 你可以假设树中没有重复的元素。 例如&#xff0c;给出 中序遍历 inorder [9,3,15,20,7]后序遍历 postorder [9,15,7,20,3] 返回如下的二叉树&am…

从无到有制作docker镜像、容器详细步骤

1、编写一个Dockerfile文件&#xff0c;内容如下 # 基础镜像jdk,jdk里包含里操作系统 FROM openjdk:8u282-jdk# 工作目录&#xff0c;也就是容器里目录 WORKDIR /home/prq/# 添加ppp目录下的文件到容器/home/prq/里 ADD ./ppp /home/prq/# 暴露端口8080 EXPOSE 8080# 启动脚本…

红黑树之概述

红黑树 R-B Tree&#xff0c;全称是 Red-Black Tree&#xff0c;又称为“红黑树”&#xff0c;它一种特殊的二叉查找树。红黑树的每个节点上都有存储位表示节点的颜色&#xff0c;可以是红(Red)或黑(Black)。 红黑树的特性 &#xff08;1&#xff09;每个节点或者是黑色&…

从DETR到Mask2Former(1):DETR-segmentation结构全解析

网上关于DETR做的detection的解析很多&#xff0c;但是DETR做Segmentation的几乎没有&#xff0c;本文结合DETR的论文与代码&#xff0c;对DETR做一个详细的拆解。理解DETR是理解Mask2Former的基础。 首先得把DETR-segmentation给run起来。Github上DETR的repository&#xff0…

日常工作中,软件测试人员如何避免“背锅”

作为一名软件测试工程师&#xff0c;日常工作中最常打交道的肯定就是开发和产品经理。有沟通就会问题&#xff0c;有问题难免会有争执。那么你肯定听过这些话&#xff1a; “这么弱智的bug你都测不出来吗&#xff1f;” “为啥这个功能还没测完就上线了&#xff1f;” “研发…

AI生成APP工具推荐:5款让你惊艳的AI应用

在这个数字化、智能化的时代&#xff0c;人工智能(AI)已经深入到我们生活的方方面面。其中&#xff0c;AI生成APP工具更是以其强大的创意和生成能力&#xff0c;成为自媒体人和设计师们的得力助手。本文将为你介绍五款实用的AI生成APP工具&#xff0c;它们将为你的创意打开无限…

Pycharm close project 速度缓慢解决办法

解决Pycharm close project缓慢现象 1.问题描述 close project后需要等待很长的时间。 2.解决办法 在Help -> Find Action -> 输入 Registry -> 禁用ide.await.scope.completion 问题解决&#xff01;&#xff01;&#xff01; &#x1f603;&#x1f603;&#x…

opencv拉流出现missing picture in access unit with size 4错误解决

0、应用场景问题 我们使用opencv作为拉流客户端&#xff0c;获取画面后进行图像处理并推流&#xff08;使用ffmpeg库&#xff09;。 opencv解码同样使用ffmpeg库。 我们要求opencv能根据业务不断进行拉流操作&#xff0c;等效的逻辑代码如下&#xff1a; while(1) {printf(&…

YOLOv6s,map值打印成两位小数(原本是显示0.538,变成显示为53.79)

显示结果 更改前&#xff1a; 更改后&#xff1a; 方法 将tools/eval.py中的--do_pr_metric后面改为defaultTrue即可打印出map值原本是显示0.538&#xff0c;变成显示为53.79&#xff0c;方法为&#x1f447; 在YOLOv6-main/yolov6/core/evaler.py中做如下更改&#xff1a…

揭秘H5与小程序的测试奥秘!

最近接触了较多关于H5页面的测试&#xff0c;H5页面的测试除了业务逻辑功能测试外&#xff0c;其他部分的测试方法基本是可以通用的&#xff0c;在此对H5页面和小程序的一些通用测试方法进行总结分享给大家。 H5优势 H5可以跨平台&#xff0c;开发成本相对较低&#xff1b; H…

代码随想录算法训练营第25天 | 216.组合总和III 17.电话号码的字母组合

目录 216.组合总和III &#x1f4a1;解题思路 回溯三部曲 &#x1f4bb;实现代码 17.电话号码的字母组合 &#x1f4a1;解题思路 # 数字和字母如何映射 # 回溯法来解决n个for循环的问题 &#x1f4bb;实现代码 216.组合总和III 题目链接&#xff1a;216.组合总和III …

必须掌握的100+个Linux命令大全【持续更新中】

别有一番风趣的alias … note:: 寒蝉凄切&#xff0c;对长亭晚&#xff0c;骤雨初歇。 柳永《雨霖铃》 Linux alias命令用于设置指令的别名&#xff0c;可以将比较长的命令进行简化。 默认情况下会输出当前的设置&#xff1a; $ alias lls -lah lals -lAh llls -lh lsls --…