vue3使用iframe全屏展示pdf效果

最近的一个功能是编写一个pdf展示的组件,外部传入pdf的链接,根据这个功能,可以使用iframe去展示pdf,目前主要是将预览pdf的样式调整成与屏幕宽高一样

1.pdf使用iframe

2.使用translate将这个组件,使用to属性将目标元素传到body中(to就是目标元素。 接收一个 to prop 来指定传送的目标。

3.显示,隐藏的动画效果可以使用transition组件对iframe进行包裹

具体代码如下:

javascript 复制代码
<template>
  <!-- 使用 teleport 将遮罩层和 iframe 渲染到 body 中 -->
  <teleport to="body">
    <!-- 遮罩层动画 -->
    <transition name="fade">
      <div v-if="showOverlay" class="overlay">
        <!-- 取消按钮 -->
        <button class="close-button" @click="closeOverlay">取消</button>
      </div>
    </transition>

    <!-- iframe 动画 -->
    <transition name="scale">
      <iframe
        v-if="showOverlay && pdfUrl"
        :src="pdfUrl"
        width="100%"
        height="100%"
        frameborder="0"
        class="pdf-iframe"
      ></iframe>
    </transition>
  </teleport>
</template>

<script setup>
import { ref, watch } from 'vue';

// 定义 props
const props = defineProps({
  pdfUrl: {
    type: String,
    required: true,
  },
  show: {
    type: Boolean,
    required: true,
  },
});

// 定义 emits
const emit = defineEmits(['close']);

// 响应式数据
const showOverlay = ref(props.show);

// 监听 props.show 的变化
watch(
  () => props.show,
  (newVal) => {
    showOverlay.value = newVal;
  }
);

// 关闭遮罩的方法
const closeOverlay = () => {
  showOverlay.value = false;
  emit('close'); // 通知父组件关闭
};
</script>

<style scoped>
/* 遮罩层样式 */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色遮罩 */
  z-index: 1000; /* 确保遮罩层在最上层 */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 取消按钮样式 */
.close-button {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 10px 20px;
  background-color: #ff4d4f; /* 红色背景 */
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

.close-button:hover {
  background-color: #ff7875; /* 鼠标悬停时的颜色 */
}

/* iframe 样式 */
.pdf-iframe {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 80%;
  z-index: 1001; /* iframe 在遮罩层之上 */
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* 遮罩层淡入淡出动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* iframe 缩放动画 */
.scale-enter-active,
.scale-leave-active {
  transition: all 0.3s ease;
}

.scale-enter-from,
.scale-leave-to {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.8);
}
</style>

如果在父组件使用,如下代码

javascript 复制代码
<template>
  <div>
    <!-- 打开 PDF 的按钮 -->
    <button @click="openPdf">打开 PDF</button>

    <!-- 使用 PdfViewer 组件 -->
    <PdfViewer
      :pdfUrl="pdfUrl"
      :show="showPdfViewer"
      @close="closePdfViewer"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import PdfViewer from './components/PdfViewer.vue'; // 引入 PdfViewer 组件

// 定义响应式数据
const pdfUrl = ref('');
const showPdfViewer = ref(false);

// 打开 PDF 的方法
const openPdf = () => {
  pdfUrl.value = '/path/to/your/pdf/file.pdf'; // 可以是本地或远程 PDF 文件路径
  showPdfViewer.value = true;
};

// 关闭 PDF 的方法
const closePdfViewer = () => {
  showPdfViewer.value = false;
  pdfUrl.value = '';
};
</script>

<style>
/* 父组件的样式 */
</style>
相关推荐
爱泡脚的鸡腿15 分钟前
HTML CSS 第二次笔记
前端·css
背太阳的牧羊人24 分钟前
使用 PyMuPDF(fitz)库打开 PDF 文件,并且是从内存中的字节流(BytesIO)读取 PDF 内容
数据库·pdf·文件处理·pymupdf·fitz
灯火不休ᝰ31 分钟前
前端处理pdf文件流,展示pdf
前端·pdf
智践行33 分钟前
Trae开发实战之转盘小程序
前端·trae
最新资讯动态38 分钟前
DialogHub上线OpenHarmony开源社区,高效开发鸿蒙应用弹窗
前端
lvbb661 小时前
框架修改思路
前端·javascript·vue.js
树上有只程序猿1 小时前
Java程序员需要掌握的技术
前端
从零开始学安卓1 小时前
Kotlin(三) 协程
前端
阿镇吃橙子1 小时前
一些手写及业务场景处理问题汇总
前端·算法·面试