pdf预览兼容问题- chrome浏览器105及一下预览不了

使用的"@tato30/vue-pdf": "^1.11.2"预览插件，发现chrome浏览器105及一下预览不了

pdfPreview预览组件：

html 复制代码

<template>
  <div id="vue_pdf_view">
    <div class="tool_tip">
      <template v-if="pages > 0 && props.previewMode === 'pagination'">
        <button @click="page = page > 1 ? page - 1 : page">上一页</button>
        <span>{{ page }} / {{ pages }}</span>
        <button @click="page = page < pages ? page + 1 : page">下一页</button>
      </template>
      <button @click="handleWord" v-if="fetchWordApi && uniEventId">
        下载word
      </button>
      <button @click="handlePdf" v-if="src && uniEventId">下载PDF</button>
    </div>
    <template v-if="!props.loading && props.previewMode === 'scroll'">
      <div v-for="page in pages" :key="page" class="page">
        <VuePDF :pdf="pdf" :page="page" :scale="scale" />
      </div>
    </template>
    <template v-else-if="!props.loading && props.previewMode === 'pagination'">
      <VuePDF :pdf="pdf" :page="page" />
    </template>
    <template v-else>
      <Spin style="padding-top: 50px"></Spin>
    </template>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { VuePDF, usePDF } from '@tato30/vue-pdf';
import { Spin } from 'ant-design-vue';
import { saveAs } from 'file-saver';

const props = defineProps({
  src: {
    type: String,
  },
  fetchWordApi: {
    type: Function,
  },
  uniEventId: {
    type: String,
  },
  previewMode: {
    // 'pagination','scroll'
    type: String,
    default: 'scroll',
  },
  loading: {
    type: Boolean,
    default: false,
  },
});

const page = ref(1);
const testSrc =
  'https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf';
const { src, fetchWordApi, uniEventId } = props;
const { pdf, pages } = usePDF(src);
const scale = ref(1.5);
const handleWord = () => {
  fetchWordApi &&
    fetchWordApi('docx', { uniEventId }, true).then((res) => {
      const blob = new Blob([res], { type: 'application/msword' });
      saveAs(blob, uniEventId + '.docx');
    });
};

const handlePdf = () => {
  if (!src || !uniEventId) return;
  saveAs(src, uniEventId + '.pdf');
};
</script>

<style lang="scss">
#vue_pdf_view {
  min-height: 1000px;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  &:hover {
    .tool_tip {
      opacity: 1;
    }
  }
  .tool_tip {
    opacity: 0;
    position: sticky;
    top: 40px;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
    padding: 4px 0;
    border-radius: 4px;
    width: fit-content;
    button {
      padding: 0 10px;
      &:hover {
        color: #555;
      }
    }
  }
  .page {
    padding-bottom: 10px;
  }
}
</style>

使用：

html 复制代码

<pdfPreview
        :loading="loading"
        :key="loading"
        :src="iframeUrl"
        previewMode="scroll"
      ></pdfPreview>

解决：直接使用iframe的src嵌套pdf即可解决兼容问题

html 复制代码

      <iframe
        :src="`${iframeUrl}#toolbar=0`"
        width="100%"
        height="800px"
        frameBorder="0"
        scrolling="no"
        v-if="loading"
      ></iframe>