vue3预览pdf可旋转并拖拽盖章任意位置生成新文件

皓日当空 發表於 2025-7-1 17:07:00

vue3预览pdf可旋转并拖拽盖章任意位置生成新文件

对pdf旋转、拖拽公章或其他图片到pdf任意位置，生成一个新的pdf进行下载
网上搜了一下代码量都挺大的，这里自己来实现一个吧！
涉及到的技术栈：pdfjs-dist、pdf-lib、vueuse
<div class="cnblogs_code">
<pre><script setup>
import { ref, onMounted, computed } from 'vue';
import * as pdfjsLib from 'pdfjs-dist/build/pdf';
import { useDraggable } from '@vueuse/core';
import { PDFDocument,degrees} from 'pdf-lib';
import img2 from '@/assets/222.jpg';

// 这里的文件从node_modules/pdfjs-dist/build/目录下复制到public目录下
pdfjsLib.GlobalWorkerOptions.workerSrc = `./pdf.worker.mjs`;

const pdfCanvases = ref([]);
const pageCount = ref(0);
const pdfCanvasContainer = ref(null);
const rotation = ref(0); // 添加旋转角度变量

const imgRef = ref(null);
const pdfWidth = ref(0);
const pdfHeight = ref(0);
const pdfTotalHeight = ref(0);

const myImage = ref(null);
const imageWidth = ref(0);
const imageHeight = ref(0);

// 存储初始位置
const initialX = ref(0);
const initialY = ref(0);
// 最后停留的位置
const finalX = ref(0);
const finalY = ref(0);

const getImageSize = () => {
if (myImage.value) {
imageWidth.value = myImage.value.naturalWidth;
imageHeight.value = myImage.value.naturalHeight;
}
};

const { x, y, style } = useDraggable(imgRef);

// 计算考虑滚动偏移后的样式
const draggableStyle = computed(() => {
let newX = x.value + window.scrollX;
let newY = y.value + window.scrollY;

// 边界检查，直接限制在 PDF 边界内
newX = Math.max(0, Math.min(newX, pdfWidth.value));
newY = Math.max(0, Math.min(newY, pdfTotalHeight.value));
if (newX + imageWidth.value >= pdfWidth.value) {
newX = pdfWidth.value - imageWidth.value;
}
if (newY + imageHeight.value >= pdfTotalHeight.value) {
newY = pdfTotalHeight.value - imageHeight.value;
}
finalX.value = newX;
finalY.value = newY;

return {
transform: `translate(${newX}px, ${newY}px)`,
};
});

onMounted(() => {
loadPdf('download.pdf');

// 获取初始位置
initialX.value = x.value;
initialY.value = y.value;
});

const loadPdf = async (url) => {
try {
// 清除旧的 canvas
if (pdfCanvasContainer.value) {
 while (pdfCanvasContainer.value.firstChild) {
 pdfCanvasContainer.value.removeChild(pdfCanvasContainer.value.firstChild);
 }
}

const loadingTask = pdfjsLib.getDocument(url);
const pdf = await loadingTask.promise;
pageCount.value = pdf.numPages;

// 清空画布数组
 pdfCanvases.value = [];

for (let pageNumber = 1; pageNumber <= pdf.numPages; pageNumber++) {
 const page = await pdf.getPage(pageNumber);
 const scale = 1;
 let viewport = page.getViewport({ scale });

 // 应用旋转
 viewport = page.getViewport({ scale, rotation: rotation.value });

 const canvas = document.createElement('canvas'); // 直接创建 canvas 元素
 canvas.height = viewport.height;
 canvas.width = viewport.width;
 pdfCanvases.value.push(canvas); // 将创建的 canvas 添加到数组中

 const context = canvas.getContext('2d');

 const renderContext = {
 canvasContext: context,
 viewport,
 };
 await page.render(renderContext).promise;
 // 获取第一页的尺寸作为 PDF 预览区域的尺寸
 if (pageNumber === 1) {
 pdfWidth.value = viewport.width;
 pdfHeight.value = viewport.height;
 pdfTotalHeight.value = viewport.height * pdf.numPages;
 }
}
// 将动态创建的 canvas 添加到模板中
if (pdfCanvasContainer.value) {
 pdfCanvases.value.forEach((canvas) => {
 pdfCanvasContainer.value.appendChild(canvas);
 });
}
} catch (error) {
console.error('Error loading PDF:', error);
}
};

// 恢复初始位置
const resetPosition = () => {
x.value = initialX.value;
y.value = initialY.value;
};

const generatePdf = async () => {
try {
const pdfBytes = await fetch('download.pdf').then((res) => res.arrayBuffer());
const pdfDoc = await PDFDocument.load(pdfBytes);
const imageBytes = await fetch(img2).then((res) => res.arrayBuffer());
// 检测 MIME 类型
 const mimeType = await detectMimeType(imageBytes);
let image;

if (mimeType === 'image/jpeg') {
 image = await pdfDoc.embedJpg(imageBytes);
} else if (mimeType === 'image/png') {
 image = await pdfDoc.embedPng(imageBytes);
} else {
 console.error('Unsupported image format.');
 return;
}

const pages = pdfDoc.getPages();
const firstPage = pages; // 将图片添加到第一页，你可以根据需要修改

pages.forEach(page=>{
 page.setRotation(degrees(rotation.value));
})

// 计算图片相对于当前页面的 y 坐标
 const pageY = finalY.value % pdfHeight.value;

firstPage.drawImage(image, {
 x: rotation.value === 90?(firstPage.getHeight() - pageY - imageHeight.value):finalX.value,
 y: rotation.value === 90?finalX.value:firstPage.getHeight() - pageY - imageHeight.value, // 注意：pdf-lib 的坐标系原点在左下角
 width: imageWidth.value,
 height: imageHeight.value,
});

const modifiedPdfBytes = await pdfDoc.save();
const blob = new Blob(, { type: 'application/pdf' });
const link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = 'merged.pdf';
link.click();
} catch (error) {
console.error('Error generating PDF:', error);
}
};

// 检测 MIME 类型的辅助函数
const detectMimeType = (arrayBuffer) => {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = () => {
 const uint8Array = new Uint8Array(reader.result);
 let mimeType = '';

 if (uint8Array[0] === 0xff && uint8Array[1] === 0xd8 && uint8Array[2] === 0xff) {
 mimeType = 'image/jpeg';
 } else if (
 uint8Array[0] === 0x89 &&
 uint8Array[1] === 0x50 &&
 uint8Array[2] === 0x4e &&
 uint8Array[3] === 0x47
 ) {
 mimeType = 'image/png';
 } else {
 mimeType = 'unknown';
 }

 resolve(mimeType);
};
reader.onerror = reject;

// 将 ArrayBuffer 转换为 Blob
 const blob = new Blob();
reader.readAsArrayBuffer(blob);
});
};

const rota = ()=>{
loadPdf('download.pdf');
}
</script>

<template>
<div>
<div style="position: absolute;left: 50px">
 <div>
 {{ style }}
 </div>
 <div>
 <button @click="resetPosition">恢复初始位置</button>
 <button @click="generatePdf">生成 PDF</button>
 </div>
 <div>
 <label>旋转角度：</label>
 <input type="number" v-model.number="rotation" step="90" />
 <button @click="rota">转换</button>
 </div>
</div>
<div style="position: absolute" ref="imgRef" :style="draggableStyle">
 <img ref="myImage" src="@/assets/222.jpg" alt="静态图片" @load="getImageSize" />
</div>

<div ref="pdfCanvasContainer"></div>
</div>
</template>

<style scoped></style></pre>
</div> 
来源：https://www.cnblogs.com/sy-zl/p/18959943

頁: [1]

琼殿技术论坛's Archiver

vue3预览pdf可旋转并拖拽盖章任意位置生成新文件