一、你配吗（npm）安装依赖
npm install --save vue-pdf
页面引用
import pdf from "vue-pdf";
二、下载PDF
<button @click="downloadFPD(report_id, report_name)">下载PDF</button>
请求接口获取到的 PDF 二进制数据 data
async downloadFPD(id, name) {
try {
// 这里的数据获取方法是api文件里写好的请求
/*
确保接口返回的是 PDF 的二进制数据（设置接口响应头 responseType: 'arraybuffer'）。注：如果是 Base64 编码的，先解码后再展示。
*/
// PDF 二进制数据的异步函数
let data = await doctor.download({ report_id: id });
/*
要下载什么类型的根据数据返回格式 切换application/pdf，例如下载.tar.gz压缩包就是application/gzip
*/
// 创建一个 Blob 对象来表示 PDF 文件
const blob = new Blob([data], { type: "application/pdf" });
// 创建新的锚点元素
const link = document.createElement("a");
// 传入 blod 对象，生成一个表示该 blob 对象内容的URL赋值给 a 标签的 href 属性
link.href = URL.createObjectURL(blob);
// 指定点击该link元素的时候，下载的文件名
link.download = `${name}.pdf`;
// 这行代码将 1ink 元素添加到文档的<body></body>元素中。因为某些浏览器(特别是 Chrome)要求<a>元素必须存在于 DOM 中，才能通过脚本触发其点击事件。
document.body.appendChild(link);
// 模拟link元素的click行为，download被设置，所以点击操作会执行下载功能
link.click();
// 下载完成之后移除 link 元素，清除不必要的 DOM
document.body.removeChild(link);
// 传入之前通过 URL.createobjectuRL 创建的 URL。这个方法的目的是释放之前创建的 URL 对象在浏览器内部占用的内存。由于 Blob 对象可能占用大量内存，特别是在处理大文件时，因此释放这些资源是很重要的。
URL.revokeObjectURL(link.href);
} catch (error) {
console.error("下载失败:", error);
}
},
三、点击预览PDF（新页面打开或在当前页面嵌套展示）
<button @click="previewPDF(report_id)">预览PDF</button>
async previewPDF(id) {
try {
// PDF 二进制数据的异步函数
let data = await doctor.download({ report_id: id });
// 创建一个 Blob 对象来表示 PDF 文件
const blob = new Blob([data], { type: "application/pdf" });
// 创建一个临时的 URL 来引用这个 Blob 对象
const pdfUrl = URL.createObjectURL(blob);
// 新页面打开这个 pdfUrl
window.open(pdfUrl, "_blank");
// 以下逻辑为当前页展示 如果需要当前页面展示页面中需要添加
// 获取或创建一个iframe元素来显示PDF()
// let iframe = document.getElementById("pdfPreviewFrame");
// if (!iframe) {
// // 如果iframe不存在，则创建一个新的iframe
// iframe = document.createElement("iframe");
// // iframe.id = "pdfPreviewFrame";
// // iframe.style.width = "100%"; // 根据需要调整宽度
// // iframe.style.height = "500px"; // 根据需要调整高度
// // document.body.appendChild(iframe); // 将iframe添加到body中
// window.open(pdfUrl, "_blank");
// }
// // 设置iframe的src属性为PDF的URL
// iframe.src = pdfUrl;
// 注意：当不再需要这个Blob URL时，应该释放它
// 如果想要在用户关闭或离开页面时释放它 可以使用 window.onbeforeunload 事件来监听
// window.addEventListener('beforeunload', function() {
// URL.revokeObjectURL(pdfUrl);
// });
// 或者，如果你确定在预览之后不再需要这个URL，可以立即释放它
// 但这通常不是预览场景的最佳做法，因为用户可能想要查看PDF文件多次
} catch (error) {
console.error("Failed to preview PDF:", error);
}
},
