pdfjs-dist预览pdf文件

最新推荐文章于 2025-04-10 17:09:09 发布

persistenceYL

最新推荐文章于 2025-04-10 17:09:09 发布

阅读量1.7k

点赞数

分类专栏： vue 文章标签： javascript typescript vue.js

本文链接：https://blog.youkuaiyun.com/weixin_42440314/article/details/123409729

版权

vue 专栏收录该内容

2 篇文章

订阅专栏

该博客展示了如何在Vue应用中利用pdfjs-dist库来预览PDF文件。通过循环遍历页面并在canvas元素上渲染，实现了逐页显示PDF内容。同时，提供了加载状态提示及下载文件的功能。文章详细讲解了代码实现过程，包括设置全局worker源、获取PDF文档、渲染页面以及监听文件加载等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

pdfjs-dist预览pdf

<template>
  <div class="view">
    <template v-for="item in pageNum" :key="item">
      <canvas :id="`pdf-canvas-${item}`" class="pdf-page" />
    </template>
  </div>
  <!-- <div class="footer">
    <Button color="#006BE1" type="primary" @click="downLoadPDF" class="btn">
      下载文件
    </Button>
  </div> -->
</template>

<script setup lang="ts">
import { reactive, toRefs, nextTick, watchEffect, defineProps } from "vue";
//@ts-ignore
import * as pdfjs from "pdfjs-dist";
//@ts-ignore
import pdfjsWorker from "pdfjs-dist/build/pdf.worker.entry";
import { Toast, Button } from "vant";
// import { downloadFile } from "@/utils";
pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker;
const props = defineProps({
  url: { type: String, default: "" }, // pdf文件路径
});

const emit = defineEmits(["onRendered"]);
const state = reactive<any>({
  pageNum: 0,
  pdfCtx: null,
});

const resolvePdf = (url: string) => {
  const loadingTask = pdfjs.getDocument(url);
  loadingTask.promise.then((pdf: any) => {
    state.pdfCtx = pdf;
    state.pageNum = pdf.numPages;
    nextTick(() => {
      renderPdf();
    });
  });
};

const renderPdf = (num = 1) => {
  state.pdfCtx.getPage(num).then((page: any) => {
    const canvas: any = document.getElementById(`pdf-canvas-${num}`);
    const ctx = canvas.getContext("2d");
    const viewport = page.getViewport({ scale: 1 });
    // 画布大小,默认值是width:300px,height:150px
    canvas.height = viewport.height;
    canvas.width = viewport.width;
    // 画布的dom大小, 设置移动端,宽度设置铺满整个屏幕
    const clientWidth = document.body.clientWidth;
    canvas.style.width = clientWidth + "px";
    // 根据pdf每页的宽高比例设置canvas的高度
    canvas.style.height =
      clientWidth * (viewport.height / viewport.width) + "px";
    page.render({
      canvasContext: ctx,
      viewport,
    });
    if (num < state.pageNum) {
      renderPdf(num + 1);
    } else {
      emit("onRendered");
      Toast.clear(); // 取消加载loading
    }
  });
};

watchEffect(() => {
  if (props.url) {
    // 展示加载loading
    Toast.loading({
      message: "加载中...",
      overlay: true,
      forbidClick: true,
      duration: 0,
    });

    resolvePdf(props.url);
  }
});

const { pageNum, pdfCtx } = toRefs(state);
</script>
<style scoped>
 .view {
  padding-bottom: 1.5rem;
}
.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  padding: 0.16rem 0.4rem 0.6rem;
  display: flex;
  align-items: center;
  height: 1.5rem;
  box-shadow: 0px -1px 0px rgba(49, 69, 106, 0.164254);
  background-color: #fff;
}
.btn {
  width: 100%;
}
.van-button {
  border-radius: 0.1rem;
} 
</style>