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;
}
});
