在 vue3 项目中使用 pdfjs 渲染 pdf 文档

admin管理员组

文章数量:1648955

快速开始

1. 安装依赖

npm i pdfjs-dist@4.5.136

2. 将 pdf.worker.mjs 文件放入服务端静态文件中，这是为了方便在下面设置 workerSrc 准确找到资源。因为该包是通过 npm 管理的包，引用路径的时候会很不方便。而将找个 js 文件方法 public 中在开发阶段会找不到路径。因此放入服务端。该文件在 node_modules/pdfjs-dist/build/pdf.worker.mjs
3. 页面中使用

<template>
  <div style="height: 100%;">
    <canvas id="the-canvas"></canvas>
    <button @click="nextPage">下一页</button>
  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue'
// 将 pdflib 库放入到 window 对象中
import 'pdfjs-dist'

onMounted(() => {
  pdfShow()
})

const pageNum = ref(1)
const pdfContent = ref(null)
// http://192.168.1.30:30001 是本地启动的 node 服务，用于模拟服务端的情况
const pdfShow =async (url= 'http://192.168.1.30:30001/static/pdf/aaa.pdf') => {
  window.pdfjsLib.GlobalWorkerOptions.workerSrc = 'http://192.168.1.30:30001/static/pdf/pdf.worker.mjs'
  console.log(window.pdfjsLib.GlobalWorkerOptions.workerSrc);
  const pdf = await window.pdfjsLib.getDocument(url)
  pdfContent.value = pdf
  pdf.promise.then(async (res) => {2. 
    const page =await res._transport.getPage(pageNum.value)
    pageRender(page)
  })
}
const pageRender = (page) => {
  const scale = 1.5
  const viewport = page.getViewport({scale})
  const outputScale = window.devicePixelRatio || 1;
  const canvas = document.getElementById('the-canvas');
  const context = canvas.getContext('2d');
  canvas.width = Math.floor(viewport.width * outputScale);
  canvas.height = Math.floor(viewport.height * outputScale);
  canvas.style.width = Math.floor(viewport.width) + "px";
  canvas.style.height =  Math.floor(viewport.height) + "px";
  const transform = outputScale !== 1
  ? [outputScale, 0, 0, outputScale, 0, 0]
  : null;

  const renderContext = {
    canvasContext: context,
    transform: transform,
    viewport: viewport
  };
  page.render(renderContext);
}
const nextPage = () => {
  pageNum.value += 1
  console.log(pdfContent.value);
  pdfContent.value.promise.then(async (res) => {
    const page =await res._transport.getPage(pageNum.value)
    pageRender(page)
  })
}
</script>

<style lang="scss" scoped>

</style>

本文标签： 文档项目PDFpdfjs