Reputation: 877

Save 1st page of a PDF file using JavaScript

I need to extract 1st page of an uploaded PDF file(in SharePoint Online) & save it as a separate PDF file using JavaScript.
After some searching I found this. But I'm not able to understand how it works. Please help.

Upvotes: 0

Answers (2)

Jeroen Ritmeijer

Reputation: 2792

As requested in the comment in a previous answer I am posting sample code to just get the first page in its original format, so not as a bitmap.

This uses a third party REST service that can PDF Convert, Merge, Split, Watermark, Secure and OCR files. As it is REST based, it supports loads of languages, JavaScript being one of them.

What follows is a self-contained HTML page that does not require any additional server side logic on your part. It allows a PDF file to be uploaded, splits up the PDF into individual pages and discards them all except for the first one. There are other ways to achieve the same using this service, but this is the easiest one that came to mind.

You need to create an account to get the API key, which you then need to insert in the code.

Quite a bit of the code below deals with the UI and pushing the generated PDF to the browser. Naturally you can shorten it significantly by taking all that code out.

<!DOCTYPE html>
<html>
<head>
    <title>Muhimbi API - Split action</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript">

        // ** Specify the API key associated with your subscription.
        var api_key = '';

        // ** For IE compatibility*
        // ** IE does not support 'readAsBinaryString' function for the FileReader object. Create a substitute function using 'readAsArrayBuffer' function.
        if (FileReader.prototype.readAsBinaryString === undefined) {
            FileReader.prototype.readAsBinaryString = function (file_content) {
                var binary_string = "";
                var thiswindow = this;
                var reader = new FileReader();
                reader.onload = function (e) {
                    var bytes = new Uint8Array(reader.result);
                    var length = bytes.byteLength;
                    for (var i = 0; i < length; i++) {
                        binary_string += String.fromCharCode(bytes[i]);
                    }
                    thiswindow.content = binary_string;
                    $(thiswindow).trigger('onload');
                }
                reader.readAsArrayBuffer(file_content);
            }
        }
        // ** For IE compatibility*

        // ** Create a Blob object from the base64 encoded string. 
        function CreateBlob(base64string)
        {
            var file_bytes = atob(base64string);

            var byte_numbers = new Array(file_bytes.length);
            for (var i = 0; i < file_bytes.length; i++) {
                byte_numbers[i] = file_bytes.charCodeAt(i);
            }

            var byte_array = new Uint8Array(byte_numbers);

            var file_blob = new Blob([byte_array], {type: "application/pdf"});

            return file_blob;
        }

        // ** Execute code when DOM is loaded in the browser.
        $(document).ready(function () 
        {
            //** Make sure an api key has been entered.
            if(api_key=='')
            {
                alert('Please update the sample code and enter the API Key that came with your subscription.');
            }

            // ** Attach a click event to the Convert button.
            $('#btnConvert').click(function () 
            {
                // ** Proceed only when API Key is provided.
                if(api_key=='')
                    return;

                try
                {
                    // ** Get the file object from the File control.
                    var source_file = document.getElementById('file_to_split').files[0];

                    //** Was a file uploaded?
                    if (source_file) 
                    {
                        // ** Get the file name from the uploaded file.
                        var source_file_name = source_file.name;            

                        var reader = new FileReader();

                        //** Read the file into base64 encoded string using FileReader object.
                        reader.onload = function(reader_event) 
                        {
                            var binary_string;

                            if (!reader_event) {
                                // ** For IE.
                                binary_string = reader.content;
                            }
                            else {
                                // ** For other browsers.
                                binary_string = reader_event.target.result;
                            }

                            // ** Convert binary to base64 encoded string.
                            var source_file_content = btoa(binary_string);

                            if(source_file_content)
                            {
                                // ** We need to fill out the data for the conversion operation
                                var input_data = "{";                                           
                                input_data += '"use_async_pattern": false';                                             
                                input_data += ', "fail_on_error": false';                           
                                input_data += ', "split_parameter": 1';
                                input_data += ', "file_split_type": "ByNumberOfPages"';
                                input_data += ', "source_file_name": "' + source_file_name + '"';       // ** Always pass the name of the input file with the correct file extension.
                                input_data += ', "source_file_content": "' + source_file_content + '"'; // ** Pass the content of the uploaded file, making sure it is base64 encoded.
                                input_data += '}',

                                // ** Allow cross domain request
                                jQuery.support.cors = true;

                                // ** Make API Call.

                                $.ajax(
                                {
                                    type: 'POST',

                                    // ** Set the request header with API key and content type
                                    beforeSend: function(request) 
                                    {
                                        request.setRequestHeader("Content-Type", 'application/json');
                                        request.setRequestHeader("api_key", api_key);
                                    },

                                    url: 'https://api.muhimbi.com/api/v1/operations/split_pdf',

                                    data: input_data,

                                    dataType: 'json',

                                    // ** Carry out the conversion
                                    success: function (data) 
                                    {
                                        var result_code = "";
                                        var result_details = "";
                                        var processed_file_contents = "";
                                        var base_file_name = "";

                                        // ** Read response values.
                                        $.each(data, function (key, value) 
                                        {
                                            if (key == 'result_code')
                                            {
                                                result_code = value;
                                            }
                                            else if (key == 'result_details')
                                            {
                                                result_details = value;
                                            }
                                            else if (key == 'processed_file_contents')
                                            {
                                                processed_file_contents = value;
                                            }
                                            else if (key == 'base_file_name')
                                            {
                                                base_file_name = value;
                                            }
                                        });

                                        // ** Show result code and details.
                                        $("#spnResultCode").text(result_code);
                                        $("#spnResultDetails").text(result_details);

                                        if(result_code=="Success")
                                        {
                                            // ** Get first item in the array. This is the first page in the PDF
                                            var processed_file_content = processed_file_contents[0];

                                            // ** Convert to Blob.
                                            var file_blob = CreateBlob(processed_file_content)

                                            // ** Prompt user to save or open the converted file                                                                                                            
                                            if (window.navigator.msSaveBlob) { 
                                                // ** For IE.
                                                window.navigator.msSaveOrOpenBlob(file_blob, base_file_name + "." + output_format);
                                            }
                                            else { 
                                                // ** For other browsers.
                                                // ** Create temporary hyperlink to download content.
                                                var download_link = window.document.createElement("a");
                                                download_link.href = window.URL.createObjectURL(file_blob, { type: "application/octet-stream" });
                                                download_link.download = base_file_name + ".pdf";
                                                document.body.appendChild(download_link);
                                                download_link.click();
                                                document.body.removeChild(download_link);
                                            }
                                        }
                                    },

                                    error: function (msg, url, line) 
                                    {
                                        console.log('error msg = ' + msg + ', url = ' + url + ', line = ' + line);

                                        // ** Show the error
                                        $("#spnResultCode").text("API call error.");
                                        $("#spnResultDetails").text('error msg = ' + msg + ', url = ' + url + ', line = ' + line);
                                    }
                                });
                           }
                           else
                           {
                                // ** Show the error
                                $("#spnResultCode").text("File read error.");
                                $("#spnResultDetails").text('Could not read file.');
                           }

                        };

                        reader.readAsBinaryString(source_file);
                    }
                    else
                    {
                        alert('Select file to convert.');
                    }
                }
                catch(err) 
                {
                    console.log(err.message);

                    // ** Show exception
                    $("#spnResultCode").text("Exception occurred.");
                    $("#spnResultDetails").text(err.message);
                }

           });

        });
    </script>

</head>

<body>
    <div>
        <form id="convert_form">


            Select file: <input type="file" id="file_to_split" />

            <br /><br />

            <button id="btnConvert" type="button">Split PDF</button>

            <br /><br />

            Result_Code: <span id="spnResultCode"></span>
            <br />
            Result_Details: <span id="spnResultDetails"></span>

        </form>
    </div>
</body>

</html>

Big fat disclaimer, I worked on this service, so consider me biased. Having said that, it works well and could potentially solve your problem.

Upvotes: 1

Vishnu S

Reputation: 877

Finally found a solution.
First converting the uploaded PDF to image using PDF.JS, done some customization in the sample code.
Then saved the 1st page image as PDF using jsPDF.

The customized download code,

$("#download-image").on('click', function() {

        var imgData = __CANVAS.toDataURL();
        var doc = new jsPDF();
        doc.addImage(imgData, 0, 0, 210, 300);
        doc.save('page1.pdf');
});

Upvotes: 0

Save 1st page of a PDF file using JavaScript

Answers (2)

Related Questions