Vue2实现docx,xlsx,pptx预览

一、docx预览

1、安装插件

npm i @js-preview/docx

2、代码中使用

html 复制代码

<template>
    <div id="docx"></div>
</template>

<script>
import jsPreviewDocx from "@js-preview/docx";
import '@js-preview/docx/lib/index.css'
export default {
    name: "JsPreviewDocxDemo",
    props:['fileUrl'],
    data(){
      return {
          myDocxPreviewer: null
      }
    },
    mounted() {
        //初始化时指明要挂载的父元素Dom节点
        this.myDocxPreviewer = jsPreviewDocx.init(document.getElementById('docx'));

//传递要预览的文件地址即可
        this.myDocxPreviewer.preview(this.fileUrl).then(()=>{
            console.log('预览完成');
        }).catch(e=>{
            console.log('预览失败', e);
        })
    },
    beforeDestroy() {
        this.myDocxPreviewer.destroy();
    }
};
</script>

<style scoped>

</style>

二、xlsx预览

1、安装插件

npm i @js-preview/excel

2、代码中使用

html 复制代码

<template>
    <div id="excel" style="height: 100%;"></div>
</template>

<script>
import jsPreviewExcel from "@js-preview/excel";
import '@js-preview/excel/lib/index.css';
export default {
    name: "JsPreviewExcelDemo",
    props:['fileUrl'],
    data(){
      return {
          myExcelPreviewer: null
      }
    },
    mounted(){
        this.myExcelPreviewer = jsPreviewExcel.init(document.getElementById('excel'));
        this.myExcelPreviewer .preview(this.fileUrl).then(()=>{
            console.log('预览完成');
        }).catch(e=>{
            console.log('预览失败', e);
        })
    },
    beforeDestroy() {
        this.myExcelPreviewer.destroy();
    }
};
</script>

<style scoped>

</style>

三、pptx预览

1、pptxjs插件下载https://github.com/meshesha/PPTXjs/releases

2、插件压缩包解压，放在项目静态资源目录下。

3、index.html中进行引用。

html 复制代码

<link rel="stylesheet" href="<%= BASE_URL %>/PPTXjs/css/pptxjs.css" rel="external nofollow" />
		<link rel="stylesheet" href="<%= BASE_URL %>/PPTXjs/css/nv.d3.min.css" rel="external nofollow" />
		<!-- for charts graphs -->
		<script type="text/javascript" src="<%= BASE_URL %>/PPTXjs/js/jquery-1.11.3.min.js"></script>
		<script type="text/javascript" src="<%= BASE_URL %>/PPTXjs/js/jszip.min.js"></script>
		<!-- v2.. , NOT v.3.. -->
		<script type="text/javascript" src="<%= BASE_URL %>/PPTXjs/js/filereader.js"></script>
		<!--https://github.com/meshesha/filereader.js -->
		<script type="text/javascript" src="<%= BASE_URL %>/PPTXjs/js/d3.min.js"></script>
		<!-- for charts graphs -->
		<script type="text/javascript" src="<%= BASE_URL %>/PPTXjs/js/nv.d3.min.js"></script>
		<!-- for charts graphs -->
		<script type="text/javascript" src="<%= BASE_URL %>/PPTXjs/js/pptxjs.js"></script>
		<script type="text/javascript" src="<%= BASE_URL %>/PPTXjs/js/divs2slides.js"></script>
		<!-- for slide show -->

4、代码中使用

html 复制代码

<div id="pptx"></div>


 mounted() {
        $("#pptx").pptxToHtml({
            pptxFileUrl: "http://127.0.0.1:5500/test.ppt", //pptx文件地址
            slidesScale: "100%",
            slideMode: false,
            keyBoardShortCut: false
        });
    }