时间戳

首页 > 解决方案 > 如何通过特定坐标将Base64图像添加到pdf

vue.js - 如何通过特定坐标将Base64图像添加到pdf

问题描述

我正在使用“pdfjs-dist”来构建一个 PDF 查看器来接受 Base64 响应。我正在使用“VueSignaturePad”来绘制手写签名并保存它我正在尝试通过特定坐标将其签名设置到其中。

PDF 容器代码

<v-flex id="PDF_CONTAINER" class="PDF_CONTAINER" ref="mypdf">
   <v-flex id="viewer" class="PDF_VIEWER"></v-flex>
</v-flex>

显示 PDF 方法

async getPdf(base64Res) {
    var pdfData = atob(result);
    let container = document.getElementById("PDF_CONTAINER");
    let pdfViewer = new PDFViewer({
      container: container,
    });
    let loadingTask = pdfjsLib.getDocument({ data: pdfData });
    let pdf = await loadingTask.promise;
    pdfViewer.setDocument(pdf);
    },

签名板组件

<VueSignaturePad
 id="signature"
 ref="signaturePad"
 :options="{onBegin: () => {$refs.signaturePad.resizeCanvas(); },}"
/>

另存为base64图像方法

 save() {
    const { isEmpty, data } = this.$refs.signaturePad.saveSignature();
    console.log(isEmpty);
    console.log(data);
        },

标签： vue.jspdfvuetify.jspdf-viewersignaturepad

解决方案

推荐阅读