vue3: pdf.js 2.16.105 using typescript

news2025/7/17 8:17:58

npm create vite vuepdfpreview  //创建项目
 
npm install vue-pdf-embed
npm install vue3-pdfjs
npm install pdfjs-dist@2.16.105

<!--
 *                                |~~~~~~~|
 *                                |       |
 *                                |       |
 *                                |       |
 *                                |       |
 *                                |       |
 *     |~.\\\_\~~~~~~~~~~~~~~xx~~~         ~~~~~~~~~~~~~~~~~~~~~/_//;~|
 *     |  \  o \_         ,XXXXX),                         _..-~ o /  |
 *     |    ~~\  ~-.     XXXXX`)))),                 _.--~~   .-~~~   |
 *      ~~~~~~~`\   ~\~~~XXX' _/ ';))     |~~~~~~..-~     _.-~ ~~~~~~~
 *               `\   ~~--`_\~\, ;;;\)__.---.~~~      _.-~
 *                 ~-.       `:;;/;; \          _..-~~
 *                    ~-._      `''        /-~-~
 *                        `\              /  /
 *                          |         ,   | |
 *                           |  '        /  |
 *                            \/;          |
 *                             ;;          |
 *                             `;   .       |
 *                             |~~~-----.....|
 *                            | \             \
 *                           | /\~~--...__    |
 *                           (|  `\       __-\|
 *                           ||    \_   /~    |
 *                           |)     \~-'      |
 *                            |      | \      '
 *                            |      |  \    :
 *                             \     |  |    |
 *                              |    )  (    )
 *                               \  /;  /\  |
 *                               |    |/   |
 *                               |    |   |
 *                                \  .'  ||
 *                                |  |  | |
 *                                (  | |  |
 *                                |   \ \ |
 *                                || o `.)|
 *                                |`\\) |
 *                                |       |
 *                                |       |
 *
 * @Author: geovindu
 * @Date: 2025-05-08 20:54:24
 * @LastEditors: geovindu
 * @LastEditTime: 2025-05-08 22:22:28
 * @FilePath: \vue\vuepdfpreview\src\App.vue
 * @Description: geovindu
 * @lib,packpage:
 * npm install vue-pdf-embed
 * npm install vue3-pdfjs
 *  npm install pdfjs-dist@2.16.105
 * @IDE: vscode
 * @jslib: node 20 vue.js 3.0
 * @OS: windows10
 * @database: mysql 8.0  sql server 2019 postgreSQL 16
 * Copyright (c) geovindu 2025 by geovindu@163.com, All Rights Reserved.
 -->
 
 
 
<template>
<div class="pdf-container">
    <PDFView :pdfUrl="pdfUrl" v-if="pdfUrl" />
    <div v-else >加载中...</div>
  <div>
    <a href="https://vite.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <HelloWorld msg="Vite + Vue" />
 </div>
 </template>
 <script setup lang="ts">
 
 import HelloWorld from './components/HelloWorld.vue'
 //import PDFView from "./components/pdfPreview.vue" // 可以
 import PDFView from "./components/pdfjs.vue"   //可以
 //import jsPdf from "http://localhost:5173/pdfs/01.pdf"
 const pdfUrl = "./pdfs/09.pdf"
 </script>
 
  
<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

<!--
 *                        ::
 *                       :;J7, :,                        ::;7:
 *                       ,ivYi, ,                       ;LLLFS:
 *                       :iv7Yi                       :7ri;j5PL
 *                      ,:ivYLvr                    ,ivrrirrY2X,
 *                      :;r@Wwz.7r:                :ivu@kexianli.
 *                     :iL7::,:::iiirii:ii;::::,,irvF7rvvLujL7ur
 *                    ri::,:,::i:iiiiiii:i:irrv177JX7rYXqZEkvv17
 *                 ;i:, , ::::iirrririi:i:::iiir2XXvii;L8OGJr71i
 *               :,, ,,:   ,::ir@mingyi.irii:i:::j1jri7ZBOS7ivv,
 *                  ,::,    ::rv77iiiriii:iii:i::,rvLq@huhao.Li
 *              ,,      ,, ,:ir7ir::,:::i;ir:::i:i::rSGGYri712:
 *            :::  ,v7r:: ::rrv77:, ,, ,:i7rrii:::::, ir7ri7Lri
 *           ,     2OBBOi,iiir;r::        ,irriiii::,, ,iv7Luur:
 *         ,,     i78MBBi,:,:::,:,  :7FSL: ,iriii:::i::,,:rLqXv::
 *         :      iuMMP: :,:::,:ii;2GY7OBB0viiii:i:iii:i:::iJqL;::
 *        ,     ::::i   ,,,,, ::LuBBu BBBBBErii:i:i:i:i:i:i:r77ii
 *       ,       :       , ,,:::rruBZ1MBBqi, :,,,:::,::::::iiriri:
 *      ,               ,,,,::::i:  @arqiao.       ,:,, ,:::ii;i7:
 *     :,       rjujLYLi   ,,:::::,:::::::::,,   ,:i,:,,,,,::i:iii
 *     ::      BBBBBBBBB0,    ,,::: , ,:::::: ,      ,,,, ,,:::::::
 *     i,  ,  ,8BMMBBBBBBi     ,,:,,     ,,, , ,   , , , :,::ii::i::
 *     :      iZMOMOMBBM2::::::::::,,,,     ,,,,,,:,,,::::i:irr:i:::,
 *     i   ,,:;u0MBMOG1L:::i::::::  ,,,::,   ,,, ::::::i:i:iirii:i:i:
 *     :    ,iuUuuXUkFu7i:iii:i:::, :,:,: ::::::::i:i:::::iirr7iiri::
 *     :     :rk@Yizero.i:::::, ,:ii:::::::i:::::i::,::::iirrriiiri::,
 *      :      5BMBBBBBBSr:,::rv2kuii:::iii::,:i:,, , ,,:,:i@petermu.,
 *           , :r50EZ8MBBBBGOBBBZP7::::i::,:::::,: :,:,::i;rrririiii::
 *               :jujYY7LS0ujJL7r::,::i::,::::::::::::::iirirrrrrrr:ii:
 *            ,:  :@kevensun.:,:,,,::::i:i:::::,,::::::iir;ii;7v77;ii;i,
 *            ,,,     ,,:,::::::i:iiiii:i::::,, ::::iiiir@xingjief.r;7:i,
 *         , , ,,,:,,::::::::iiiiiiiiii:,:,:::::::::iiir;ri7vL77rrirri::
 *          :,, , ::::::::i:::i:::i:i::,,,,,:,::i:i:::iir;@Secbone.ii:::
 *
 * @Author: geovindu
 * @Date: 2025-05-08 21:00:52
 * @LastEditors: geovindu
 * @LastEditTime: 2025-05-08 22:47:03
 * @FilePath: \vue\vuepdfpreview\src\components\pdfjs.vue
 * @Description: geovindu
 * @lib,packpage:
 *
 * @IDE: vscode
 * @jslib: node 20 vue.js 3.0
 * @OS: windows10
 * @database: mysql 8.0  sql server 2019 postgreSQL 16
 * Copyright (c) geovindu 2025 by geovindu@163.com, All Rights Reserved.
 -->
<template>
    <div class="pdf-container">
      <div v-if="loading" class="text-center py-8">加载中...</div>
      <div v-else-if="error" class="text-center py-8 text-red-500">{{ error }}</div>
      <div v-else>
        <div class="flex justify-between items-center mb-4">
          <div class="flex space-x-2">
            <button @click="zoomIn" class="px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600">放大</button>
            <button @click="zoomOut" class="px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600">缩小</button>
            <button @click="downloadPDF" class="px-3 py-1 bg-green-500 text-white rounded hover:bg-green-600">下载文档</button>
          </div>
          <div class="text-center">
            第 {{ currentPage }} / {{ totalPages }} 页
            <button @click="prevPage" :disabled="currentPage <= 1" class="px-3 py-1 bg-gray-200 rounded hover:bg-gray-300">上一页</button>
            <button @click="nextPage" :disabled="currentPage >= totalPages" class="px-3 py-1 bg-gray-200 rounded hover:bg-gray-300">下一页</button>
          </div>
        </div>
        <div id="pdf-container" class="w-full h-[600px] border border-gray-300 overflow-auto">
          <canvas ref="pdfCanvas"></canvas>
        </div>
      </div>
    </div>
  </template>
   
  <script setup>
  import { ref, onMounted, reactive } from 'vue';
  import * as pdfjsLib from 'pdfjs-dist';
   
  // 设置 worker 路径
  pdfjsLib.GlobalWorkerOptions.workerSrc = '/pdfjs/pdf.worker.js';
   
  const props = defineProps({
    pdfUrl: { type: String, required: true }
  });
   
  const pdfCanvas = ref(null);
  const loading = ref(true);
  const error = ref('');
  const currentPage = ref(1);
  const totalPages = ref(0);
  const scale = ref(1.0);
  let pdfDoc = null;
   
  const renderPage = async (num) => {
    try {
      const page = await pdfDoc.getPage(num);
      const viewport = page.getViewport({ scale: scale.value });
   
      // 设置 canvas 尺寸
      pdfCanvas.value.width = viewport.width;
      pdfCanvas.value.height = viewport.height;
   
      // 渲染页面
      const renderContext = {
        canvasContext: pdfCanvas.value.getContext('2d'),
        viewport: viewport
      };
   
      await page.render(renderContext).promise;
      currentPage.value = num;
    } catch (err) {
      console.error('渲染页面失败:', err);
      error.value = `渲染失败: ${err.message}`;
    }
  };
   
  const prevPage = () => {
    if (currentPage.value > 1) {
      renderPage(currentPage.value - 1);
    }
  };
   
  const nextPage = () => {
    if (currentPage.value < totalPages.value) {
      renderPage(currentPage.value + 1);
    }
  };
   
  const zoomIn = () => {
    scale.value += 0.1;
    renderPage(currentPage.value);
  };
   
  const zoomOut = () => {
    if (scale.value > 0.2) {
      scale.value -= 0.1;
      renderPage(currentPage.value);
    }
  };
   
  const downloadPDF = () => {
    const link = document.createElement('a');
    link.href = props.pdfUrl;
    link.download = props.pdfUrl.split('/').pop();
    link.click();
  };
   
  onMounted(async () => {
    try {
      // 加载 PDF
      const loadingTask = pdfjsLib.getDocument(props.pdfUrl);
      pdfDoc = await loadingTask.promise;
      totalPages.value = pdfDoc.numPages;
   
      // 渲染第一页
      renderPage(1);
      loading.value = false;
    } catch (err) {
      console.error('加载 PDF 失败:', err);
      error.value = `加载失败: ${err.message}`;
      loading.value = false;
    }
  });
  </script>
   
  <style scoped>
  .pdf-container {
    max-width: 1000px;
    margin: 0 auto;
  }
   
  #pdf-container canvas {
    max-width: 100%;
    display: block;
    margin: 0 auto;
  }
  </style>

onMounted(async () => {
  try {
    // 假设props.pdfUrl现在是Base64编码的PDF字符串
    // 移除可能存在的Data URI前缀（如"data:application/pdf;base64,"）
    const base64Data = props.pdfUrl.replace(/^data:application\/pdf;base64,/, '');
    
    // 将Base64字符串转换为Uint8Array
    const binaryData = atob(base64Data);
    const arrayBuffer = new ArrayBuffer(binaryData.length);
    const uint8Array = new Uint8Array(arrayBuffer);
    
    for (let i = 0; i < binaryData.length; i++) {
      uint8Array[i] = binaryData.charCodeAt(i);
    }
    
    // 使用Uint8Array加载PDF
    const loadingTask = pdfjsLib.getDocument({ data: uint8Array });
    pdfDoc = await loadingTask.promise;
    totalPages.value = pdfDoc.numPages;
    
    // 渲染第一页
    renderPage(1);
    loading.value = false;
  } catch (err) {
    console.error('加载PDF失败:', err);
    error.value = `加载失败: ${err.message}`;
    loading.value = false;
  }
});