Add Text to Existing PDF (jQuery) - JavaScript
PDF Add Text, Signatures and Images to PDF sample in JavaScript demonstrating ‘Add Text to Existing PDF (jQuery)’
addTextToPDF.js
// Visit Knowledgebase for adding Text Macros to PDF
// https://apidocs.pdf.co/kb/Fill%20PDF%20and%20Add%20Text%20or%20Images%20(pdf-edit-add)/macros
$(document).ready(function () {
$("#resultBlock").hide();
$("#errorBlock").hide();
$("#result").attr("href", '').html('');
});
$(document).on("click", "#submit", function () {
$("#resultBlock").hide();
$("#errorBlock").hide();
$("#inlineOutput").text(''); // inline output div
$("#status").text(''); // status div
var apiKey = $("#apiKey").val().trim(); //Get your API key at https://app.pdf.co
var inputText = $("#inputText").val();
var fontName = $("#fontName").val();
var fontSize = $("#fontSize").val();
var fontColor = $("#fontColor").val();
var destinationXCoordinate = $("#destinationXCoordinate").val();
var destinationYCoordinate = $("#destinationYCoordinate").val();
var formData = $("#SourceFile")[0].files[0]; // file to upload
$("#status").html('Getting presigned url... <img src="ajax-loader.gif" />');
$.ajax({
url: 'https://api.pdf.co/v1/file/upload/get-presigned-url?name=test.pdf&contenttype=application/pdf&encrypt=true',
type: 'GET',
headers: { 'x-api-key': apiKey }, // passing our api key
success: function (result) {
if (result['error'] === false) {
console.log(result);
var presignedUrl = result['presignedUrl']; // reading provided presigned url to put our content into
var uploadedUrl = result['url']; // Uploaded URL
$("#status").html('Uploading... <img src="ajax-loader.gif" />');
$.ajax({
url: presignedUrl, // no api key is required to upload file
type: 'PUT',
headers: { 'content-type': 'application/pdf' }, // setting to pdf type as we are uploading pdf file
data: formData,
processData: false,
success: function (result) {
// Request Url
var cUrl = 'https://api.pdf.co/v1/pdf/edit/add';
// Input Data
var data = {
name: 'result.pdf',
url: uploadedUrl,
annotations: [{
x: destinationXCoordinate,
y: destinationYCoordinate,
text: inputText,
fontname: fontName,
size: fontSize,
color: fontColor
}]
};
$("#status").html('Processing... <img src="ajax-loader.gif" />');
$.ajax({
url: cUrl,
type: 'POST',
headers: { 'x-api-key': apiKey, 'Content-Type': 'application/json' },
processData: false,
contentType: false,
data: JSON.stringify(data),
success: function (result) {
$("#status").text('done processing.');
if (result.error) {
$("#errorBlock").show();
$("#errors").text(result.message);
} else {
$("#resultBlock").show();
$("#inlineOutput").text(JSON.stringify(result));
$("#iframeResultPdf").prop("src", result.url);
}
}
});
},
error: function () {
$("#status").text('error');
}
});
}
}
});
});
sample.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Cloud API JQuery sample</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="addTextToPDF.js" type="text/javascript" encoding="UTF-8"></script>
</head>
<body>
<form id="form" enctype="multipart/form-data">
<p>
<label>Copy-paste your API Key for ByteScout Cloud API here</label>
<input type="text" id="apiKey" placeholder="your cloud API Key" value=""/>
<a href="https://apidocs.pdf.co" target="_blank">no api key yet? sign up here</a>
</p>
<p>
<label>Source PDF File Url</label>
<input type="file" id="SourceFile" placeholder="Upload Source File" />
</p>
<p>
<label>Text</label>
<input type="text" id="inputText" placeholder="Input Text" value="APPROVED" />
</p>
<p>
<label>Font Name</label>
<input type="text" id="fontName" placeholder="Font Name" value="Times New Roman" />
</p>
<p>
<label>Font Size</label>
<input type="text" id="fontSize" placeholder="Font Size" value="24" />
</p>
<p>
<label>Color</label>
<input type="text" id="fontColor" placeholder="Color" value="FF0000" />
</p>
<p>
<label>Destination Co-ordinates - </label>
<b>X: </b> <input type="text" id="destinationXCoordinate" value="400" />
<b>Y: </b> <input type="text" id="destinationYCoordinate" value="600" />
</p>
<p>
<label>Destination Image Size - </label>
<b>Height: </b> <input type="text" id="destinationHeight" value="32" />
<b>Width: </b> <input type="text" id="destinationWidth" value="119" />
</p>
<button type="button" id="submit">Convert</button> <span id="status"></span>
</form>
<div id="errorBlock">
<h2>Error:</h2>
<h4>Code: <span id="statusCode"></span></h4>
<ul id="errors"></ul>
</div>
<div id="resultBlock">
<h2>Output:</h2>
<pre id="inlineOutput"></pre><br/>
<iframe id="iframeResultPdf" src="" width="100%" height="500px"></iframe>
</div>
</body>
</html>
PDF.co Web API: the Web API with a set of tools for documents manipulation, data conversion, data extraction, splitting and merging of documents. Includes image recognition, built-in OCR, barcode generation and barcode decoders to decode bar codes from scans, pictures and pdf.
Download Source Code (.zip)
return to the previous page explore PDF Add Text, Signatures and Images to PDF endpoint
Copyright © 2016 - 2023 PDF.co