vue3使用vue-pdf-embed预览文件流格式的pdf文件

效果图：

安装npm install vue3-pdfjs、npm install vue-pdf-embed

source格式传递字符串

'data:application/pdf;base64,' + 接口获取的文件流;

<template>
  <el-button @click="close">{{$t('common.navbar.back')}}</el-button>
  <template v-if="sShow">
    <vue-pdf-embed :source="source" />
  </template>
</template>
 
<script setup>
import { pervDoc } from '@/api/doc/doc'
import { ref } from '@vue/reactivity';
import VuePdfEmbed from "vue-pdf-embed";
const emit = defineEmits(["close"]);
function close () {
  emit("close");
}
const props = defineProps({
  docId: {
    type: Number
  }
})
const source = ref('');
const sShow = ref(false)
function getSource () {
  pervDoc(props.docId).then(res => {
    if (res.status == "success") {
      source.value = 'data:application/pdf;base64,' + res.data.base64File;
      sShow.value = true;
    }
  }).catch(function (err) {
    console.log(err);
  })
}
 
onMounted(() => {
  getSource();
})
 
 
 
</script>
 
<style>
</style>