vue3 pdfh5

在 Vue3 中使用 pdfh5 插件实现 PDF 在线预览
为了在 Vue3 项目中成功集成 pdfh5 并实现 PDF 文件的在线预览功能，可以按照以下方式操作：
安装依赖
首先需要安装 pdfh5 及其样式文件。可以通过 npm 或 yarn 进行安装。
npm install pdfh5 --save
登录后复制
或者
yarn add pdfh5
登录后复制
导入组件与初始化
以下是完整的代码示例，用于加载并渲染 PDF 文件：
<template>
<div class="pdf-container">
<!-- 提供一个容器 -->
<div id="pdf-viewer" ref="refPdf"></div>
</div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import Pdfh5 from 'pdfh5'; // 引入核心库
import 'pdfh5/css/pdfh5.css'; // 引入默认样式表

const refPdf = ref(null);

// 加载 PDF 的函数
const LoadPdf = (url) => {
const pdfh5 = new Pdfh5(refPdf.value, {
pdfurl: url,
zoomMode: 'auto', // 自动缩放模式
});

// 绑定事件监听器
pdfh5.on('complete', (status, msg, time) => {
console.log(`PDF 加载完成：状态 ${status}，消息 ${msg}，耗时 ${time}`);
});
};

// 获取文档并通过 URL 创建对象链接
const getDocById = async (id) => {
try {
const res = await readPDF(id);
if (res) {
const blobUrl = window.URL.createObjectURL(new Blob([res]));
LoadPdf(blobUrl); // 调用加载方法
}
} catch (error) {
console.error('获取文档失败:', error);
}
};

onMounted(() => {
// 假设有一个固定的 ID 来测试
getDocById(12345); // 替换为实际的文档 ID
});

function readPDF(id) {
return fetch(`/api/get-pdf/${id}`) // 替换为实际 API 地址
.then((response) => response.arrayBuffer())
.catch((err) => {
console.error('读取 PDF 失败:', err);
});
}
</script>

<style scoped>
.pdf-container {
width: 100%;
height: 80vh;
}

#pdf-viewer {
width: 100%;
height: 100%;
}
</style>
登录后复制
上述代码实现了以下几个关键点：

使用 ref 将 DOM 元素绑定到模板中的 <div> 上[^1]。
初始化 Pdfh5 对象，并传入目标 DOM 和配置参数。
当 PDF 加载完成后触发回调函数处理逻辑。
如果遇到白屏问题，则可能是因为插件版本不兼容或其他环境因素引起的[^2]。

解决常见问题
如果页面显示空白而没有任何错误提示，可能是由于以下原因造成的：

插件版本冲突确认当前使用的 pdfh5 版本是否支持最新浏览器特性以及 Vue3 生态系统的要求。

API 返回数据异常检查服务器端返回的数据流是否正确编码为二进制格式。

跨域请求限制若通过远程地址访问资源，请确保服务端已启用 CORS 支持。