Vue实现pptx在线预览

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

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

<link rel="stylesheet" href="/PPTXjs/css/pptxjs.css">
<link rel="stylesheet" href="/PPTXjs/css/nv.d3.min.css"> <!-- 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);

5.运行代码即可预览

Vue实现pptx在线预览相关推荐

js-xlsx vue导入excel在线预览
js-xlsx vue导入excel在线预览导入XLSX库官方地址Github 安装 npm install xlsx --s 引入 import XLSX from 'xlsx' HTML &l ...
office办公文档doc、docx、xls、xlsx、ppt、pptx在线预览解决方案一，背景
office办公文档doc.docx.xls.xlsx.ppt.pptx在线预览解决方案 office办公文档doc.docx.xls.xlsx.ppt.pptx无法直接在浏览器中打开,很多OA办公软 ...
基于vue实现word 在线预览
1.安装mammoth插件 npm install mammoth 2.HTML代码 <template><div id="wordView" v-html=&q ...
vue pdf文件下载 / 在线预览真是有效！
1.pdf下载首先说下下载问题, 通过文件地址下载存留问题无法下载试过a标签搭配文件地址下载,最后发现行不通,一点击下载就直接打开了,不符合需求. 通过文件流形式,完美解决, 这里通过后端把文 ...
前端（vue）js在线预览PDF、Word、Excel、ppt等office文件
js解決 window.open("https://view.xdocin.com/view?src=" + encodeURIComponent(url) + '&too ...
Vue项目实现在线预览pdf，并且可以批量打印pdf
最近遇到一个需求,就是要在页面上呈现pdf内容,并且还能用打印机批量打印pdf,最终效果如下: 当用户在列表页面,勾选中两条数据后,点击"打印表单"按钮之后,会跳到如下的预览页面: ...
移动端H5+vue使用vue-pdf在线预览PDF
需求是点击查看收据按钮,进入新页面直接显示收据,可以放大.缩小.旋转.下载,没有分页 1.安装 npm i vue-pdf --save 2.使用 <template><div &g ...
vue实现pdf，ppt，pptx，xlx，xlsx，doc和doc在线预览和下载
antd中手动上传的 <a-upload></a-upload> 上传前的函数,fileList 是上传文件列表可以进行删除,支持多个文件上传: 确认上传,接口调用,配置的a ...
SpringBoot+Vue+OpenOffice实现文档管理(文档上传、下载、在线预览)
场景 SpringBoot集成OpenOffice实现doc文档转html: SpringBoot集成OpenOffice实现doc文档转html_BADAO_LIUMANG_QIZHI的博客-CSD ...

Vue实现pptx在线预览

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

Vue实现pptx在线预览相关推荐

最新文章

热门文章