首先先要安装对应的预览插件
npm install docx-preview
npm install xlsx
npm install vue-pdf
<template>
<div class="preview-container" v-loading="loading">
<div ref="docx" v-if="fileType == 'docx'"></div>
<div v-else-if="fileType == 'pdf'">
<pdf v-for="p in pdfInfo.pageCount" :key="p" :src="pdfInfo.src" :page="p"
style="display: inline-block; width: 100%"></pdf>
</div>
<div v-else-if="fileType == 'xlsx'">
<el-button-group>
<el-button size="mini" type="primary" v-for="(item, index) in workbook.SheetNames" @click="getTable(item)"
:key="index">{{ item }}</el-button>
</el-button-group>
<el-table :data="excelData" size="mini" :stripe="false" :border="true" :fit="false">
<el-table-column v-for="(value, key, index) in excelData[2]" :key="index" :prop="key"
:label="key"></el-table-column>
</el-table>
</div>
</div>
</template>
<script>
import axios from 'axios';
import pdf from 'vue-pdf';
// import { mapGetters } from 'vuex'
import * as XLSX from 'xlsx';
import { pptToPdf } from '@/api/chapter/info';
const docx = require('docx-preview');
/**
* @description 根据文件名获取文件后缀
* @param {String} path 文件路径
*/
function getFileType(path) {
if (!path) return '';
else {
path = path.toLocaleLowerCase();
let index = path.lastIndexOf('.');
if (index == -1) return ''; // 未知类型
return path.substring(index + 1);
}
}
export default {
data() {
return {
fileType: '',
pdfInfo: {
pageCount: 1,
page: 1,
src: ''
},
excelData: [],
workbook: {},
loading: false
}
},
props: {
previewFileInfo: {
default: {}
}
},
components: {
pdf
},
created() {
let fileType = getFileType(this.previewFileInfo.url)
this.fileType = fileType
switch (fileType) {
case 'docx':
this.readExcelFromRemoteFile(this.previewFileInfo.url)
break;
case 'pdf':
this.loadPdf(this.previewFileInfo.url)
break;
case 'xlsx':
this.loadExcel(this.previewFileInfo.url)
break;
default:
break;
}
},
methods: {
// 渲染word文档
readExcelFromRemoteFile(url) {
var vm = this;
this.loading = true;
axios({
method: 'get',
url: url,
responseType: 'blob',
})
.then(response => {
vm.loading = false;
docx
.renderAsync(response.data, vm.$refs.docx)
.then(x => console.log('加载文档完毕'))
.catch(err => {
vm.$message.error('加载文档失败,' + err.toString());
});
})
.catch(err => {
this.loading = false;
});
},
// 渲染pdf
loadPdf(url) {
this.loading = true;
this.$set(this.pdfInfo, 'src', pdf.createLoadingTask(url));
this.pdfInfo.src.promise
.then(pdf => {
this.$set(this.pdfInfo, 'pageCount', pdf.numPages);
this.loading = false;
})
.catch(err => {
this.$message.error('加载PDF文件失败。' + err.toString());
this.loading = false;
});
},
// 渲染xslx文件
loadExcel(url) {
this.loading = true;
axios({
method: 'get',
url: url,
responseType: 'arraybuffer'
})
.then(res => {
var data = new Uint8Array(res.data)
this.workbook = XLSX.read(data, { type: 'array' });
this.getTable(this.workbook.SheetNames[0]);
})
.catch(err => {
this.loading = false;
this.$message.error('加载文档失败,' + err.toString());
});
},
// 加载表格数据
getTable(sheetName) {
var worksheet = this.workbook.Sheets[sheetName];
this.excelData = XLSX.utils.sheet_to_json(worksheet);
this.loading = false;
},
}
}
</script>