//--------------------------------------------------------- // REST service to add an image to a PDF document //--------------------------------------------------------- const express = require('express'); const cors = require('cors'); const bodyParser = require('body-parser'); const fs = require('fs'); const path = require('path'); const pdfLib = require('pdf-lib'); const app = express(); const port = process.env.PORT || 3000; // Middleware app.use(cors()); app.use(bodyParser.json()); // Routes app.post('/api/addImageToPDF', async function(req, res) { const { pdfPath, imagePath, outputName } = req.body; // Read PDF file const pdfData = await fs.promises.readFile(pdfPath); // Read image file const imageData = await fs.promises.readFile(imagePath); // Load PDF document const pdfDoc = await pdfLib.PDFDocument.load(pdfData); // Embed image in PDF const image = await pdfDoc.embedPng(imageData); const page = pdfDoc.getPages()[0]; const { width, height } = page.getSize(); page.drawImage(image, { x: 0, y: height - image.height, width: image.width, height: image.height, }); // Save modified PDF const outputPath = path.join(__dirname, 'modified', outputName); const modifiedPdfBytes = await pdfDoc.save(); await fs.promises.writeFile(outputPath, modifiedPdfBytes); // Send response res.json({ success: true, message: 'Image added to PDF', url: `http://localhost:${port}/api/getModifiedPDF/${outputName}` }); }); app.get('/api/getModifiedPDF/:fileName', async function(req, res) { const { fileName } = req.params; const filePath = path.join(__dirname, 'arhiviran', `${fileName}-arhivirano-${new Date().toISOString().replace(/[^\d]/g, '')}.pdf`); // Read modified PDF file const pdfData = await fs.promises.readFile(filePath); // Create blob from PDF data const blob = new Blob([pdfData], { type: 'application/pdf' }); // Set response headers res.setHeader('Content-Type', 'application/pdf'); res.setHeader('Content-Disposition', 'attachment; filename=modified.pdf'); res.setHeader('Content-Length', pdfData.length); // Send response res.send(blob); }); // Listen command app.listen(port, function() { console.log(`Server is running on port ${port}`); }); //--------------------------------------------------------- //--------------------------------------------------------- // How to call the service (client side) with a file name //--------------------------------------------------------- // Create a FormData object to send the file data var fileData = new FormData(); fileData.append('file', 'sample.pdf'); // Send the AJAX request to modify the PDF file $.ajax({ url: '/modify-pdf', method: 'POST', data: fileData, processData: false, contentType: false, success: function(data) { console.log('File modified successfully. Modified file URL:', data.url); }, error: function() { console.error('Error modifying file.'); } }); //--------------------------------------------------------- // Send the AJAX request to get the modified PDF file as a blob //--------------------------------------------------------- $.ajax({ url: '/get-modified-pdf', method: 'GET', success: function(data) { // Create a blob URL from the received blob var blobUrl = URL.createObjectURL(data); // Create an anchor element to download the file var downloadLink = $('<a>') .attr('href', blobUrl) .attr('download', 'modified.pdf') .text('Download modified PDF file'); // Add the anchor element to the page $('body').append(downloadLink); }, error: function() { console.error('Error getting modified file.'); } }); //---------------------------------------------------------
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter