跳转至

PDF预览方案

vue-office

使用参考 官方文档 https://github.com/501351981/vue-office

问题及解决方案

  • 预览PDF展示不全
    • 实测给'vue-office-pdf'增加固定高度，如'height: 100%'就可以了
  • Safari浏览器不显示内容
    • 因为我是在dialog使用的，谷歌和微信打开都没问题，但是在 mac 上的 Safari浏览器打开的时候不显示内容，判断是 DOM还没渲染完成，加上 nextTick 即可

embedpdf

使用参考 官方文档 https://www.embedpdf.com

<script setup lang="ts">
import { PDFViewer } from "@embedpdf/vue-pdf-viewer";
const viewerConfig = {
  src: "https://snippet.embedpdf.com/ebook.pdf",

  // ✅ 中文化（可选）
  i18n: {
    defaultLocale: "zh-CN",
  },

  /**
   * ✅ 核心：禁用所有功能分类（使用父级分类，一次性覆盖子项）
   * 官方说明：category 是层级结构，禁用父级 = 禁用所有子级
   */
  disabledCategories: [
    // 🔍 缩放相关（包含 zoom-in / zoom-out 等）
    // "zoom",

    // ✏️ 所有标注能力（高亮、下划线、画笔等）
    "annotation",

    // 🧾 表单填写（输入框、checkbox 等）
    "form",

    // 🔺 图形绘制（矩形、圆、箭头等）
    "annotation-shape",

    // 🔒 涂黑/脱敏
    "redaction",

    // 📄 文档操作（打开/关闭/打印/下载/全屏等）
    "document",

    // 📑 页面控制（翻页、滚动、旋转等）
    // "page",

    // 📂 侧边栏（搜索、评论面板等）
    "panel",

    // 🛠 工具（拖拽、选择指针等）
    "tools",

    // 🖱 文本选择（复制等）
    "selection",

    // ↩️ 历史记录（撤销/重做）
    "history",

    // ➕ 插入内容（图片、签名、印章）
    "insert",
  ],

  /**
   * ✅ 双保险：直接关闭 UI 容器（防止某些版本 category 不生效）
   */
  ui: {
    toolbar: false, // 顶部工具栏
    sidebar: false, // 右侧面板
  },
};
</script>

<template>
  <el-watermark :font="font" content="num.num1">
    <div style="height: 100vh">
      <PDFViewer
        :config="viewerConfig"
        :style="{ width: '100%', height: '100%' }"
      />
    </div>
  </el-watermark>
</template>

pdf.js(pdfjs-dist)

使用参考 官方文档 https://mozilla.github.io/pdf.js

iframe(原生标签)

问题及解决方案

  • 隐藏下载和打印按钮
    • url 后面拼接 #toolbar=0

其他

评论