vue-pdf2img

PDF2IMG Library

一个强大的 PDF 转图片功能库，提供 PDF 文件加载、页面渲染、图片转换等功能，支持 Vue 2 和 Vue 3。

特性

• 支持 PDF 文件加载和渲染
• 支持将 PDF 页面转换为图片
• 智能缓存管理，提高性能
• 预加载机制，提升用户体验
• 自适应设备性能，优化渲染参数
• 完善的错误处理和重试机制
• 同时支持 Vue 2 和 Vue 3

安装

npm install pdf2img-lib
# 或
yarn add pdf2img-lib

基本用法

<template>
    <div>
        <div v-if="isLoading">加载中...</div>
        <div v-else>
            <img v-if="currentImageUrl" :src="currentImageUrl" alt="PDF页面" />
            <div class="pagination">
                <button @click="prevPage" :disabled="currentPage <= 1">上一页</button>
                <span>{{ currentPage }} / {{ totalPages }}</span>
                <button @click="nextPage" :disabled="currentPage >= totalPages">下一页</button>
            </div>
        </div>
    </div>
</template>

<script>
    import { defineComponent } from 'vue';
    import { usePdf2img } from 'pdf2img-lib';

    export default defineComponent({
        setup() {
            // 初始化PDF转图片功能
            const { isLoading, currentPage, totalPages, loadPdfFile, currentImageUrl, nextPage, prevPage } = usePdf2img({
                scale: 2,
                quality: 0.9,
                type: 'image/png',
                adaptiveScale: true,
                workerSrc: '/path/to/pdf.worker.min.js' // 指定worker脚本路径
            });

            // 加载PDF文件
            loadPdfFile('/path/to/document.pdf').catch((err) => {
                console.error('PDF加载失败:', err);
            });

            return {
                isLoading,
                currentPage,
                totalPages,
                currentImageUrl,
                nextPage,
                prevPage
            };
        }
    });
</script>

API 参考

usePdf2img(options)

创建 PDF 转图片功能实例。

参数

• options (可选): PDF 转图片配置选项
  • scale: 缩放比例，默认 2
  • quality: 图片质量，范围 0-1，默认 1.0
  • type: 图片格式，默认'image/png'
  • maxCachePages: 最大缓存页数，默认 10 页
  • preloadCount: 预加载页数，默认 1 页
  • retryCount: 加载失败重试次数，默认 3 次
  • retryDelay: 重试延迟时间(ms)，默认 1000ms
  • adaptiveScale: 是否启用自适应缩放，默认 false
  • workerSrc: PDF.js worker 脚本路径
  • cMapUrl: PDF.js cMap 文件路径
  • cMapPacked: 是否使用打包的 cMap 文件，默认 true

返回值

返回一个包含以下属性和方法的对象：

• isLoading: 加载状态
• currentPage: 当前页码
• totalPages: 总页数
• imageCache: 图片缓存数组
• currentImageUrl: 当前页面的图片 URL
• loadPdfFile(url, options): 加载 PDF 文件
• renderPageToImage(pageNumber): 将指定页面渲染为图片
• convertAllPages(options): 转换所有页面为图片
• nextPage(): 切换到下一页
• prevPage(): 切换到上一页
• cleanup(): 清理资源

注意事项

1. 确保正确配置 PDF.js worker 脚本路径
2. 在组件卸载时调用 cleanup()方法释放资源
3. 对于大型 PDF 文件，建议使用分批加载策略

许可证

MIT