前端PPT预览(新开窗口在线预览或者vue本地插件预览)

五柳先生、

已于 2023-08-30 11:05:56 修改

阅读量2.9k

点赞数

文章标签：前端 vue.js javascript

于 2023-08-30 11:03:07 首次发布

本文链接：https://blog.csdn.net/qq_36685296/article/details/132577587

版权

一、在线预览

1.http://vw.usdoc.cn/?src= 需要注册文件域名

2.https://view.xdocin.com/view?src=

3.https://view.officeapps.live.com/op/view.aspx?src= 有些文件不行

二、本地插件预览

1.下载pptx.js插件

2.引用依赖

   <script type="text/javascript" src="./pptx/js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="./pptx/js/jszip.min.js"></script>
    <script type="text/javascript" src="./pptx/js/filereader.js"></script>
    <script type="text/javascript" src="./pptx/js/d3.min.js"></script>
    <script type="text/javascript" src="./pptx/js/nv.d3.min.js"></script>
    <script type="text/javascript" src="./pptx/js/pptxjs.js"></script>
    <script type="text/javascript" src="./pptx/js/divs2slides.js"></script>
    <script type="text/javascript" src="./pptx/js/jquery.fullscreen-min.js"></script>

3.调用

<div id="slide-resolte-contaniner" ></div>

  mounted(){
    this.init()
   },
   methods: {
     init() {
      return  $("#slide-resolte-contaniner").pptxToHtml({ 
                pptxFileUrl: this.$route.query.url, 
                slidesScale: "50%", 
                slideMode: false, 
                keyBoardShortCut: false 
      })
    }
   }