一、 word、excel文档预览
1）html
<!--按钮-->
<el-button icon="el-icon-view" label="查看" perms="view:file" :size="size" @click="handleView(scope.$index, scope.row)" />
<!--弹窗-->
<el-dialog title="查看文档" width="60%" :visible.sync="visible" :close-on-click-modal="false">
<div style="text-align: center">
<iframe v-if="docUrl" :src="docUrl" frameborder="0" width="100%" height="600px"></iframe>
</div>
<div slot="footer" class="dialog-footer">
<el-button :size="size" @click.native="visible = false">取消</el-button>
</div>
</el-dialog>
2）js （三种方式）
data() {
return {
size: 'small',
visible: false,
docUrl: '' // 文档地址
}
},
methods: {
handleView: function (index, row) {
this.docUrl = '';
// 判断文件扩展名 （docx包含doc，xlsx包含xls，所以只需要判断doc和xls即可）***以下为三种方式***
if (row.url.indexOf('doc') !== -1 || row.url.indexOf('xls') !== -1) {
// 1、微软的链接：文档地址得是公网的 （重复访问会有打不开的情况，原因不明。）
this.docUrl = 'https://view.officeapps.live.com/op/view.aspx?src=' + encodeURIComponent(row.url);
// 2、XDOC的链接：文档地址可以是非公网 文档地址为http时使用
this.docUrl = 'http://view.xdocin.com/xdoc?_xdoc=' + encodeURIComponent(row.url);
// 3、XDOC的链接：文档地址可以是非公网 文档地址为https时使用
this.docUrl = 'https://view.xdocin.com/xdoc?_xdoc=' + encodeURIComponent(row.url);
}
}
}
二、pdf文档预览
1）html
<!--按钮-->
<el-button icon="el-icon-view" label="查看" perms="view:file" :size="size" @click="handleView(scope.$index, scope.row)" />
<!--弹窗-->
<el-dialog title="查看文档" width="60%" :visible.sync="visible" :close-on-click-modal="false">
<div style="text-align: center">
<template v-if="pdfUrl">
<pdf v-for="item in pageTotal" :src="pdfUrl" :key="item" :page="item"></pdf>
</template>
</div>
<div slot="footer" class="dialog-footer">
<el-button :size="size" @click.native="visible = false">取消</el-button>
</div>
</el-dialog>
2）js
data() {
return {
size: 'small',
visible: false,
pageTotal: null,
pdfUrl: '' // 文档地址
}
},
methods: {
handleView: function (index, row) {
this.pdfUrl= '';
// 判断文件扩展名
if (row.url.indexOf('pdf') !== -1) {
// 多页pdf的src中不能直接使用后端获取的pdf地址 否则会按页数请求多次数据
// 需要使用下述方法的返回值作为url
this.pdfUrl = pdf.createLoadingTask(row.url)
// 获取页码
this.pdfUrl.promise.then(pdf => this.pageTotal = pdf.numPages).catch(error => {})
}
}
}
三、视频预览
1）html
<!--按钮-->
<el-button icon="el-icon-view" label="查看" perms="view:file" :size="size" @click="handleView(scope.$index, scope.row)" />
<!--弹窗-->
<el-dialog title="查看视频" width="60%" :visible.sync="visible" :close-on-click-modal="false">
<div style="text-align: center">
<video v-if="videoUrl" height="500" autoplay controls>
<source :src="videoUrl" type="video/mp4"/>
</video>
</div>
<div slot="footer" class="dialog-footer">
<el-button :size="size" @click.native="visible = false">取消</el-button>
</div>
</el-dialog>
2）js
data() {
return {
size: 'small',
visible: false,
videoUrl: '' // 视频地址
}
},
methods: {
handleView: function (index, row) {
this.videoUrl = '';
// 判断文件扩展名
if (row.url.indexOf('mp4') !== -1) {
this.videoUrl= row.url;
}
}
}
