# ekr-vue3-pdf-viewer

**Repository Path**: iehyou/ekr-vue3-pdf-viewer

## Basic Information

- **Project Name**: ekr-vue3-pdf-viewer
- **Description**: 
基于 pdf.js 封装的预览 pdf 文件组件，支持 pdf 单页预览、分页预览、缩放、下载、pdf 文件路径配置等
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2025-03-20
- **Last Updated**: 2025-11-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<!--
 * @Author: LYM
 * @Date: 2024-09-18 16:25:27
 * @LastEditors: LYM
 * @LastEditTime: 2024-09-20 11:35:15
 * @Description: Please set Description
-->

# ekr-vue3-pdf-viewer

基于 pdf.js 封装的预览 pdf 文件组件，支持 pdf 单页预览、分页预览、缩放、下载、pdf 文件路径配置等

## installation

```
pnpm i ekr-vue3-pdf-viewer

yarn add ekr-vue3-pdf-viewer

npm i ekr-vue3-pdf-viewer
```

## example

```vue
<template>
  <div id="ekr-pdf-container"></div>
</template>
<script lang="ts" setup>
import { initPdfView } from 'ekr-vue3-pdf-viewer'
import 'ekr-vue3-pdf-viewer/dist/style.css'
import { onMounted } from 'vue'
/**
 * pdf.worker.mjs 和 pdf.worker.mjs.map 文件在vue3-pdf-viewer/libs 文件夹里，copy 到自己项目的静态资源里
 */
const loading = ref(false)
const pdfPath = new URL('ekr-vue3-pdf-viewer/dist/libs/pdf.worker.mjs', import.meta.url).href
onMounted(() => {
  loading.value = true
  initPdfView('#ekr-pdf-container', {
    loadFileUrl: `https:xxx.pdf`, //文件路径
    pdfPath: pdfPath, // pdf.js 里需要指定的文件路径
    loading: (load: boolean) => {
      loading.value = load
      //加载完成会返回 false
    },
    pdfOption: {
      scale: true, //缩放
      pdfImageView: true, //pdf 是否可以单片点击预览
      page: true, //分页查看
      navShow: true, //左侧导航
      navigationShow: false, // 左侧导航是否开启
      pdfViewResize: true, // 是否开启resize 函数 确保pdf 根据可视窗口缩放大小
      toolShow: true, // 是否开启顶部导航
      download: true, //下载
      clearScale: 1.5, // 清晰度 默认1.5 感觉不清晰调大 ,当然清晰度越高pdf生成性能有影响
      fileName: 'preview.pdf', // pdf 下载文件名称
    },
  })
})
</script>

<style scoped>
#ekr-pdf-container {
  width: 100%;
  padding: 0px;
  height: 100%;
}
</style>
```

## 参数说明

|    参数名称 | 内容 说明                                           |
| ----------: | --------------------------------------------------- |
| loadFileUrl | 文件地址（必选）                                    |
|     pdfPath | pdf.js 里所需的 pdf.worker.min.mjs 指向地址（必选） |
|   pdfOption | pdf 的配置选项 （可选）                             |
|     loading | pdf 加载完成执行函数 （可选）                       |