一、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>
<span
title="下载文档"
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文档 -->
<div
v-if="showWord"
class="showCourseWareContent"
ref="wordContainer"></div>
<!-- PDF文档 -->
<div
v-else-if="showPDF"
class="showCourseWareContent"
id="pdfContainer"></div>
<!-- PPTX文档 -->
<div
v-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, // word
showPDF: false, // pdf
showPPT: false, // pptx
showDocument: false, // 文档
showVideo: false, // 视频
videoSrc: "", // 视频地址
rowData: {},
};
},
computed: {},
created() {},
mounted() {},
methods: {
// 根据ID获取文件
getDocument() {
this.$API.getDocumentRequest(this.rowData.id).then((res) => {
if (
// DOCX
res.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") {
// PDF
this.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 (
// PPTX
res.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; // word
this.showPDF = false; // pdf
this.showPPT = false; // pptx
this.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>
