Vue 中 PDF 的预览

在 Vue 项目中实现 PDF 预览的最佳实践

在现代 Web 开发中，展示 PDF 文档是常见的需求之一。本文将分享如何在 Vue 项目中实现 PDF 预览功能，并对现有代码进行优化，以提高性能和可维护性。

代码实现

1. 模板部分

首先，我们使用 el-dialog 来显示 PDF 预览，利用 el-select 来选择不同的 PDF 文件。以下是优化后的模板代码：

<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :show-close="true"
    :close-on-click-modal="false"
    :title="title"
    lock-scroll
    width="1300px"
    @close="close"
  >
    <div v-if="pdfUrls.length > 1">
      <el-select v-model="currentPdfIndex" placeholder="选择PDF">
        <el-option
          v-for="(pdf, index) in pdfUrls"
          :key="index"
          :label="'PDF ' + (index + 1)"
          :value="index"
        />
      </el-select>
    </div>
    <embed
      :src="pdfUrls[currentPdfIndex]"
      type="application/pdf"
      width="100%"
      height="800px"
    />
    <template #footer>
      <el-button type="primary" @click="submit">提交</el-button>
    </template>
  </el-dialog>
</template>

el-dialog: 用于创建一个对话框，visible 属性控制对话框的显示与隐藏。
el-select 和 el-option: 下拉选择框和选项绑定，用于选择要预览的 PDF 文件。
embed: 用于嵌入 PDF 文件，通过 src 属性动态加载当前选择的 PDF 文件。

2. 脚本部分

接下来，对脚本部分进行优化。尤其是对于 PDF URL 的管理和内存清理方面，可以更有效地进行处理。

<script>
import { debounce } from "xe-utils";

export default {
  name: "PdfView",
  props: ["title"],
  data() {
    return {
      dialogVisible: false,
      pdfUrls: [],
      currentPdfIndex: 0,
    };
  },
  methods: {
    open(pdfData) {
      const blob = new Blob([pdfData], { type: "application/pdf" });
      const pdfUrl = URL.createObjectURL(blob);
      this.pdfUrls.push(pdfUrl);
      this.dialogVisible = true;
      this.currentPdfIndex = this.pdfUrls.length - 1; // 直接设置为新增的 PDF 索引
    },
    close() {
      this.dialogVisible = false;
      this.pdfUrls.forEach((pdfUrl) => URL.revokeObjectURL(pdfUrl)); // 清理 URL 防止内存泄漏
      this.pdfUrls = []; // 清空 PDF URL 列表
      this.currentPdfIndex = 0; // 重置当前索引
    },
    submit: debounce(function () {
      this.close();
      this.$emit("submit");
    }, 2300, { leading: true }),
  },
};
</script>

Blob: 用于将 PDF 二进制数据转换为 Blob 对象，以便在浏览器中创建 URL。
URL.createObjectURL: 生成一个指向 Blob 对象的 URL，允许在 <embed> 标签中展示 PDF。
close 方法: 关闭对话框时，清理创建的 URL，防止内存泄漏。
debounce: 用于优化 submit 方法，减少高频率触发的次数，防止性能问题。

3. 使用组件
   最后，可以在需要的地方引用 PdfView 组件，并传递必要的 props 进行使用：

<pdf-view ref="pdfViewRef" @submit="sendEmailReal" title="PDF预览" />

总结
通过以上步骤，成功实现了在 Vue 项目中动态预览 PDF 的功能。优化后的代码不仅提高了内存管理的效率，还提升了用户体验。希望本文能为你的 Vue 项目提供有价值的参考！如果有任何问题或建议，欢迎在评论区留言！