一、word预览–mammoth.js
安装:npm install --save mammoth
tip:只能预览.docx文件
word.vue:
<template>
<div>
<div id="wordView" v-html="vHtml" />
</div>
</template>
<script>
import mammoth from "mammoth";
export default {
name: "word",
data() {
return {
vHtml: "",
wordURL:''//文件地址
};
},
created() {
let vm=this;
vm.wordURL = this.$route.query.wordURL;
const xhr = new XMLHttpRequest();
xhr.open("get", this.wordURL, true);
xhr.responseType = "arraybuffer";
xhr.onload = function () {
if (xhr.status == 200) {
mammoth
.convertToHtml({ arrayBuffer: new Uint8Array(xhr.response) })
.then(function (resultObject) {
vm.$nextTick(() => {
// document.querySelector("#wordView").innerHTML =
// resultObject.value;
vm.vHtml=resultObject.value;
});
});
}
};
xhr.send();
},
methods: {
},
};
</script>
跳转带的参数:
if (row.fileType == 3) {
//word
let routeData = this.$router.resolve({
path: "/word",
query: {
wordURL: response.data,
},
});
window.open(routeData.href, "_blank");
} else if (row.fileType == 5) {
//pdf
window.open(response.data);
} else if (row.fileType == 4) {
//excel
let routeData = this.$router.resolve({
path: "/excel",
query: {
excelURL: response.data,
},
});
window.open(routeData.href, "_blank");
}
二、excel预览–sheetjs
安装:npm install --save xlsx
1.
三、pdf预览——vue-pdf
安装:npm install --save vue-pdf