前端Base64在线预览pdf（vue3）

vue3 setup语法：

注意事项

1. Base64字符串：确保你有一个有效的Base64编码的PDF字符串。在上面的示例中，exampleBase64是一个占位符，你应该用实际从后端获取的Base64字符串替换它。

2. Data URL：pdfDataUrl是通过将pdfBase64的值前缀为data:application/pdf;base64,来创建的。这是告诉浏览器这是一个PDF文件，并且内容是Base64编码的。

3. 异步获取数据：在上面的示例中，我使用了一个模拟的fetchPdfBase64函数来异步获取Base64数据。在实际应用中，你应该使用fetch或其他HTTP客户端库来从后端API获取这些数据。

4. 错误处理：在实际应用中，你应该添加错误处理逻辑来处理网络错误、数据解析错误等。

5. 样式：你可以根据需要调整<iframe>的样式，比如宽度、高度和边框等。

6. 浏览器兼容性：大多数现代浏览器都支持通过Data URL展示PDF文件，但在某些旧版浏览器或特定的浏览器配置下可能不支持。

<template>
  <div>
    <!-- 使用 iframe 展示 PDF -->
    <iframe v-if="pdfSrc" :src="pdfSrc" type="application/pdf" width="100%" height="100%"
      :title="'PDF Viewer - ' + (pdfTitle || 'Document')"></iframe>
    <!-- 如果没有PDF源，则显示加载提示 -->
    <div v-else>Loading PDF...</div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
const props = defineProps({
  base: { 
    type: String,
    defalut: () => ''
  }
})
// 模拟从后端或其他来源获取Base64字符串的函数（实际使用时请替换为真实的API调用）  
const fetchPdfBase64 = async () => {
  // 这里应该是从后端API或其他来源获取Base64字符串的代码  
  // 但为了示例，我们直接使用一个硬编码的字符串（注意：这只是一个示例，不是有效的PDF Base64）  
  // 请替换为有效的Base64编码的PDF字符串  
  const exampleBase64 = props.base;//组件传过来的base64数据

  // 注意：这里的exampleBase64需要是一个有效的、完整的Base64编码的PDF字符串  
  // 如果你从后端获取，应该使用await fetch(...)等方式来获取数据，并处理成Base64字符串  

  // 创建Data URL并返回  
  return `data:application/pdf;base64,${exampleBase64}`;
};

// 使用ref来存储PDF的Data URL  
const pdfSrc = ref(null);
const pdfTitle = ref(''); // 可选：为PDF设置一个标题，用于iframe的title属性  

// 在组件挂载时获取PDF的Base64字符串并设置到ref中  
onMounted(async () => {
  try {
    const dataUrl = await fetchPdfBase64();
    pdfSrc.value = dataUrl;
    // 如果需要，也可以设置一个标题  
    // pdfTitle.value = 'Your PDF Document Title';  
  } catch (error) {
    console.error('Failed to fetch PDF:', error);
    // 可以处理错误，比如显示一个错误消息  
  }
});  
</script>

<style scoped>
iframe {
  border: none;
  /* 移除iframe的边框 */
}
</style>