图片预览:使用Blob创建一个指向类型化数组的URL
PDF预览:1借助PDF.JS实现 2.embed与iframe标签实现
World预览:先Wolrd转PDF,再借助PDF.JS实现
pdf.js是 一个通用的、基于web标准的解析和渲染PDF的平台。
官网:https://mozilla.github.io/pdf.js/
<template>
<div>
<a-modal :visible="previewShow" :width="1050"
:closable="true"
:footer="null"
@cancel="() =>{previewShow = false}">
<a-spin :spinning="previewLoading" :delay="100">
<template v-if="imageOrdocument">
<img style="width: 100%" :src="previewUrl"/>
</template>
<template v-else>
<a-spin style="margin-top: 24px" :spinning="false">
<iframe :src="document" scrolling="no" style="width: 100%;min-height: 700px;" frameborder="0">
</iframe>
</a-spin>
</template>
</a-spin>
</a-modal>
</div>
</template>
<script>
export default {
name: "FilePreview",
data() {
return {
previewShow: false,
previewLoading: false,
previewUrl: "",
imageType: ['jpg', 'png'],
documentType: ['pdf'],
imageOrdocument: true,
document: ''
}
},
methods: {
filePreview(id, fileSuffix) {
this.previewShow = true;
if (this.imageType.includes(fileSuffix.toLowerCase()) || this.imageType.includes(fileSuffix.toUpperCase())) {
this.previewLoading = true;
this.axios.get(this.$Api.document.fastdfs.downloadFile + "/" + id, {responseType: 'blob'}).then((jo) => {
if (!jo) {
return
}
let imgData = new Blob([jo.data], {type: "image/jpeg"});
this.previewUrl = URL.createObjectURL(imgData);
this.imageOrdocument = true;
this.previewLoading = false;
});
} else if (this.documentType.includes(fileSuffix.toLowerCase()) || this.documentType.includes(fileSuffix.toUpperCase())) {
this.imageOrdocument = false;
this.document = "public/pdf/web/viewer.html?file=" + this.$Api.BaseUrl + this.$Api.document.fastdfs.downloadFile + "/" + id;
} else {
this.$message.error("不支持预览")
}
}
}
}
</script>
<style scoped>
</style>
和
都是HTML中用于嵌入其他文档或媒体文件的标签。它们的主要区别在于嵌入内容的类型和使用情况
注意:
如果浏览器没有已安装的PDF插件,则无法在浏览器中预览PDF文件,并且浏览器将自动下载PDF文件。非主流浏览器可能无法支持,如:IE浏览器
标记允许将其他类型的内容嵌入到HTML文档中,例如音频、视频、Flash等。它是非标准的HTML元素,但被所有
主流
的浏览器所支持。
<embed src="file.ext" type="mime/type" />
<template>
<div>
<a-spin tip="加载中..." :spinning="loading">
<embed
type="application/pdf" width="800" height="600"
:src="this.$Api.BaseUrl+this.$Api.document.previewFile+'/224794'"/>
</a-spin>
</div>
</template>
标记允许在HTML文档内嵌入另一个HTML文档或嵌入另一种媒体资源(如PDF文档)。它允许你在一个网页中显示另一个网页,也可以用来实现类似于对话框的效果。
<iframe src="file.html"></iframe>
<template>
<div>
<a-spin tip="加载中..." :spinning="loading">
<iframe width="800" height="600" :src="this.$Api.BaseUrl+this.$Api.document.previewFile+'/224794'"/>
</a-spin>
</div>
</template>
注意:使用标签,实则其内部也是使用
标签
也可以直接请求PDF文件地址,或添加一个点击事件跳转,若浏览器支持则自动进行预览
<template>
<div>
<a-spin tip="加载中..." :spinning="loading">
<a @click="preview">PDF预览</a>
</a-spin>
</div>
</template>
preview(){
window.open('url');
},