Vue2搭建docx,xlsx,pptx预览

一、docx预览

1、安装插件

npm i @js-preview/docx

2、代码中使用

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();
}
};

二、xlsx预览

1、安装插件

npm i @js-preview/excel

2、代码中使用

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();
}
};

三、pptx预览

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

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

3、index.html中进行引用。

/PPTXjs/css/pptxjs.css" rel="external nofollow" />
/PPTXjs/css/nv.d3.min.css" rel="external nofollow" />
/PPTXjs/js/jquery-1.11.3.min.js">
/PPTXjs/js/jszip.min.js">
/PPTXjs/js/filereader.js">
/PPTXjs/js/d3.min.js">
/PPTXjs/js/nv.d3.min.js">
/PPTXjs/js/pptxjs.js">
/PPTXjs/js/divs2slides.js">

4、代码中使用

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