【JavaScript】Vue純JS實現Office的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.運行代碼即可預覽。 該文章在 2023/5/26 18:59:53 編輯過 |
關鍵字查詢
相關文章
正在查詢... |