| | |
|---|
| | | > |
|---|
| | | <iframe |
|---|
| | | id="printIframe" |
|---|
| | | :src="pdfSrc" |
|---|
| | | frameborder="0" |
|---|
| | | style="width: 100%; height: 100%" |
|---|
| | | @load="iframeLoaded" |
|---|
| | |
|---|
| | | |
|---|
| | | <script setup lang="ts"> |
|---|
| | | import { ref, defineProps } from "vue"; |
|---|
| | | defineProps({ |
|---|
| | | pdfSrc: { |
|---|
| | | type: String, |
|---|
| | | default: "" |
|---|
| | | const props = defineProps({ |
|---|
| | | // fileInfo: { |
|---|
| | | // type: String, |
|---|
| | | // default: "" |
|---|
| | | // } |
|---|
| | | fileInfo: { |
|---|
| | | type: Object, |
|---|
| | | required: true |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | let isLoading = ref(true); |
|---|
| | |
|---|
| | | |
|---|
| | | 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 { |
|---|
