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');
    },