How to Add a Signature to a PDF Using Vue.js

npm install -g @vue/cli

yarn global add @vue/cli

vue --version

vue create pspdfkit-signature-project

cd pspdfkit-signature-project

npm install pspdfkit

mkdir -p public/js

cp -R ./node_modules/pspdfkit/dist/pspdfkit-lib public/js/pspdfkit-lib

<template>
  <div class="pdf-container"></div>
</template>

<script>
import PSPDFKit from "pspdfkit";

/**
 * PSPDFKit for Web example component.
 */
export default {
  name: 'PSPDFKit',
  props: {
    pdfFile: {
      type: String,
      required: true,
    },
  },
  mounted() {
    this.loadPSPDFKit().then((instance) => {
      this.$emit("loaded", instance);
    });
  },
  watch: {
    pdfFile(val) {
      if (val) {
        this.loadPSPDFKit();
      }
    },
  },
  methods: {
    async loadPSPDFKit() {
      PSPDFKit.unload(".pdf-container");
      return PSPDFKit.load({
        document: this.pdfFile,
        container: ".pdf-container",
      });
    },
  },
  beforeUnmount() {
    PSPDFKit.unload(".pdf-container");
  },
};
</script>

<style scoped>
.pdf-container {
  height: 100vh;
}
</style>

<template>
  <div id="app">
    <label for="file-upload" class="custom-file-upload">
      Open PDF
    </label>
    <input id="file-upload" type="file" @change="openDocument" class="btn" />
    <PSPDFKitContainer :pdfFile="pdfFile" @loaded="handleLoaded" />
  </div>
</template>

<script>
import PSPDFKitContainer from "@/components/PSPDFKitContainer";

export default {
  data() {
    return {
      pdfFile: this.pdfFile || "/document.pdf",
    };
  },
  components: {
    PSPDFKitContainer,
  },
  methods: {
    handleLoaded(instance) {
      console.log("PSPDFKit has loaded: ", instance);
      // Do something.
    },
    openDocument(event) {
      if (this.pdfFile && this.pdfFile.startsWith('blob:')) {
        window.URL.revokeObjectURL(this.pdfFile);
      }
      this.pdfFile = window.URL.createObjectURL(event.target.files[0]);
    },
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
}

body {
  margin: 0;
}

input[type="file"] {
  display: none;
}

.custom-file-upload {
  border: 1px solid #ccc;
  border-radius: 4px;
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
  background: #4A8FED;
  padding: 10px;
  color: #fff;
  font: inherit;
  font-size: 16px;
  font-weight: bold;
}
</style>

npm serve

openssl pkcs7 -noout -text -print_certs -in example.p7b

yarn add node-forge

npm install node-forge

<script>
import PSPDFKit from 'pspdfkit';
import forge from 'node-forge';

export default {
	name: 'PSPDFKitContainer',
	props: {
		pdfFile: {
			type: String,
			required: true,
		},
	},
	data() {
		return {
			instance: null,
		};
	},
	mounted() {
		this.loadPSPDFKit().then((instance) => {
			this.$emit('loaded', instance);
			this.instance = instance; // Save the instance for later use.
		});
	},
	watch: {
		pdfFile(val) {
			if (val) {
				this.loadPSPDFKit();
			}
		},
	},
	methods: {
		async loadPSPDFKit() {
			PSPDFKit.unload('.pdf-container');
			return PSPDFKit.load({
				document: this.pdfFile,
				container: '.pdf-container',
			});
		},
		generatePKCS7({ fileContents }) {
			const certificatePromise = fetch(
				'certs/certificate.pem',
			).then((response) => response.text());
			const privateKeyPromise = fetch(
				'certs/private-key.pem',
			).then((response) => response.text());

			return new Promise((resolve, reject) => {
				Promise.all([certificatePromise, privateKeyPromise])
					.then(([certificatePem, privateKeyPem]) => {
						const certificate = forge.pki.certificateFromPem(
							certificatePem,
						);
						const privateKey = forge.pki.privateKeyFromPem(
							privateKeyPem,
						);

						const p7 = forge.pkcs7.createSignedData();
						p7.content = new forge.util.ByteBuffer(fileContents);
						p7.addCertificate(certificate);
						p7.addSigner({
							key: privateKey,
							certificate: certificate,
							digestAlgorithm: forge.pki.oids.sha256,
							authenticatedAttributes: [
								{
									type: forge.pki.oids.contentType,
									value: forge.pki.oids.data,
								},
								{ type: forge.pki.oids.messageDigest },
								{
									type: forge.pki.oids.signingTime,
									value: new Date(),
								},
							],
						});

						p7.sign({ detached: true });
						const result = this.stringToArrayBuffer(
							forge.asn1.toDer(p7.toAsn1()).getBytes(),
						);
						resolve(result);
					})
					.catch(reject);
			});
		},
		stringToArrayBuffer(binaryString) {
			const buffer = new ArrayBuffer(binaryString.length);
			let bufferView = new Uint8Array(buffer);
			for (let i = 0, len = binaryString.length; i < len; i++) {
				bufferView[i] = binaryString.charCodeAt(i);
			}
			return buffer;
		},
	},
	beforeUnmount() {
		PSPDFKit.unload('.pdf-container');
	},
};
</script>

<template>
	<div id="app">
		<label for="file-upload" class="custom-file-upload">
			Open PDF
		</label>
		<input
			id="file-upload"
			type="file"
			@change="openDocument"
			class="btn"
		/>

		<!-- Step: Add the "Sign Document" button -->
		<button @click="signDocument">Sign Document</button>

		<!-- Use ref to reference the PSPDFKitContainer component -->
		<PSPDFKitContainer
			ref="pdfContainer"
			:pdfFile="pdfFile"
			@loaded="handleLoaded"
		/>
	</div>
</template>

<script>
import PSPDFKitContainer from '@/components/PSPDFKitContainer';

export default {
	data() {
		return {
			pdfFile: this.pdfFile || '/document.pdf',
			instance: null, // Add instance to manage PSPDFKit instance.
		};
	},
	components: {
		PSPDFKitContainer,
	},
	methods: {
		handleLoaded(instance) {
			console.log('PSPDFKit has loaded: ', instance);
			this.instance = instance; // Save the instance for later use.
		},
		openDocument(event) {
			if (this.pdfFile && this.pdfFile.startsWith('blob:')) {
				window.URL.revokeObjectURL(this.pdfFile);
			}
			this.pdfFile = window.URL.createObjectURL(
				event.target.files[0],
			);
		},
		signDocument() {
			// Access the `PSPDFKitContainer` instance via `$refs`.
			const pdfContainer = this.$refs.pdfContainer;

			if (this.instance && pdfContainer) {
				this.instance
					.signDocument(null, pdfContainer.generatePKCS7) // Access the method in `PSPDFKitContainer`.
					.then(() => {
						console.log('Document signed.');
					})
					.catch((error) => {
						console.error(
							'The document could not be signed.',
							error,
						);
					});
			} else {
				console.error('PSPDFKit instance is not loaded.');
			}
		},
	},
};
</script>

<style>
#app {
	font-family: Avenir, Helvetica, Arial, sans-serif;
	text-align: center;
	color: #2c3e50;
}

body {
	margin: 0;
}

input[type='file'] {
	display: none;
}

.custom-file-upload {
	border: 1px solid #ccc;
	border-radius: 4px;
	display: inline-block;
	padding: 6px 12px;
	cursor: pointer;
	background: #4a8fed;
	padding: 10px;
	color: #fff;
	font: inherit;
	font-size: 16px;
	font-weight: bold;
}

button {
	margin-top: 20px;
	padding: 10px 20px;
	background-color: #4a8fed;
	color: white;
	border: none;
	cursor: pointer;
	font-size: 16px;
}
</style>

npm run serve