vue 实现文件预览(支持pdf,xls、xlsx,doc、docx,jpg、jepg、png)
·
<avue-crud ref="crud" :option="fileOption" :data="dataCRUD" :page.sync="page" :search.sync="search" @current-change="currentChange" @size-change="sizeChange"
@search-reset="searchReset" @search-change="searchChange">
<!-- 预览 -->
<template slot-scope="scope" slot="name">
<el-link type="primary" @click="preview(scope.row)" :underline="false">{{scope.row.name}}</el-link>
</template>
</avue-crud>
预览的部分展示在dialog中,根据点击的文件类型进行判断展示
export default {
data() {
return {
excelURL: "", //文件地址,看你对应怎末获取、赋值
fileType:'',//文件类型区分预览
currentManages:[],//编辑时接口数据
dialog: {
dialogVisible: false,
src: '',
isPdf: false,
isExcel: false,
isWord: false,
isPicture:false
},
maxExcelData:[],
maxIndex:'',
};
},
其中pdf和docx文件使用的插件详情:https://github.com/501351981/vue-office
<!-- 预览 -->
<el-dialog :title="previewTitle" :visible.sync="dialog.dialogVisible">
<div v-if="dialog.isPdf">
<vue-office-pdf
:src="previewUrl"
@rendered="renderedHandler"
@error="errorHandler"
/>
</div>
<div v-else-if="dialog.isWord">
<vue-office-docx
:src="previewUrl"
style="height: 100vh;"
@rendered="renderedHandler"
@error="errorHandler"
/>
</div>
<div v-else-if="dialog.isExcel">
<div id="table" >
<el-table :data="excelData" border stripe
:header-cell-style="{'background':'#F5F4F7'}">
<el-table-column
type="index"
label="序号"
width="60"
:resizable="false"
align="center" />
<el-table-column
v-for="(value, key, index) in excelData[maxIndex]"
:key="index"
:prop="key"
:label="key"></el-table-column>
</el-table>
</div>
</div>
<div v-else-if="dialog.isPicture">
<div v-viewer>
<img :src="previewUrl" :toolbar="false" width="900px"/>
</div>
</div>
</el-dialog>
后面发现Excel 中sheet不能显示正确,所以找了另一个预览Excel插件,详见:vue在线预览word、excel、pdf、txt、图片的方法实例_vue.js_脚本之家
其中Excel在展示的时候会显示不全,需要取数组对象索引的长度最长的作为赋值对象
// 预览
preview(row){
if (!(row.url.includes('.png') || row.url.includes('.jpg') || row.url.includes('.jpeg') || row.url.includes('.JPG') || row.url.includes('.PNG') || row.url.includes('.JPEG') || row.url.includes('.pdf') || row.url.includes('.xlsx') || row.url.includes('.xls') || row.url.includes('.doc'))) {
this.$message.error('文件类型不支持预览')
return false
}
if (row.url.includes('.pdf')) {
this.dialog.isPdf = true
this.dialog.isExcel = false
this.dialog.isWord = false
this.dialog.isPicture = false
this.dialog.src = ''
this.iframeLoading = true
this.previewTitle = row.name
// this.previewUrl = this.pdf
this.previewUrl = row.url
} else if (row.url.includes('.xls')){
this.dialog.isPdf = false
this.dialog.isExcel = true
this.dialog.isWord = false
this.dialog.isPicture = false
this.previewTitle = '预览'
// row.url=this.xlsx
this.readWorkbookFromRemoteFile(row.url)
}else if (row.url.includes('.doc')||row.url.includes('.docx')){
this.dialog.isPdf = false
this.dialog.isExcel = false
this.dialog.isWord = true
this.dialog.isPicture = false
this.previewTitle = row.name
// this.previewUrl = this.docx
this.previewUrl = row.url
}else if (row.url.includes('.jpg')||row.url.includes('.JPG')||row.url.includes('.jpeg')||row.url.includes('.png')){
this.dialog.isPdf = false
this.dialog.isExcel = false
this.dialog.isWord = false
this.dialog.isPicture = true
this.previewTitle = row.name
this.previewUrl = row.url
}
this.dialog.dialogVisible = true
},
readWorkbookFromRemoteFile (url) {
var xhr = new XMLHttpRequest();
xhr.open("get", url, true);
xhr.responseType = "arraybuffer";
let _this = this;
xhr.onload = function (e) {
if (xhr.status === 200) {
var data = new Uint8Array(xhr.response);
var workbook = XLSX.read(data, { type: "array" });
console.log("workbook", workbook);
var sheetNames = workbook.SheetNames; // 工作表名称集合
_this.workbook = workbook;
_this.getTable(sheetNames[0]);
}
};
xhr.send();
},
getTable(sheetName) {
console.log(sheetName);
var worksheet = this.workbook.Sheets[sheetName];
this.excelData = XLSX.utils.sheet_to_json(worksheet);
//取数组对象中,对象的key最长的一个进行赋值操作
let arr = []
let obj ={}
arr.push(obj)
let mapObj = new Map()
let size = 0
for(let i= 0;i<this.excelData.length;i++){
let arrLength = 0
for(let key in this.excelData[i] ){
arrLength++
}
mapObj.set(i,arrLength)
// console.log(mapObj)
}
let contrastNum = 0
this.maxIndex = 0
mapObj.forEach((value, key, self) => {
// console.log(key,'=>', value)
if(value>contrastNum){
contrastNum = value
this.maxIndex = key
}
});
console.log(this.maxIndex,contrastNum,'999')
},
更多推荐
已为社区贡献4条内容
所有评论(0)