<template>
|
<div
|
v-loading="isLoading"
|
class="pdf-container"
|
element-loading-text="加载中..."
|
>
|
<iframe
|
id="printIframe"
|
frameborder="0"
|
style="width: 100%; height: 100%"
|
@load="iframeLoaded"
|
/>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { ref, defineProps } from "vue";
|
const props = defineProps({
|
// fileInfo: {
|
// type: String,
|
// default: ""
|
// }
|
fileInfo: {
|
type: Object,
|
required: true
|
}
|
});
|
let isLoading = ref(true);
|
const iframeLoaded = () => {
|
console.log("jjjjjj");
|
|
isLoading.value = false;
|
};
|
const pdfUrl = props.fileInfo.filePath;
|
// 用fetch获取文件流，强制转为预览格式
|
fetch(pdfUrl)
|
.then(response => {
|
// 检查响应是否成功
|
if (!response.ok) throw new Error("文件获取失败");
|
// 强制获取Blob对象（指定PDF类型）
|
return response.blob();
|
})
|
.then(blob => {
|
// 生成临时预览URL（浏览器本地临时链接，无下载触发）
|
const blobUrl = URL.createObjectURL(
|
new Blob([blob], { type: "application/pdf" }) // 明确指定PDF类型
|
);
|
// 赋值给iframe并显示
|
const iframe = document.getElementById("printIframe");
|
iframe.src = blobUrl;
|
iframe.style.display = "block";
|
document.getElementById("loading").style.display = "none";
|
})
|
.catch(error => {
|
// document.getElementById("loading").innerText = `加载失败：${error.message}`;
|
});
|
</script>
|
<style>
|
.pdf-container {
|
height: 600px;
|
}
|
</style>
|
