先上效果

运用到的技术vue-pdf

setasign/fpdf

setasign/fpdi

vue-esign

前端实现

pdf封装

import pdf from "vue-pdf";

export default {

props: ['url'],

components: {

pdf

},

data() {

return {

src: "",

numPages: undefined

};

},

watch: {

numPages: function(){

this.$nextTick(() => {

console.log('success')

})

}

},

mounted() {

this.src = pdf.createLoadingTask(this.url);

this.src.promise.then(pdf => {

this.numPages = pdf.numPages;

this.$emit('closeLoadding', false)

});

}

};

使用 + 签名

import vueEsign from "vue-esign";

import { Message } from 'element-ui';

import { contractSign } from "@/api/web";

import Pdf from "@/components/Pdf/Index"

export default {

components: { Pdf, vueEsign },

props: ['showNext', 'contract_pdf_url'],

data() {

return {

title: "Talk 100",

trno: "TRCN-0007776669",

src: null,

numPages: 6,

isCrop: false,

positionX: 0,

positionY: 0,

lineColor: "#000000",

bgColor: "",

lineWidth: 6,

signatureImg: "",

loadding: true

};

},

methods: {

confirm() {

this.$refs.signature

.generate()

.then(res => {

this.signatureImg = res

this.$refs.signature.reset();

this.$emit('update:showNext', 1)

})

.catch(err => {

Message.error(err)

});

},

restore() {

this.$refs.signature.reset();

this.showNext = false

},

savePdf() {

return new Promise((resolve) => {

contractSign({sign: localStorage.getItem('sign'), img: this.signatureImg}).then( r => {

if( r.code == 200) {

resolve()

}

})

})

},

/**

* 控制整个页面的显示

*/

closeLoadding(isShowLoadding) {

this.loadding = isShowLoadding

}

}

};

html {

font-size: 20px;

}

body {

font-size: 16px;

}

.header {

h2 {

width: 100%;

text-align: center;

}

.no {

float: right;

margin-right: 2rem;

clear: both;

}

.prompt {

color: #33363b;

}

}

.pdfContainer {

.pdf {

position: relative;

margin-top: 3rem;

margin-left: 20%;

span {

display: block;

width: 60% !important;

left: 5rem;

}

img {

width: 400px;

height: 120px;

position: absolute;

right: 150px;

bottom: 50px;

}

}

.signature {

border: 1px solid springgreen;

width: 80%;

margin: 0px auto;

canvas {

width: 100%;

}

.el-divider--horizontal{

margin: 24px 0 0 0;

}

}

}

前端主要进行pdf渲染到页面中，然后我们通过组件vue-esign得到一个签字画版，当签字确认后，我们可以通过方法generate()来得到一张签名图，由此我们将图片添加dom节点导pdf中

同时进行将图片传递给后端

后端实现

核心方法如下public function contractPdf($sign_img, $user_id, $app_id)

{

# 处理上传的图片

# 企业合同地址

$train = (new CorpService())->getTrain($app_id, $user_id);

$pdf_path = $this->createContractPdf(Arr::get($train, 'contract_path'));

$file = str_replace('data:image/png;base64,', '', $sign_img);

$file = base64_decode($file);

$filename = storage_path("temp/" . Str::random(40) . '.' . "png");

file_put_contents($filename, $file);

# 保存pdf

$pdf = new Fpdi();

$pageCount = $pdf->setSourceFile($pdf_path);

for ($pageNo = 1; $pageNo <= $pageCount; $pageNo++){

$templateId = $pdf->importPage($pageNo);

$size = $pdf->getTemplateSize($templateId);

if ($size['width'] > $size['height']){

$pdf->AddPage('L', array($size['width'], $size['height']));

}else {

$pdf->AddPage('P', array($size['width'], $size['height']));

}

$pdf->useTemplate($templateId);

if($pageNo == $pageCount) {

$w = $size['width']/5;

$h = $size['height']/5;

$center_x = $w * 3.5; $center_y = $h * 4;

$pdf->image($filename, $center_x, $center_y, 80);//中间水印

}

}

$end_path = "contract/$user_id.pdf";

$pdf->Output('F',storage_path("$end_path"),false);

# 删除临时文件

Storage::delete($filename);

return $end_path;

}

将签字后的图片进行保存写入pdf中，完成整个操作链

本文由 邓尘锋 创作，采用 知识共享署名4.0 国际许可协议进行许可

本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名

最后编辑时间为: Mar 22, 2021 at 04:47 pm