<template>
|
<div>
|
<div v-if="isImage">
|
<img :src="fileUrl" alt="Image Preview" />
|
</div>
|
<div v-if="isPdf">
|
<object :data="fileUrl" type="application/pdf" width="100%" height="600px">
|
<p>您的浏览器不支持 PDF 预览。<a :href="fileUrl">下载 PDF 文件</a></p>
|
</object>
|
</div>
|
<div v-if="isDoc">
|
<p v-if="!isDocShow">文档无法直接预览，请下载查看。</p>
|
<a :href="fileUrl" v-if="!isDocShow">下载文件</a>
|
<vue-office-docx
|
:src="fileUrl"
|
style="height: 100vh;"
|
@rendered="renderedHandler"
|
@error="errorHandler"
|
/>
|
</div>
|
<div v-if="isXls">
|
<p v-if="!isDocShow">文档无法直接预览，请下载查看。</p>
|
<a :href="fileUrl" v-if="!isDocShow">下载文件</a>
|
<vue-office-excel
|
:src="fileUrl"
|
:options="options"
|
style="height: 100vh;"
|
@rendered="renderedHandler"
|
@error="errorHandler"
|
/>
|
</div>
|
<div v-if="isZipOrRar">
|
<p>压缩文件无法直接预览，请下载查看。</p>
|
<a :href="fileUrl">下载文件</a>
|
</div>
|
<div v-if="isCsv">
|
<p>CSV 文件无法直接预览，请下载查看。</p>
|
<a :href="fileUrl">下载文件</a>
|
<div id="teacherPaperAnswer"></div>
|
</div>
|
<div v-if="!isSupported">
|
<p>不支持的文件格式</p>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import VueOfficeDocx from '@vue-office/docx'
|
//引入相关样式
|
import '@vue-office/docx/lib/index.css'
|
import VueOfficeExcel from '@vue-office/excel'
|
//引入相关样式
|
import '@vue-office/excel/lib/index.css'
|
import Papa from 'papaparse';
|
import jschardet from 'jschardet'
|
export default {
|
components: {
|
VueOfficeDocx,
|
VueOfficeExcel,
|
},
|
props: {
|
fileUrl: {
|
type: String,
|
required: true
|
},
|
currentFile: {
|
type: Object,
|
required: true
|
},
|
},
|
data(){
|
return {
|
isDocShow:true,
|
options:{
|
xls: false, //预览xlsx文件设为false；预览xls文件设为true
|
minColLength: 0, // excel最少渲染多少列，如果想实现xlsx文件内容有几列，就渲染几列，可以将此值设置为0.
|
minRowLength: 0, // excel最少渲染多少行，如果想实现根据xlsx实际函数渲染，可以将此值设置为0.
|
widthOffset: 10, //如果渲染出来的结果感觉单元格宽度不够，可以在默认渲染的列表宽度上再加 Npx宽
|
heightOffset: 10, //在默认渲染的列表高度上再加 Npx高
|
beforeTransformData: (workbookData) => {return workbookData}, //底层通过exceljs获取excel文件内容，通过该钩子函数，可以对获取的excel文件内容进行修改，比如某个单元格的数据显示不正确，可以在此自行修改每个单元格的value值。
|
transformData: (workbookData) => {return workbookData}, //将获取到的excel数据进行处理之后且渲染到页面之前，可通过transformData对即将渲染的数据及样式进行修改，此时每个单元格的text值就是即将渲染到页面上的内容
|
},
|
}
|
},
|
computed: {
|
isImage() {
|
return /\.(jpg|jpeg|png|gif)$/i.test(this.fileUrl);
|
},
|
isPdf() {
|
return /\.pdf$/i.test(this.fileUrl);
|
},
|
isDoc() {
|
return /\.(doc|docx)$/i.test(this.fileUrl);
|
},
|
isXls(){
|
return /\.(xls|xlsx)$/i.test(this.fileUrl);
|
},
|
isZipOrRar() {
|
return /\.(zip|rar)$/i.test(this.fileUrl);
|
},
|
isCsv() {
|
let state = /\.csv$/i.test(this.fileUrl)
|
if(state){
|
this.loadCSVData();
|
// this.main()
|
}
|
return state;
|
},
|
isSupported() {
|
return this.isImage || this.isPdf || this.isDoc || this.isZipOrRar || this.isCsv||this.isXls;
|
}
|
},
|
methods:{
|
renderedHandler() {
|
console.log("渲染完成")
|
this.isDocShow = true
|
},
|
errorHandler() {
|
console.log("渲染失败")
|
this.isDocShow = false
|
},
|
async loadCSVData() {
|
this.$axios.post(this.$api.insOrderPlan.preview, {
|
id: this.currentFile.id,
|
}).then( res => {
|
console.log(res.data)
|
}).catch( err => {
|
console.log(err)
|
})
|
},
|
async main(){
|
//渲染表格
|
this.paintingTable(criteriaAnswer,"teacherPaperAnswer"); //用id定位渲染目标
|
},
|
paintingTable(File, location) {
|
$("#" + location + "").empty();
|
let table = '<table class="table table-bordered" style="zoom:0.8";>';
|
for (let j = 0; j < File.length; j++) {
|
if (j == 0) {
|
table += '<thead><tr style="white-space: nowrap;"><th scope="col">#</th>';
|
for (let k in File[j]) {
|
table += '<th scope="col">' + k + '</th>';
|
}
|
table += '</tr></thead><tbody style="white-space: pre;">';
|
}
|
table += '<tr><th scope="row" style="vertical-align: middle;">' + Number(j + 1) + '</th>';
|
for (let k in File[j]) {
|
table += '<td style="vertical-align: middle; padding:0 20px; border: inset;background:#FFFFFF;"><div style="text-align:left;">' + File[j][k] + '</div></td>';
|
}
|
table += '</tr>';
|
}
|
table += '</tbody>';
|
$("#" + location + "").append(table);
|
},
|
}
|
}
|
</script>
|
|
<style scoped>
|
img {
|
max-width: 100%;
|
}
|
</style>
|
