Vue2实现docx,xlsx,pptx预览

一、docx预览

1、安装插件

npm i @js-preview/docx

2、代码中使用

<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、代码中使用

<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中进行引用。

<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、代码中使用

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