Vue前端JavaScript实现PDF预览与图片预览
说明
图片预览：使用Blob创建一个指向类型化数组的URL
PDF预览：1借助PDF.JS实现 2.embed与iframe标签实现
World预览：先Wolrd转PDF，再借助PDF.JS实现
PDF.JS
pdf.js是 一个通用的、基于web标准的解析和渲染PDF的平台。
官网:https://mozilla.github.io/pdf.js/
下载后，压缩包内目录结构
将其拷贝至Vue项目中
代码实现
<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>
预览测试
embed与iframe标签
<embed>和<iframe>都是HTML中用于嵌入其他文档或媒体文件的标签。它们的主要区别在于嵌入内容的类型和使用情况
注意：
如果浏览器没有已安装的PDF插件，则无法在浏览器中预览PDF文件，并且浏览器将自动下载PDF文件。非主流浏览器可能无法支持，如：IE浏览器
<embed>
<embed>标记允许将其他类型的内容嵌入到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>
<iframe>
<iframe>标记允许在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>
注意：使用<iframe>标签，实则其内部也是使用<embed> 标签
浏览器预览
也可以直接请求PDF文件地址,或添加一个点击事件跳转，若浏览器支持则自动进行预览
<template>
<div>
<a-spin tip="加载中..." :spinning="loading">
<a @click="preview">PDF预览</a>
</a-spin>
</div>
</template>
preview(){
window.open('url');
},
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/136989.html
