Vue如何實(shí)現(xiàn)pptx在線預(yù)覽
更新時(shí)間：2024年09月26日 09:58:01 作者：張魯一
通過(guò)PPTXjs插件,實(shí)現(xiàn)PPTX文件在線預(yù)覽,需下載PPTXjs,將其引入HTML頁(yè)面,并編寫(xiě)相應(yīng)的HTML和JS代碼,如果是移動(dòng)端還需調(diào)整div大小,這是一種便捷的前端PPTX轉(zhuǎn)HTML技術(shù),適合網(wǎng)頁(yè)展示使用
Vue實(shí)現(xiàn)pptx在線預(yù)覽
PPTX在線預(yù)覽，使用jquery的插件《PPTXjs》，純前端實(shí)現(xiàn)pptx轉(zhuǎn)html進(jìn)行展示
1.在PPTXjs官網(wǎng)下載插件
在index.html內(nèi)引入
<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 -->
2.html代碼
<div id="pptx"></div>
3.js代碼
$("#pptx").pptxToHtml({
pptxFileUrl: "Sample_12.pptx", //pptx文件地址
slidesScale: "100%",
slideMode: false,
keyBoardShortCut: false
});4.如果是移動(dòng)端項(xiàng)目
需要把div縮放
否則生成的html元素過(guò)大會(huì)溢出屏幕（PC端可忽略此步驟）
// 由于生成的html元素過(guò)大會(huì)溢出，這里用定時(shí)器檢測(cè)元素生成完畢后進(jìn)行縮放顯示
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);運(yùn)行代碼即可預(yù)覽
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了淺談vue項(xiàng)目打包優(yōu)化策略，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
17個(gè)vue常用的數(shù)組方法總結(jié)與實(shí)例演示
這篇文章主要介紹了vue中常用的數(shù)組方法,包括：VUE數(shù)組轉(zhuǎn)換字符串，VUE數(shù)組遍歷，VUE數(shù)組過(guò)濾，VUE數(shù)組查詢,VUE數(shù)組排序等功能，需要的朋友可以參考下2022-12-12
Vue.js實(shí)現(xiàn)文件上傳和進(jìn)度條顯示功能
在現(xiàn)代Web開(kāi)發(fā)中,文件上傳是一個(gè)常見(jiàn)而重要的需求,無(wú)論是在用戶上傳頭像、文檔或者其他類型的文件時(shí),良好的用戶體驗(yàn)都是至關(guān)重要的,在這篇博客中,我們將介紹如何使用Vue.js來(lái)實(shí)現(xiàn)文件上傳功能,同時(shí)顯示上傳進(jìn)度條,需要的朋友可以參考下2024-11-11
Composition API思想封裝NProgress示例詳解
這篇文章主要為大家介紹了Composition API思想封裝NProgress示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
Vue中@keyup.enter?@v-model.trim的用法小結(jié)
這篇文章主要介紹了Vue中@keyup.enter?@v-model.trim的用法,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-12-12
這篇文章主要介紹了詳解Vue中組件傳值的多重實(shí)現(xiàn)方式,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-08-08
vue 使用element-ui中的Notification自定義按鈕并實(shí)現(xiàn)關(guān)閉功能及如何處理多個(gè)通知
這篇文章主要介紹了vue 使用element-ui中的Notification自定義按鈕并實(shí)現(xiàn)關(guān)閉功能及如何處理多個(gè)通知，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08
Vue Router 是 Vue.js 官方的路由管理器。這篇文章主要介紹了詳解vue-router傳參的兩種方式,需要的朋友可以參考下2018-09-09
vue移動(dòng)端下拉刷新和上拉加載的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue移動(dòng)端下拉刷新和上拉加載的實(shí)現(xiàn)代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
淺談關(guān)于.vue文件中style的scoped屬性
本篇文章主要主要介紹了淺談關(guān)于.vue文件中style的scoped屬性，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08