Vue3中通过ByteArray在浏览器展示PDF文档的方法咨询

先修正你现有代码的问题 #

你的代码存在几个关键错误，导致PDF无法正常展示：

1. Object标签数据绑定错误：data="byteArrayPDF"是字符串字面量，应该用Vue的绑定语法:data="byteArrayPDF"
2. 二进制数据解析错误：PDF是二进制文件，不能用response.json()解析，应该用response.blob()或response.arrayBuffer()处理
3. Catch回调写法错误：catch(console.log("Error PDF View"))会直接执行console.log，正确写法是传入回调函数

基础实现方案（用Object/IFrame） #

这是最简便的方式，利用浏览器原生的PDF渲染能力：

<template>
  <div v-if="pdfUrl" class="pdf-container">
    <!-- 用iframe也可以，兼容性类似 -->
    <object :data="pdfUrl" type="application/pdf" style="width:100%;height:100vh;"></object>
  </div>
  <div v-else class="loading">加载中...</div>
</template>

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

const pdfUrl = ref(null);

const fetchPdf = async () => {
  try {
    const response = await fetch('https://localhost:5001/api/Doc/Virtual-Visual-Service-2020.pdf');
    if (!response.ok) throw new Error('请求失败');
    
    // 将二进制数据转为Blob URL
    const blob = await response.blob();
    pdfUrl.value = URL.createObjectURL(blob);
  } catch (err) {
    console.error('加载PDF失败:', err);
    // 这里可以添加错误提示，比如显示重试按钮
  }
};

onMounted(() => {
  fetchPdf();
});

// 组件卸载时释放Blob URL，避免内存泄漏
onUnmounted(() => {
  if (pdfUrl.value) {
    URL.revokeObjectURL(pdfUrl.value);
  }
});
</script>

<style scoped>
.pdf-container {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-size: 24px;
}
</style>

大屏场景优化建议 #

针对大屏电视展示的需求，推荐以下优化点：

• 全屏无干扰展示：设置组件占满整个屏幕，隐藏浏览器地址栏、导航栏，确保内容无遮挡
• 自动切换文档：添加定时器实现定时切换PDF，切换前预加载下一份文档，避免空白等待
• 分辨率适配：用相对单位（vw/vh）代替固定像素，适配不同尺寸的大屏设备
• 错误重试机制：无人值守场景下，加载失败时自动重试3-5次，或显示清晰的错误提示
• 增强控制（可选）：如果需要自定义导航、自动适配屏幕等功能，可使用PDF.js库，它能提供更精细的PDF渲染控制

额外说明 #

如果后端返回的是Base64编码字符串，可直接拼接成Data URL使用：

// 假设后端返回base64格式的PDF字符串
pdfUrl.value = `data:application/pdf;base64,${base64String}`;

注意：大体积PDF优先用Blob URL，性能比Data URL更优。

内容的提问来源于stack exchange，提问作者Bigbear