antd前端页面实现浏览器中PDF文件预览（不使用第三方插件 ）

默认情况下在浏览器里面输入pdf文件路径（网址）会下载，现在项目里面需要实现pd文件在浏览中预览和打印的功能，研究了半天终于实现了不使用插件使用浏览器自带的PDF预览功能进行PDF文件预览

以下代码是一个ant组件页面的代码，组件功能，实现不同的文件类型显示不同的文件图片，并且实现下载和预览的功能

其中文件的图标是在前面项目的静态图片

 

<template>
  <a-image class="cImg" v-if="isImage(itemdata.fileName)" :src="itemdata.url" />
  <img v-else-if="isDocument(itemdata.fileName)" src="@/assets/images/document.png" :alt="itemdata.fileName" />
  <img v-else-if="isRar(itemdata.fileName)" src="@/assets/images/rar.png" :alt="itemdata.fileName" />
  <img v-else-if="isMedia(itemdata.fileName)" src="@/assets/images/media.png" :alt="itemdata.fileName" />
  <img v-else src="@/assets/images/other.png" :alt="itemdata.fileName" />
  <a-button style="margin-top: 20px; margin-right: 10px" type="link" @click="download(itemdata)">下载</a-button>
  <a-button
    style="margin-top: 20px"
    v-if="isDocument(itemdata.fileName) || isPDF(itemdata.fileName)"
    type="primary"
    @click="previewFile(itemdata)"
    >预览</a-button
  >
</template>

<script setup name="attachview">
  import { defineProps, toRef, defineExpose, ref, nextTick } from 'vue'
  import axios from 'axios'
  const pageCount = ref(0)
  const props = defineProps({
    itemdata: {
      type: Object,
      default: () => {},
      required: true
    }
  })
  const imageExtensions = /\.(jpg|jpeg|png|gif|bmp|webp)$/i
  const documentExtensions = /\.(doc|docx|ppt|pptx|xls|xlsx)$/i
  const rarExtensions = /\.(rar|zip|7z|tar|iso|gzip)$/i
  const mediaExtensions = /\.(mp3|mp4|wmv|aiv|mov|flv|mkv)$/i
  const isImage = (filename) => {
    if (!filename) return false
    return imageExtensions.test(filename.toLowerCase())
  }
  const isDocument = (filename) => {
    if (!filename) return false
    return documentExtensions.test(filename.toLowerCase())
  }
  const isRar = (filename) => {
    if (!filename) return false
    return rarExtensions.test(filename.toLowerCase())
  }
  const isMedia = (filename) => {
    if (!filename) return false
    return mediaExtensions.test(filename.toLowerCase())
  }
  const previewFile = (pdfdata) => {
    axios
      .get(pdfdata.url, {
        responseType: 'arraybuffer',
        headers: {
          'Content-Disposition': 'inline;filename=' + encodeURIComponent(pdfdata.fileName)
        }
      })
      .then((response) => {
        console.log(response.status) // 输出状态码
        console.log(response.headers) // 输出响应头信息
        var contype = response.headers['content-type']
        const blob = new Blob([response.data], { type: contype }) // 文件的content-type在后端接口中返回
        const url = window.URL.createObjectURL(blob)  // 以预览模式在浏览器中打开文件
        window.open(url, pdfdata.fileName)
      })
  }
  const download = (data) => {
    window.open(data.url) // 打开文件的下载链接
  }
  // 类型判断
  const isPDF = (filename) => /\.pdf$/i.test(filename)
</script>

<style scoped></style>