Dev: Convert Single/Multiple Image to PDF in Salesforce

Avnish Yadav

12 Mar, 2020

Image Source- here

Hello Salesforce Wizards!

This is the fun post where i will share the code that how you can create image to pdf converter using vf page.In this post, I am using Javascript FileReader API.The FileReader object lets web applications asynchronously read the contents of files (or raw data buffers) stored on the user's computer, using File or Blob objects to specify the file or data to read. For more information about FileReader object, you can read here.

Requirement : - Please download the static resource from here. Also, rember the name of the static resource be - imgTopdf

Visualforce Code :-

	<apex:page standardStylesheets="false" sidebar="false" showHeader="false">
	<apex:stylesheet value="{!URLFOR($Resource.imgTopdf, 'imgTopdf/bootstrap.min.css')}"/>
	<apex:includeScript value="{!URLFOR($Resource.imgTopdf, 'imgTopdf/jquery.min.js')}"/>
	<apex:includeScript value="{!URLFOR($Resource.imgTopdf, 'imgTopdf/bootstrap.min.js')}"/>
	<apex:includeScript value="{!URLFOR($Resource.imgTopdf, 'imgTopdf/bootbox.js')}"/>
	<apex:includeScript value="{!URLFOR($Resource.imgTopdf, 'imgTopdf/newjspdf.js')}"/>
	<apex:includeScript value="{!URLFOR($Resource.imgTopdf, 'imgTopdf/filesever.js')}"/>
	<apex:includeScript value="{!URLFOR($Resource.imgTopdf, 'imgTopdf/jspdfplugin.js')}"/>
	<apex:includeScript value="{!URLFOR($Resource.imgTopdf, 'imgTopdf/jQueryMini.js')}"/>

	<head>
	<script type="text/javascript">
	var $j = jQuery.noConflict();
	</script>
	<apex:stylesheet value="{!URLFOR($Resource.imgTopdf, 'imgTopdf/Bootstrapss.css')}"/>
	</head>

	<!-- Script to upload and convert images into pdf file -->
	<script>
	function uploadFile(){
	var pdf = new jsPDF('p', 'mm', [270, 270]);
	var images = [];
	<!--Get image file in script for to convert-->
	var files = document.getElementById('attachmentFile').files;
	if(files.length == 0){
	bootbox.alert("Please select at least one image to convert!");
	}
	var i = 0;
	for(var j=0 ; j<files.length ; j++){
	var fileToLoad = files[j];
	var fileReader = new FileReader();

	fileReader.readAsDataURL(fileToLoad);
	fileReader.onload = function(e){
	var image = new Image();
	image.src = e.target.result;
	image.onload = function (){
	<!--Change all image in jpeg format-->
	var canvas = document.createElement("canvas"),
	canvasContext = canvas.getContext("2d");
	<!--Compress large image file-->
	if(image.width > 1018 ){
	canvas.width = 1018;
	image.width =1018;
	}
	else{
	canvas.width = image.width;
	}

	if(image.height > 1018 ){
	canvas.height = 1018;
	image.height =1018;
	}
	else{
	canvas.height = image.height;
	}

	canvasContext.drawImage(image, 0, 0, image.width, image.height);
	var imgData = canvas.toDataURL("image/jpeg", 1.0);
	//var picFile = e.target.result;
	<!--Add image in pdf document-->
	pdf.addImage(imgData, 'JPEG', 0,11);
	i++;
	if(i < files.length){
	pdf.addPage();
	}
	if(i == files.length){
	pdf.save();
	bootbox.alert("Your image converted successfuly!");
	}
	};
	<!--Show error message when any error occur-->
	image.onerror = function(){
	bootbox.alert('Selected image not converted into pdf file');
	};
	};

	fileReader.onloadend = function(evt){
	};
	}
	}
	</script>
	<!-- Page block to select pdf file -->
	<body class="bg-dark text-white">

	<apex:pageBlock>
	<h1 class="text-center">
	Image to PDF Converter
	</h1>
	<br/><br/>
	<div class="alert alert-primary align-middle" role="alert">
	<apex:outputLabel value="Please select images to convert:" style="font-size: large;" /><br/><br/>
	<input type="file" id="attachmentFile" multiple="multiple" accept="image/*" class="paginationButtons" /><br/><br/>
	<button onclick="uploadFile()" Class="btn-danger" ><b>Convert Image files into PDF file</b></button><br/>
	</div>

	</apex:pageBlock>
	</body>
	</apex:page>