pdf 点击事件openpdfInNewTab传值url
import { modifyPdf } from "./fileOperation"; // fileOperation
openpdfInNewTab(imageUrl) {
if (imageUrl.file_address.includes("?")) {
var parts = imageUrl.file_address.split("?");
var pdfUrl = parts[0];
modifyPdf(imageUrl.folder_name, pdfUrl);
} else {
const pdfUrl = imageUrl.file_address;
modifyPdf(imageUrl.folder_name, pdfUrl);
}
},
fileOperation.js
fileOperation.js
// 添加pdf水印
export async function modifyPdf(title, url) {
const existingPdfBytes = await fetch(url).then((res) =>
res.arrayBuffer()
);
const pdfDoc = await PDFDocument.load(existingPdfBytes);
const helveticaFont = await pdfDoc.embedFont(StandardFonts.Helvetica); // 只支持英文
const pages = pdfDoc.getPages();
// 线上打开
const a = Cookies.get("nameUser");
// const a = "999"
for (let i = 0; i < pages.length; i++) {
const page = pages[i];
// width
const { height } = page.getSize();
for (let i = 0; i < 6; i++) {
for (let j = 0; j < 6; j++) {
page.drawText(a, {
x: j * 100,
y: height / 5 + i * 250,
size: 30,
font: helveticaFont,
// font: customFont, // 自定义字体
color: rgb(0.01, 0.1, 0.1),
opacity: 0.2,
rotate: degrees(35),
});
}
}
}
// 序列化为字节
const pdfBytes = await pdfDoc.save();
// 预览
preView11(title, pdfBytes);
}
// 在浏览器新的标签页预览PDF
function preView11(docTitle, stream) {
const URL = window.URL || window.webkitURL;
const href = URL.createObjectURL(
new Blob([stream], { type: "application/pdf;charset=utf-8" })
);
window.open(href + "#toolbar=0");
}
图片预览 openImageViewerNo点击事件传值url
<template>
<div>
<!-- 图片放大展示 -->
<ImageViewer
:imageUrl="currentImage"
v-if="isImageViewerOpen"
@close="closeImageViewer"
/>
</div>
</template>
import ImageViewer from "./ImageViewer.vue";
data(){
return{
isImageViewerOpen: false,
currentImage: "",
}
}
methods:{
// 点击列表及图标--图片放大显示 不带水印
openImageViewerNo(imageUrl) {
if (imageUrl.file_address.includes("?")) {
var parts = imageUrl.file_address.split("?");
// 取第一个元素,即问号之前的部分
var beforeQuestionMark = parts[0];
// 输出结果
this.currentImageNo = beforeQuestionMark;
this.isImageViewerOpenNo = true;
} else {
var beforeQuestionMark = imageUrl.file_address;
// 输出结果
this.currentImageNo = beforeQuestionMark;
this.isImageViewerOpenNo = true;
}
this.getPrevew(imageUrl);
},
// 点击列表及图标--图片关闭
closeImageViewer() {
this.isImageViewerOpen = false;
this.currentImage = "";
},
}
创建一个子组件,调用子组件实现加水印预览url
ImageViewer.vue
<template>
<div class="image-viewer">
<div class="overlay" @click="closeViewer"></div>
<div class="image-container">
<img :src="watermarkedImageUrl" alt="Image" @click="closeViewer" />
<div class="watermark">{{ watermarkText }}</div>
</div>
</div>
</template>
<script>
import Cookies from "js-cookie";
export default {
props: {
imageUrl: String,
},
data() {
return {
watermarkedImageUrl: null,
};
},
mounted() {
this.addWatermarkToImage(this.imageUrl);
// console.log(this.imageUrl,"00000");
},
methods: {
closeViewer() {
this.$emit("close");
},
async addWatermarkToImage(imageUrl) {
const image = new Image();
// 线上打开
const a = Cookies.get("nameUser") //预览不需要加水印 让变量 a等于空即可
image.crossOrigin = "Anonymous"; // 允许跨域图片
image.onload = async () => {
const canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
const ctx = canvas.getContext("2d");
ctx.drawImage(image, 0, 0, image.width, image.height);
// Define watermark properties
const watermarkText = a;
const fontSize = 30;
const spacingX = 85; // Horizontal spacing between watermarks
const spacingY = 85; // Vertical spacing between watermarks
ctx.font = `${fontSize}px Arial`;
ctx.fillStyle = "rgba(30, 33, 42, 0.5)";
// Calculate the diagonal length of the watermark text
const textWidth = ctx.measureText(watermarkText).width;
const textHeight = fontSize;
const diagonalLength = Math.sqrt(
textWidth * textWidth + textHeight * textHeight
);
// Calculate the number of repetitions both horizontally and vertically
const repeatX = Math.ceil(
(image.width + diagonalLength) / (textWidth + spacingX)
);
const repeatY = Math.ceil(
(image.height + diagonalLength) / (fontSize + spacingY)
);
// Tile the watermark across the canvas
for (let i = 0; i < repeatY; i++) {
for (let j = 0; j < repeatX; j++) {
const offsetX = j * (textWidth + spacingX);
const offsetY = i * (fontSize + spacingY);
ctx.save(); // Save the current transformation matrix
ctx.translate(offsetX, offsetY); // Translate to the top-left corner of the current watermark
ctx.rotate(-Math.PI / 4); // Rotate by -45 degrees
ctx.fillText(watermarkText, 0, 0); // Draw the text at the rotated position
ctx.restore(); // Restore the transformation matrix
}
}
// Convert canvas to image URL
this.watermarkedImageUrl = canvas.toDataURL();
};
image.src = imageUrl;
},
},
};
</script>
<style scoped>
.image-viewer {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
z-index: 999;
overflow-y: auto;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
}
.image-container {
position: relative;
max-width: 80%;
max-height: 80%;
z-index: 9999;
overflow-y: auto;
display: inline-block; /* Ensures the container wraps around the image */
}
img {
max-width: 100%;
max-height: 100%;
cursor: pointer;
}
.watermark {
position: absolute;
top: 0;
left: 0;
width: 100%; /* Cover the entire width of the image */
height: 100%; /* Cover the entire height of the image */
color: rgba(121, 116, 116, 0.5); /* Adjust color and opacity as needed */
font-size: 24px; /* Adjust font size as needed */
display: flex;
align-items: center;
justify-content: center;
pointer-events: none; /* Ensure watermark doesn't interfere with clicks */
z-index: 1001; /* Ensure watermark is above the image */
}
</style>
pdf、图片下载时候加水印,下一篇