Vue3+Vue-PDF가 PDF 파일의 온라인 미리보기를 구현하는 방법

vue3 프로젝트 만들기

먼저 Vue3 프로젝트를 만들고 터미널에 명령어를 입력합니다Vue3 项目, 在终端中输入命令

pnpm create vite vue-pdf-preview

选择 vue-ts 回车，cd 进入项目根目录，执行 pnpm install, 等待项目依赖包安装完成。

项目依赖包安装完成后，我们来启动项目, 执行命令 pnpm run dev ,可以看到控制台输入出了如下内容

  vite v2.9.9 dev server running at:
  > Local: http://localhost:3000/
  > Network: use `--host` to expose
  ready in 780ms.

按住 control/command + 鼠标左键，项目在浏览器中打开了

项目启动成功

添加 PDF 预览插件

项目启动成功后，我们安装 PDF 预览插件

pnpm install vue-pdf-embed
pnpm install vue3-pdfjs

我们在 src 下新建一个文件 src/components/pdfPreview.vue，添加一些代码，初始化 vue-pdf 预览，代码如下

<template>
    <div class="pdf-preview">

    </div>
</template>
<script setup lang="ts">
import { reactive, onMounted, computed } from "vue";

const props = defineProps({
    pdfUrl: {
        type: String,
        required: true
    }
})
onMounted(() => {
});
</script>
<style lang="css" scoped>
.pdf-preview {
    position: relative;
    height: 100vh;
    padding: 20px 0;
    box-sizing: border-box;
    background: rgb(66, 66, 66);
}
.vue-pdf-embed {
    text-align: center;
    width: 515px;
    border: 1px solid #e5e5e5;
    margin: 0 auto;
    box-sizing: border-box;
}
</style>

添加完成后，我们将 PDF 预览组件引入到 App.vue 文件中，并将提前准备的 PDF 文件也引入，如下所示：

<template>
<div>
    <PDFView :pdfUrl="jsPdf" />
</div>
</template>
<script setup lang="ts">
import PDFView from "./components/pdfPreview.vue"
import jsPdf from "./Javascript.pdf"
</script>

接下来我们回到刚刚新建的 PDF 预览组件页面，来完善预览功能

我们先引入 PDF 预览插件：

import VuePdfEmbed from "vue-pdf-embed";
import { createLoadingTask } from "vue3-pdfjs/esm"; // 获得总页数

使用 vue3 的 reactive 定义一些页数，页码，PDF文件预览地址变量

const state = reactive({
    source: props.pdfUrl, 预览pdf文件地址
    pageNum: 1, 当前页面
    scale: 1, // 缩放比例
    numPages: 0, // 总页数
});

在 OnMounted

 const loadingTask = createLoadingTask(state.source);
    loadingTask.promise.then((pdf:{numPages: number}) => {
        state.numPages = pdf.numPages;
    });

vue-ts를 선택하고 Enter, cd를 눌러 프로젝트 루트에 들어갑니다. 디렉토리에 가서 pnpm install을 실행하고 프로젝트 종속성 패키지가 설치될 때까지 기다립니다.

프로젝트 종속성 패키지가 설치되면 프로젝트를 시작하고 pnpm run dev 명령을 실행해 보겠습니다. 콘솔에 다음 내용이 입력된 것을 볼 수 있습니다

 <div class="pdf-wrap">
     <vue-pdf-embed :source="state.source"  : class="vue-pdf-embed" :page="state.pageNum" />
</div>

control/command를 길게 누르세요. + 마우스 왼쪽 버튼

, 프로젝트가 브라우저에서 열립니다

프로젝트가 성공적으로 시작되었습니다

PDF 미리보기 플러그인 추가

프로젝트가 성공적으로 시작된 후

PDF

미리보기 플러그인

<div class="page-tool">
    <div class="page-tool-item" >上一页</div>
    <div class="page-tool-item">下一页</div>
    <div class="page-tool-item">{{state.pageNum}}/{{state.numPages}}</div>
    <div class="page-tool-item" >放大</div>
    <div class="page-tool-item">缩小</div>
</div>

을 설치했습니다. src 파일 src/comComponents/pdfPreview.vue 아래에 새 파일을 만들고, 일부 코드를 추가하고, vue-pdf 미리 보기를 초기화했습니다. 코드는 다음과 같습니다. 다음과 같이

.pdf-preview {
    position: relative;
    height: 100vh;
    padding: 20px 0;
    box-sizing: border-box;
    background-color: e9e9e9;
}
.pdf-wrap{
    overflow-y:auto ;
}
.vue-pdf-embed {
    text-align: center;
    width: 515px;
    border: 1px solid #e5e5e5;
    margin: 0 auto;
    box-sizing: border-box;
}

.page-tool {
    position: absolute;
    bottom: 35px;
    padding-left: 15px;
    padding-right: 15px;
    display: flex;
    align-items: center;
    background: rgb(66, 66, 66);
    color: white;
    border-radius: 19px;
    z-index: 100;
    cursor: pointer;
    margin-left: 50%;
    transform: translateX(-50%);
}
.page-tool-item {
    padding: 8px 15px;
    padding-left: 10px;
    cursor: pointer;
}

추가가 완료되면 🎜PDF🎜 미리보기 컴포넌트를 소개하겠습니다. App.vue 파일로 이동하여 준비된 🎜PDF🎜 파일을 가져옵니다. 🎜아래 그림과 같습니다. 🎜🎜

const scale = computed(() => `transform:scale(${state.scale})`)
function lastPage() {
    if (state.pageNum > 1) {
        state.pageNum -= 1;
    }
}
function nextPage() {
    if (state.pageNum < state.numPages) {
        state.pageNum += 1;
    }
}
function pageZoomOut() {
    if (state.scale < 2) {
        state.scale += 0.1;
    }
}
function pageZoomIn() {
    if (state.scale > 1) {
        state.scale -= 0.1;
    }
}

🎜다음으로 새로 생성된 🎜PDF🎜 미리보기 구성 요소 페이지로 돌아갑니다. 미리보기 기능을 개선하려면🎜🎜🎜먼저 PDF 미리보기 플러그인을 소개합니다. 🎜🎜

<div class="page-tool-item" @click="lastPage">上一页</div>
<div class="page-tool-item" @click="nextPage">下一页</div>
<div class="page-tool-item">{{state.pageNum}}/{{state.numPages}}</div>
<div class="page-tool-item" @click="pageZoomOut">放大</div>
<div class="page-tool-item" @click="pageZoomIn">缩小</div>

🎜🎜vue3🎜의 reactive사용 code> 일부 페이지 번호, 페이지 번호, PDF 파일 미리보기 주소 변수🎜rrreee🎜를 OnMounted에서 정의하려면 후크 함수에서 🎜createLoadingTask🎜를 사용하여 미리보기 파일의 총 페이지 수를 가져옵니다. 🎜rrreee🎜 🎜미리보기 플러그인 코드를 템플릿에 추가하세요. 🎜🎜rrreee🎜브라우저를 열면 PDF 파일이 로드된 것을 볼 수 있습니다. 하지만 스타일이 별로 보기 좋지 않습니다. 다음 단계에서 스타일을 최적화하겠습니다. PDF 파일의 페이지 넘기기 기능, 확대/축소 기능, 현재 페이지/총 페이지 수 표시 기능을 개선합니다🎜🎜다음 코드를 🎜tempate🎜🎜rrreee🎜🎜에 추가하세요. 꾸미기 스타일: 🎜🎜rrreee🎜파일 넘기기 기능 추가, 줌 기능, 현재 페이지/전체 페이지 표시 기능 추가 및 개선🎜rrreee🎜🎜tempalte🎜🎜rrreee

위 내용은 Vue3+Vue-PDF가 PDF 파일의 온라인 미리보기를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!