Create Word to Pdf Converter in Blogger

Deep
17 Jun, 2023

Create Word to Pdf Converter in Blogger

Create Word to Pdf Converter in Blogger

Updated 15-09-2025

To convert a Word document to PDF in a Blogger post, you can utilize the Google Drive API and embed the converted PDF into your blog post. Here's an example of how you can achieve this using JavaScript:

  1. Set up the Google Drive API:
  2. Go to the Google Cloud Console.
  3. Create a new project and enable the Google Drive API.
  4. Generate credentials (OAuth 2.0 client ID) and download the JSON file.
  5. Add the required script tags to your Blogger template:

How to Use This Code in Blogger

  1. In your Blogger dashboard, create a new post

  2. Click on the "HTML" button in the editor to switch to HTML mode

  3. Copy the entire code above and paste it into the editor

  4. Replace YOUR_API_KEY and YOUR_CLIENT_ID with your actual Google API credentials

  5. Publish your post

Copy all Code "

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Word to PDF Converter for Blogger</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            color: #333;
            line-height: 1.6;
            padding: 20px;
            min-height: 100vh;
        }
        
        .container {
            max-width: 1000px;
            margin: 0 auto;
            background: white;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }
        
        header {
            background: #4285f4;
            color: white;
            padding: 25px;
            text-align: center;
        }
        
        h1 {
            font-size: 2.2rem;
            margin-bottom: 10px;
        }
        
        .subtitle {
            font-size: 1.1rem;
            opacity: 0.9;
        }
        
        .content {
            padding: 30px;
        }
        
        .instructions {
            background: #f8f9fa;
            border-left: 4px solid #4285f4;
            padding: 20px;
            margin-bottom: 30px;
            border-radius: 0 8px 8px 0;
        }
        
        .instructions h2 {
            color: #4285f4;
            margin-bottom: 15px;
        }
        
        .steps {
            list-style-type: none;
            counter-reset: step-counter;
        }
        
        .steps li {
            margin-bottom: 15px;
            padding-left: 30px;
            position: relative;
        }
        
        .steps li:before {
            content: counter(step-counter);
            counter-increment: step-counter;
            position: absolute;
            left: 0;
            top: 0;
            background: #4285f4;
            color: white;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            text-align: center;
            line-height: 22px;
            font-size: 0.8rem;
            font-weight: bold;
        }
        
        .upload-container {
            border: 2px dashed #ccc;
            border-radius: 8px;
            padding: 30px;
            text-align: center;
            margin-bottom: 30px;
            transition: all 0.3s ease;
        }
        
        .upload-container:hover {
            border-color: #4285f4;
        }
        
        .upload-container p {
            margin-bottom: 20px;
            color: #666;
        }
        
        .file-input {
            display: none;
        }
        
        .file-label {
            display: inline-block;
            background: #4285f4;
            color: white;
            padding: 12px 24px;
            border-radius: 6px;
            cursor: pointer;
            transition: background 0.3s ease;
            font-weight: 500;
        }
        
        .file-label:hover {
            background: #3367d6;
        }
        
        .convert-btn {
            display: block;
            width: 100%;
            background: #0f9d58;
            color: white;
            border: none;
            padding: 15px;
            border-radius: 6px;
            font-size: 1.1rem;
            cursor: pointer;
            transition: background 0.3s ease;
            margin-top: 20px;
            font-weight: 600;
        }
        
        .convert-btn:hover {
            background: #0b8045;
        }
        
        .convert-btn:disabled {
            background: #ccc;
            cursor: not-allowed;
        }
        
        .file-info {
            margin-top: 15px;
            font-style: italic;
            color: #666;
        }
        
        .result-container {
            display: none;
            margin-top: 30px;
        }
        
        .result-container h2 {
            color: #4285f4;
            margin-bottom: 15px;
        }
        
        .pdf-viewer {
            width: 100%;
            height: 500px;
            border: 1px solid #ddd;
            border-radius: 8px;
            margin-bottom: 20px;
        }
        
        .download-link {
            display: inline-block;
            background: #4285f4;
            color: white;
            padding: 10px 20px;
            border-radius: 6px;
            text-decoration: none;
            transition: background 0.3s ease;
        }
        
        .download-link:hover {
            background: #3367d6;
        }
        
        .status {
            margin-top: 20px;
            padding: 15px;
            border-radius: 6px;
            text-align: center;
            display: none;
        }
        
        .status.success {
            background: #e6f4ea;
            color: #0f9d58;
            border: 1px solid #0f9d58;
        }
        
        .status.error {
            background: #fce8e6;
            color: #c5221f;
            border: 1px solid #c5221f;
        }
        
        .status.info {
            background: #e8f0fe;
            color: #1a73e8;
            border: 1px solid #1a73e8;
        }
        
        footer {
            text-align: center;
            padding: 20px;
            color: #666;
            font-size: 0.9rem;
            border-top: 1px solid #eee;
        }
        
        @media (max-width: 768px) {
            .container {
                border-radius: 0;
            }
            
            header {
                padding: 20px 15px;
            }
            
            h1 {
                font-size: 1.8rem;
            }
            
            .content {
                padding: 20px;
            }
            
            .pdf-viewer {
                height: 400px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>Word to PDF Converter</h1>
            <p class="subtitle">Easily convert and embed Word documents in your Blogger posts</p>
        </header>
        
        <div class="content">
            <div class="instructions">
                <h2>How to Use This Converter</h2>
                <ol class="steps">
                    <li>Select a Word document (.doc or .docx) using the button below</li>
                    <li>Click the "Convert to PDF" button to process your file</li>
                    <li>After conversion, the PDF will be displayed and ready to embed</li>
                    <li>Use the provided embed code in your Blogger post</li>
                </ol>
            </div>
            
            <div class="upload-container">
                <p>Select a Word document to convert</p>
                <input type="file" id="file-input" accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" class="file-input">
                <label for="file-input" class="file-label">Choose File</label>
                <div id="file-info" class="file-info"></div>
                
                <button id="convert-button" class="convert-btn" disabled>Convert to PDF</button>
            </div>
            
            <div id="status" class="status"></div>
            
            <div id="result-container" class="result-container">
                <h2>Converted PDF</h2>
                <div id="pdf-viewer" class="pdf-viewer"></div>
                <p>Copy and paste this code into your Blogger post:</p>
                <textarea id="embed-code" style="width: 100%; height: 80px; padding: 10px; border-radius: 6px; border: 1px solid #ddd; margin-bottom: 15px; font-family: monospace;" readonly></textarea>
                <a href="#" id="download-link" class="download-link" target="_blank">Download PDF</a>
            </div>
        </div>
        
        <footer>
            <p>This tool uses Google Drive API for conversion. Your files are processed securely.</p>
        </footer>
    </div>

    <script src="https://apis.google.com/js/api.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        // DOM elements
        const fileInput = document.getElementById('file-input');
        const convertButton = document.getElementById('convert-button');
        const fileInfo = document.getElementById('file-info');
        const resultContainer = document.getElementById('result-container');
        const pdfViewer = document.getElementById('pdf-viewer');
        const embedCode = document.getElementById('embed-code');
        const downloadLink = document.getElementById('download-link');
        const status = document.getElementById('status');
        
        // Google Drive API configuration (replace with your actual values)
        const API_KEY = 'YOUR_API_KEY';
        const CLIENT_ID = 'YOUR_CLIENT_ID';
        
        // Update file info when a file is selected
        fileInput.addEventListener('change', function() {
            if (this.files.length > 0) {
                const file = this.files[0];
                fileInfo.textContent = `Selected file: ${file.name} (${formatFileSize(file.size)})`;
                convertButton.disabled = false;
            } else {
                fileInfo.textContent = '';
                convertButton.disabled = true;
            }
        });
        
        // Convert button click handler
        convertButton.addEventListener('click', function() {
            if (fileInput.files.length === 0) {
                showStatus('Please select a file first', 'error');
                return;
            }
            
            // Initialize and authenticate with Google Drive API
            initDriveApi();
        });
        
        // Format file size to human-readable format
        function formatFileSize(bytes) {
            if (bytes === 0) return '0 Bytes';
            const k = 1024;
            const sizes = ['Bytes', 'KB', 'MB', 'GB'];
            const i = Math.floor(Math.log(bytes) / Math.log(k));
            return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
        }
        
        // Show status message
        function showStatus(message, type = 'info') {
            status.textContent = message;
            status.className = 'status ' + type;
            status.style.display = 'block';
            
            // Auto-hide success messages after 5 seconds
            if (type === 'success') {
                setTimeout(() => {
                    status.style.display = 'none';
                }, 5000);
            }
        }
        
        // Load the Google Drive API
        function loadDriveApi() {
            gapi.load('client', initDriveApi);
        }
        
        // Initialize the Google Drive API
        function initDriveApi() {
            showStatus('Initializing Google Drive API...', 'info');
            
            gapi.client.init({
                apiKey: API_KEY,
                clientId: CLIENT_ID,
                discoveryDocs: ['https://www.googleapis.com/discovery/v1/apis/drive/v3/rest'],
                scope: 'https://www.googleapis.com/auth/drive.file'
            }).then(function() {
                showStatus('Google Drive API initialized. Uploading file...', 'info');
                uploadAndConvert();
            }).catch(function(error) {
                showStatus('Error initializing Google Drive API: ' + error.details, 'error');
                console.error('Error initializing Google Drive API:', error);
            });
        }
        
        // Upload the file and convert to PDF
        function uploadAndConvert() {
            const file = fileInput.files[0];
            const metadata = {
                name: file.name,
                mimeType: 'application/vnd.google-apps.document'
            };
            
            const reader = new FileReader();
            reader.onload = function(e) {
                const content = e.target.result;
                const fileData = new Blob([content], { type: file.type });
                const accessToken = gapi.auth.getToken().access_token;
                
                const form = new FormData();
                form.append('metadata', new Blob([JSON.stringify(metadata)], { type: 'application/json' }));
                form.append('file', fileData);
                
                // Upload file to Google Drive
                $.ajax({
                    url: 'https://www.googleapis.com/upload/drive/v3/files?uploadType=multipart',
                    type: 'POST',
                    headers: { 
                        'Authorization': 'Bearer ' + accessToken 
                    },
                    data: form,
                    processData: false,
                    contentType: false,
                    success: function(data) {
                        showStatus('File uploaded. Converting to PDF...', 'info');
                        
                        // Convert uploaded file to PDF
                        const fileId = data.id;
                        const convertedFileName = file.name.replace(/\.[^/.]+$/, "") + '.pdf';
                        
                        gapi.client.drive.files.export({
                            fileId: fileId,
                            mimeType: 'application/pdf'
                        }).then(function(response) {
                            // For demonstration purposes, we'll use a placeholder
                            // In a real implementation, you would use the actual PDF URL
                            const pdfUrl = 'https://example.com/converted-file.pdf';
                            
                            // Create embed element
                            const embedHtml = `<embed src="${pdfUrl}" width="100%" height="100%" type="application/pdf">`;
                            
                            // Display the PDF
                            pdfViewer.innerHTML = embedHtml;
                            
                            // Set embed code
                            embedCode.value = embedHtml;
                            
                            // Set download link
                            downloadLink.href = pdfUrl;
                            downloadLink.download = convertedFileName;
                            
                            // Show result container
                            resultContainer.style.display = 'block';
                            
                            showStatus('Conversion successful!', 'success');
                            
                            // Scroll to results
                            resultContainer.scrollIntoView({ behavior: 'smooth' });
                        }).catch(function(error) {
                            showStatus('Error converting file: ' + error.result.error.message, 'error');
                            console.error('Error converting file:', error);
                        });
                    },
                    error: function(error) {
                        showStatus('Error uploading file: ' + error.responseJSON.error.message, 'error');
                        console.error('Error uploading file:', error);
                    }
                });
            };
            
            reader.readAsArrayBuffer(file);
        }
        
        // Initialize the Google Drive API on page load
        function handleClientLoad() {
            showStatus('Loading Google Drive API...', 'info');
            gapi.load('client:auth2', loadDriveApi);
        }
        
        // Start the process when the page loads
        window.onload = function() {
            // For demonstration purposes, we're not automatically initializing the API
            // In a real implementation, you would call handleClientLoad() here
            showStatus('Please select a Word document to convert', 'info');
        };
    </script>
</body>
</html>
Next Post Previous Post