一、docx文档
软件：docx-preview；
版本："^0.1.20"；
1、安装docx-preview
npm i docx-preview@0.1.202、组件配置
<template><div ref="wordContainer"></div>
</template><script>
import { renderAsync } from "docx-preview";
export default {data(){return {id:""}},methods:{getDocument(){this.$API.getDocumentRequest(this.id).then(res=>{this.$nextTick(() => {renderAsync(res, this.$refs.wordContainer, null);});})}}
}
</script>
二、pdf文档
软件：pdfjs-dist；
版本："^2.0.943"；
1、安装pdfjs-dist
npm i pdfjs-dist@2.0.9432、组件配置
<template><div ref="pdfContainer"></div>
</template><script>
import pdfjsLib from "pdfjs-dist";
export default {data(){return {id:""}},methods:{getDocument(){this.$API.getDocumentRequest(this.id).then(res=>{this.$nextTick(() => {pdfjsLib.getDocument(window.URL.createObjectURL(res)).promise.then((pdf) =>{return pdf;}).then((pdf) => {let pdfContainer = document.getElementById("pdfContainer");for (let i = 1; i <= pdf.numPages; i++) {pdf.getPage(i).then((page) => {let viewport = page.getViewport(3);let canvas = document.createElement("canvas");pdfContainer.appendChild(canvas);let context = canvas.getContext("2d");canvas.height = viewport.height;canvas.width = viewport.width;let renderContext = {canvasContext: context,viewport: viewport,};page.render(renderContext);});}});});})}}
}
</script>
三、pptx文档
软件：PPTXjs；
版本：1.21.1；
地址：发布 ·meshesha/PPTXjs (github.com)
说明：1.21.1版本中的jszip.min.js为3.0版本，如果控制台有jszip.min.js相关报错，可以使用1.21.00版本中的jszip.min.js文件（仅替换jszip.min.js文件即可）。或者直接使用PPTXjs旧版本。
1、index.html配置
<!---------- PPTXjs ----------><!-- css --><link rel="stylesheet" href="/PPTXjs/css/pptxjs.css" /><link rel="stylesheet" href="/PPTXjs/css/nv.d3.min.css" /><!-- 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><!---------- PPTXjs ---------->2、组件配置
<template><div ref="pptContainer"></div>
</template><script>
export default {data(){return {id:""}},methods:{getDocument(){this.$API.getDocumentRequest(id).then(res=>{this.$nextTick(() => {$("#pptContainer").pptxToHtml({pptxFileUrl: window.URL.createObjectURL(res),slidesScale: "100%",slideMode: false,keyBoardShortCut: false,});})}}
}
</script>
四、视频预览
1、组件配置
<template><div><video controls :src="videoSrc"></video></div>
</template><script>
export default {data(){return {id:"",videoSrc:"", }},methods:{getVideo() {this.$API.getVideoRequest(this.id).then((res) => {this.$nextTick(() => {this.videoSrc = URL.createObjectURL(res);});})},}
}</script>
五、文档下载
软件：downloadjs
版本："1.4.7"；
1、安装
npm i downloadjs@1.4.72、组件配置
<template><div><el-button type="primary" @click="downloadDocument">下载文件</video></div>
</template>
<script>
import download from "downloadjs";
export default {data(){return {id:"",}}methods:{downloadDocument() {this.$API.getDocumentRequest(this.id).then((res) => {if (res) {download(res, "下载的文件名");}}).catch((error) => {console.log(error);});},}
}
</script>六、示例
<template><div v-if="show" class="showCourseWare"><div class="showCourseWareHeader"><span class="title">{{ "文件预览页面标题" }}</span><spantitle="下载文档"class="el-icon-download"@click="downloadDocument"></span><span title="关闭预览" class="el-icon-close" @click="closeWin"></span></div><div class="showCourseWareContainer"><div class="showCourseWareBox" v-if="showDocument"><!-- DOCX文档 --><divv-if="showWord"class="showCourseWareContent"ref="wordContainer"></div><!-- PDF文档 --><divv-else-if="showPDF"class="showCourseWareContent"id="pdfContainer"></div><!-- PPTX文档 --><divv-else-if="showPPT"class="showCourseWareContent"ref="pptContainer"id="pptContainer"></div></div><div class="showVideoBox" v-if="showVideo"><video controls :src="videoSrc"></video></div></div></div>
</template><script>
// docx文件预览
import { renderAsync } from "docx-preview";
// pdf文件预览
import pdfjsLib from "pdfjs-dist";
// 文件下载
import download from "downloadjs";export default {name: "",components: {},props: {selectCourseWare: {type: Object,default: () => {return {};},},},data() {return {show: false,showWord: false, // wordshowPDF: false, // pdfshowPPT: false, // pptxshowDocument: false, // 文档showVideo: false, // 视频videoSrc: "", // 视频地址rowData: {},};},computed: {},created() {},mounted() {},methods: {// 根据ID获取文件getDocument() {this.$API.getDocumentRequest(this.rowData.id).then((res) => {if (// DOCXres.type == "application/msword" ||res.type =="application/vnd.openxmlformats-officedocument.wordprocessingml.document") {this.showWord = true;this.showPDF = false;this.showPPT = false;this.showVideo = false;// 渲染文档this.$nextTick(() => {renderAsync(res, this.$refs.wordContainer, null);});} else if (res.type == "application/pdf") {// PDFthis.showWord = false;this.showPDF = true;this.showPPT = false;this.showVideo = false;// 渲染文档this.$nextTick(() => {pdfjsLib.getDocument(window.URL.createObjectURL(res)).promise.then((pdf) => {return pdf;}).then((pdf) => {let pdfContainer = document.getElementById("pdfContainer");for (let i = 1; i <= pdf.numPages; i++) {pdf.getPage(i).then((page) => {let viewport = page.getViewport(3);let canvas = document.createElement("canvas");pdfContainer.appendChild(canvas);let context = canvas.getContext("2d");canvas.height = viewport.height;canvas.width = viewport.width;let renderContext = {canvasContext: context,viewport: viewport,};page.render(renderContext);});}});});} else if (// PPTXres.type == "application/vnd.ms-powerpoint" ||res.type =="application/vnd.openxmlformats-officedocument.presentationml.presentation") {this.showWord = false;this.showPDF = false;this.showPPT = true;this.showVideo = false;this.$nextTick(() => {$("#pptContainer").pptxToHtml({pptxFileUrl: window.URL.createObjectURL(res),slidesScale: "100%",slideMode: false,keyBoardShortCut: false,});});} else {this.showWord = false;this.showPDF = false;this.showPPT = false;this.showVideo = false;this.$message.warning("只支持.docx、pptx、pdf和视频文件预览，其他类型文件请下载后查看");}});},// 下载文档downloadDocument() {this.$API.getDocumentRequest(this.rowData.id).then((res) => {if (res) {download(res, this.rowData.coursewareUrl);}}).catch((error) => {console.log(error);this.$message.success("文件下载接口访问失败");});},// 根据ID获取视频文件getVideo() {this.$API.getVideoRequest(this.rowData.id).then((res) => {if (res) {this.$nextTick(() => {this.videoSrc = URL.createObjectURL(res);});} else {this.$message.error("视频获取失败");}}).catch((error) => {console.log(error);this.$message.error("视频获取接口访问失败");});},// 打开窗口openWin() {this.show = true;this.$nextTick(() => {this.rowData = JSON.parse(JSON.stringify(this.selectCourseWare));switch (this.rowData.type) {case 0: // 文件this.showDocument = true;this.getDocument();break;case 1: // 视频this.showVideo = true;this.getVideo();break;}});},// 关闭窗口closeWin() {this.show = false;this.rowData = {};this.showWord = false; // wordthis.showPDF = false; // pdfthis.showPPT = false; // pptxthis.showDocument = false; // 文档this.showVideo = false; // 视频this.videoSrc = ""; // 视频路径this.$emit("callback");},},
};
</script><style lang="less" scoped>
.showCourseWare {width: 100%;height: 100vh;position: fixed;top: 0px;left: 0px;background-color: rgba(0, 0, 0, 0.5);.showCourseWareHeader {width: 100%;height: 50px;background-color: #fff;box-shadow: 0 1px 5px -1px #039fee;z-index: 10000;position: relative;.el-icon-download {position: absolute;right: 50px;top: 50%;transform: translateY(-50%);font-size: 18px;color: #039fee;cursor: pointer;}.title {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}.el-icon-close {position: absolute;right: 20px;top: 50%;transform: translateY(-50%);font-size: 18px;cursor: pointer;&:hover {color: tomato;}}}.showCourseWareContainer {width: 100%;height: calc(100% - 50px);overflow-y: auto;.showCourseWareBox {width: 100%;margin: 10px 0px;display: flex;align-items: center !important;justify-content: center;.showCourseWareContent {width: 60%;// docx/deep/ .docx-wrapper {width: 100%;height: 100%;padding: 0px;box-sizing: border-box;background-color: transparent !important;.docx {width: 100% !important;height: 100%;margin-bottom: 10px;&:last-child {margin: 0px;}}}// pdf/deep/ canvas {width: 100% !important;margin-bottom: 10px;vertical-align: bottom;&:last-child {margin-bottom: 0px;}}}}.showVideoBox {width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;// 视频video {width: 60%;height: 70%;background: rgba(0, 0, 0, 0.9);}}}
}
</style>
