Inconsistencies of pdf output between desktop and mobile view

Hello, good afternoon. I want to asking about inconsistencies of the result of pdf content and output in desktop view and mobile view. i use same javascript code but it deliver different result. mobile view (calculation_result (1)) full content output while desktop view (calculator_result) is not full content pdf output

Can you share link to page where you used it?

http://kcg.co.id/service-calculator

On 1/12/2024 at 9:46 AM, freddy24 said:

http://kcg.co.id/service-calculator

What is password?

sorry for late reply the Password is: Su4p!nan

How to open Calculation Results? I tried clicking on Compare & Calculate, but it doesn't show like your screenshot

hello, can you explain this?

2 minutes ago, freddy24 said:

hello, can you explain this?

No. All I see is a blank white image.

Can you share a few details? Website URL and what the problem is?

the website is: kcg.co.id. I convert the pdf output (white blank one) into jpg extension because it doesn't accept .pdf file the password is: Su4p!nan

I can't see the PDF on your homepage

i mean when i add code block and my custom code in the home page. I executed the code a the pdf output in my homepage became white blank paper in pdf version

 

so i can't add the code block without interfering with squarespace custiomized website. Temporarily The Code Block Is in Service Calculator Page

Still not sure what you mean.

13 minutes ago, freddy24 said:

The Code Block Is in Service Calculator Page

Can see this page. Link?

kcg.co.id/service-calculator

I don't see a PDF on that page.

i mean pdf generated when click submit (i build service calculator btw)

when i tested it's output is not consistent (the content is not what i expected)

you have to put project cost and month duration input and then click calculate next is fill the overlay form consist of email, name, address, company. And then click submit you can see the download page

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.8.1/jspdf.plugin.autotable.min.js"
integrity="sha512-8+n4PSpp8TLHbSf28qpjRfu51IuWuJZdemtTC1EKCHsZmWi2O821UEdt6S3l4+cHyUQhU8uiAAUeVI1MUiFATA=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://kit.fontawesome.com/00592a3b5e.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"
integrity="sha512-GsLlZN/3F2ErC5ifS5QtgpiJtWd43JWSuIgh7mbzZ8zBps+dvLusV+eNQATqgA/HdeKFVgA5v3S/cIrLF7QnIg=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div id="calculator">
    <h2>Service Calculator</h2>

      <label for="serviceOffering">Service Offering:</label>
      <select id="serviceOffering">
        <option value="payroll">Payroll</option>
        <option value="bpjs">BPJS</option>
        <option value="cloud-accounting">Cloud Accounting</option>
        <option value="migration">Migration</option>
        <option value="tax-compliance">Tax Compliance</option>
        <option value="regulatory-and-compliance">Regulatory & Compliance</option>
        <option value="tax-audit-assistance">Tax Audit Assistance</option>
        <option value="audit-assistance">Audit Assistance</option>
        <option value="esg-service">ESG Service</option>
        <option value="itgc">ITGC</option>
        <option value="itac">ITAC</option>
        <option value="cloud-software-training">Cloud Software Training</option>
        <option value="cloud-software-implementation">Cloud Software Implementation</option>
        <option value="software-integration">Software Integration</option>
        <option value="privacy-and-security">Privacy & Security</option>
        <!-- Add other service options as needed -->
    </select>

    <label for="projectCost">Project Cost:</label>
    <input type="number" id="projectCost" placeholder="enter Project cost"><br>

    <label for="monthDuration">Month Duration:</label>
    <input type="number" id="monthDuration" placeholder="enter month
duration"><br>

    <label for="currencySelect">Currency:</label>
    <select id="currencySelect" onchange="updateCurrencyStatement()">
            <option value="$">USD</option>
            <option value="€">EUR</option>
            <option value="Rp">IDR</option>
            <option value="₹">INR</option>
            <option value="S$">SGD</option>
            <option value="£">GBP</option>
            <!-- Add other currency options as needed -->
    </select>

     <!-- Display the total cost dynamically -->

     <div id="totalCostResult"></div>

    <button onclick="showOverlay()">Compare</button>
    <button onclick="calculateTotalCost()" id="calculateButton">Calculate</button>
    </div>

    <div id="overlay" class="overlay" style="display: none;">
      <div class="overlay-content">
        <span class="close" onclick="closeOverlay()">&times;</span>
        <label for="email">Email:</label>
        <input type="text" id="email">
        <label for="name">Name:</label>
        <input type="text" id="name">
        <label for="address">Address:</label>
        <input type="text" id="address">
        <label for="company">Company:</label>
        <input type="text" id="company">
        <button onclick="generatePDF()" id="generatePDFButton">Submit</button>
      </div>
      <script>
// Declare currencySymbol globally
var currencySymbol;

// Function to calculate total cost
function calculateTotalCost() {
  var projectCost = parseFloat(document.getElementById('projectCost').value) || 0;
  var monthDuration = parseInt(document.getElementById('monthDuration').value) || 0;

  var totalCost = projectCost * monthDuration;

  // Get the currency symbol using the selected currency code
  var selectedCurrency = document.getElementById('currencySelect').value;
  var currencySymbol = getCurrencySymbol(selectedCurrency);

  // Display total cost dynamically
  var formattedTotalCost = currencySymbol + totalCost.toFixed(2);
  document.getElementById('totalCostResult').innerText = `Total Cost: ${formattedTotalCost}`;
}

// Function to get currency symbol based on currency code
function getCurrencySymbol(currencyCode) {
  // Implement logic to map currency codes to symbols
  switch (currencyCode) {
    case '$':
      return '$';
    case '€':
      return '€';
    case 'Rp':
      return 'Rp';
    case '₹':
      return '₹';
    case 'S$':
      return 'S$';
    case '£':
      return '£';
    // Add other cases as needed
    default:
      return '';
  }
}

function showOverlay() {
  document.getElementById('overlay').style.display = 'flex';
}

function closeOverlay() {
  document.getElementById('overlay').style.display = 'none';
  // Reset the flag
  ated = false;
}

function validateAndSend() {
  
  var email = document.getElementById('email').value;
  var name = document.getElementById('name').value;
  var address = document.getElementById('address').value;
  var company = document.getElementById('company').value;

  if (validateEmail(email)) {
    // Trigger the calculation of total cost before sending the email
    calculateTotalCost();
    sendEmail(email, name, address, company);

     } else {
    alert('Invalid email address. Please try again.');
  }
}

function validateEmail(email) {
  var regex = /\S+@\S+\.\S+/;
  return regex.test(email);
}

function sendEmail(email, name, address, company) {
  var service = document.getElementById('service').value;
  var cost = parseFloat(document.getElementById('cost').value);
  var duration = parseFloat(document.getElementById('duration').value);
  var currency = document.getElementById('currency').value;

  var totalCost = cost * duration;
  var resultText = `Service Offering: ${service}\nTotal Cost: ${currency} ${totalCost}, Month Duration: ${duration} months`;

  // For simplicity, alert is used here. In real-world scenarios, you would send an email from the server.
  alert(`Email sent to: ${email}\nName: ${name}\nAddress: ${address}\nCompany: ${company}\n\n${resultText}`);
  closeOverlay();
}
// Function to initialize the script
function init() {
  // Attach events after the DOM is fully loaded
  var calculateButtons = document.querySelectorAll('.calculate-button');
  calculateButtons.forEach(function (button) {
    button.addEventListener('click', calculateTotalCost);
  });

  document.getElementById('calculateButton').addEventListener('click', calculateTotalCost);
  document.getElementById('currencySelect').addEventListener('change', updateCurrencyStatement);
  document.getElementById('generatePDFButton').addEventListener('click', function () {
    // Call the updateCurrencyStatement function with a callback to generate PDF afterward
     updateCurrencyStatement(function() {
    setTimeout(function() {
      generatePDF();
    }, 1000); // Adjust the delay as needed
  });
});

  // Call the updateCurrencyStatement function
  updateCurrencyStatement();
}

// Function to update currency statement
function updateCurrencyStatement(callback) {
  var selectedCurrency = document.getElementById('currencySelect').value;

  // Update the global currency symbol
  currencySymbol = getCurrencySymbol(selectedCurrency);

  // Update the currency statement on the page
  document.getElementById('currencySelect').textContent = 'Currency: ' + currencySymbol;

  // Update the total cost when the currency changes
  calculateTotalCost();

  // Call the callback function if provided
  if (callback && typeof callback === 'function') {
    callback();
  }
}     

// Function to generate PDF
function generatePDF() {
  
  // Trigger the calculation of total cost before generating the PDF
  calculateTotalCost();

  // Wait for a short delay to ensure the total cost is updated
  setTimeout(function () {
    // Get the dynamically updated total cost
    var totalCost = parseFloat(document.getElementById('totalCostResult').innerText) || 0;
  
    // Get input values
    var email = document.getElementById('email').value;
    var name = document.getElementById('name').value;
    var address = document.getElementById('address').value;
    var company = document.getElementById('company').value;
  
    // Get service offering selected option
    var serviceOfferingSelect = document.getElementById('serviceOffering');
    var selectedServiceOffering = serviceOfferingSelect.options[serviceOfferingSelect.selectedIndex].text;
  
    // Get project cost, month duration, and currency
    var projectCost = parseFloat(document.getElementById('projectCost').value) || 0;
    var monthDuration = parseInt(document.getElementById('monthDuration').value) || 0;
    var currencySelect = document.getElementById('currencySelect');
    var selectedCurrency = currencySelect.options[currencySelect.selectedIndex].text;
  
    // Calculate total cost
    var totalCost = projectCost * monthDuration;
  
    // Create other company details
    var otherCompanyDetails = {
      serviceOffering: 'Some Service', // Replace with the actual service offering
      projectCost: 5000,
      monthDuration: 12,
      currency: 'USD',
    };
  
    // Calculate total cost for the other company based on the provided logic
    otherCompanyDetails.totalCost = otherCompanyDetails.projectCost * otherCompanyDetails.monthDuration;
  
    console.log('Selected Service Offering:', selectedServiceOffering);
  
    // Use selectedServiceOffering in the switch statement
    switch (selectedServiceOffering.toLowerCase()) {
      case 'payroll':
        otherCompanyDetails.serviceOffering = 'Payroll';
        otherCompanyDetails.projectCost = 500;
        otherCompanyDetails.monthDuration = 10;
        break;
  
      case 'bpjs':
        otherCompanyDetails.serviceOffering = 'BPJS';
        otherCompanyDetails.projectCost = 1000;
        otherCompanyDetails.monthDuration = 20;
        break;
  
      case 'cloud-accounting':
        otherCompanyDetails.serviceOffering = 'Cloud Accounting';
        otherCompanyDetails.projectCost = 12100;
        otherCompanyDetails.monthDuration = 20;
        otherCompanyDetails.currency = 'USD';
        otherCompanyDetails.totalCost = otherCompanyDetails.projectCost * otherCompanyDetails.monthDuration;
        break;
  
      case 'migration':
        otherCompanyDetails.serviceOffering = 'Migration';
        otherCompanyDetails.projectCost = 112;
        otherCompanyDetails.monthDuration = 23;
        otherCompanyDetails.currency = 'USD';
        break;
  
      case 'tax-compliance':
        otherCompanyDetails.serviceOffering = 'Tax Compliance';
        otherCompanyDetails.projectCost = 554;
        otherCompanyDetails.monthDuration = 4;
        otherCompanyDetails.currency = 'USD';
        break;
  
      case 'regulatory-and-compliance':
        otherCompanyDetails.serviceOffering = 'Regulatory & Compliance';
        otherCompanyDetails.projectCost = 2112;
        otherCompanyDetails.monthDuration = 212;
        otherCompanyDetails.currency = 'USD';
        break;
  
      case 'tax-audit-assistance':
        otherCompanyDetails.serviceOffering = 'Tax Audit Assistance';
        otherCompanyDetails.projectCost = 6000;
        otherCompanyDetails.monthDuration = 48;
        otherCompanyDetails.currency = 'USD';
        break;
  
      case 'audit-assistance':
        otherCompanyDetails.serviceOffering = 'Audit Assistance';
        otherCompanyDetails.projectCost = 12;
        otherCompanyDetails.monthDuration = 24;
        otherCompanyDetails.currency = 'USD';
        break;
  
      case 'esg-service':
        otherCompanyDetails.serviceOffering = 'ESG Service';
        otherCompanyDetails.projectCost = 80;
        otherCompanyDetails.monthDuration = 76;
        otherCompanyDetails.currency = 'USD';
        break;
  
      case 'itgc':
        otherCompanyDetails.serviceOffering = 'ITGC';
        otherCompanyDetails.projectCost = 12;
        otherCompanyDetails.monthDuration = 24;
        otherCompanyDetails.currency = 'USD';
        break;
  
      case 'itac':
        otherCompanyDetails.serviceOffering = 'ITAC';
        otherCompanyDetails.projectCost = 54;
        otherCompanyDetails.monthDuration = 23;
        otherCompanyDetails.currency = 'USD';
        break;
  
      case 'cloud-software-training':
        otherCompanyDetails.serviceOffering = 'Cloud Software Training';
        otherCompanyDetails.projectCost = 105;
        otherCompanyDetails.monthDuration = 40;
        otherCompanyDetails.currency = 'USD';
        break;
  
      case 'cloud-software-implementation':
        otherCompanyDetails.serviceOffering = 'Cloud Software Implementation';
        otherCompanyDetails.projectCost = 45;
        otherCompanyDetails.monthDuration = 45;
        otherCompanyDetails.currency = 'USD';
        break;
  
      case 'software-integration':
        otherCompanyDetails.serviceOffering = 'Software Integration';
        otherCompanyDetails.projectCost = 121;
        otherCompanyDetails.monthDuration = 1;
        otherCompanyDetails.currency = 'USD';
        break;
  
      case 'privacy-and-security':
        otherCompanyDetails.serviceOffering = 'Privacy & Security';
        otherCompanyDetails.projectCost = 200;
        otherCompanyDetails.monthDuration = 99;
        otherCompanyDetails.currency = 'USD';
        break;
  
      default:
        console.error('Unexpected service offering:', selectedServiceOffering);
        break;
    }
  
    // Trim input so that
    selectedServiceOffering = selectedServiceOffering.trim().toLowerCase();
  
    // Update the totalCost after setting values in the switch
    otherCompanyDetails.totalCost = otherCompanyDetails.projectCost * otherCompanyDetails.monthDuration;
  
    // Example: Add debugging statements
    console.log('Email:', email);
    console.log('Name:', name);
    console.log('Address:', address);
    console.log('Company:', company);
    console.log('Selected Service Offering:', selectedServiceOffering);
    console.log('Project Cost:', projectCost);
    console.log('Month Duration:', monthDuration);
    console.log('Selected Currency:', selectedCurrency);
    console.log('Total Cost:', totalCost);
    console.log('Other Company Service Offering:', otherCompanyDetails.serviceOffering);
    console.log('Other Company Project Cost:', otherCompanyDetails.projectCost);
    console.log('Other Month Duration:', otherCompanyDetails.monthDuration);
    console.log('Other Currency:', otherCompanyDetails.currency);
    console.log('Other Total Cost:', otherCompanyDetails.totalCost);
  
    // Create PDF content
    var pdfContent = `
      <h2>Calculation Result</h2>
      <p>Email: ${email}</p>
      <p>Name: ${name}</p>
      <p>Address: ${address}</p>
      <p>Company: ${company}</p>
      <hr>
      <h3>Service Offerings</h3>
      <p>Selected Service Offering: ${selectedServiceOffering}</p>
      <ul>
        <!-- Add service offerings here if needed -->
      </ul>
      <p>Project Cost: ${selectedCurrency} ${projectCost}</p>
      <p>Month Duration: ${monthDuration} months</p>
      <p>Currency: ${selectedCurrency}</p>
      <p>Total Cost: ${selectedCurrency} ${totalCost.toFixed(2)}</p>
      <hr>
      <p>Other Company Comparison</p>
      <ul>
        <li>Other Company Service Offering: ${otherCompanyDetails.serviceOffering}</li>
        <li>Other Company Project Cost: ${otherCompanyDetails.projectCost} ${otherCompanyDetails.currency}</li>
        <li>Other Company Month Duration: ${otherCompanyDetails.monthDuration} months</li>
        <li>Other Company Currency: ${otherCompanyDetails.currency}</li>
        <li>Other Company Total Cost: ${otherCompanyDetails.totalCost.toFixed(2)} ${otherCompanyDetails.currency}</li>
      </ul>
    `;
  
    // Generate PDF using html2pdf
    var pdfElement = document.createElement("div");
    pdfElement.innerHTML = pdfContent;
  
    var pdfOptions = {
      margin: 10,
      filename: 'calculation_result.pdf',
      image: { type: 'jpeg', quality: 0.98 },
      html2canvas: { scale: 2 },
      jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' },
    };
  
    // Generate PDF
    html2pdf(pdfElement, pdfOptions).outputPdf().then(function (pdf) {
      // Save or display the generated PDF as needed
      console.log('PDF generated successfully:', pdf);
  
      // Close the overlay after generating the PDF
      closeOverlay();
    })
    .catch(function (error) {
      // Handle any errors during PDF generation
      console.error('Error generating PDF:', error);
    });
  }, 0); // Set the timeout to 0 milliseconds to execute the function as soon as possible 
 }

// Function to update currency statement
function updateCurrencyStatement() {
  var selectedCurrency = document.getElementById('currencySelect').value;

  // Update the global currency symbol
  currencySymbol = getCurrencySymbol(selectedCurrency);

  // Update the currency statement on the page
  var currencyStatementElement = document.getElementById('currencyStatement');
  if (currencyStatementElement) {
    currencyStatementElement.textContent = 'Currency: ' + currencySymbol;
  }

  // Update the total cost when the currency changes
  calculateTotalCost();
}
// Use window.onload to ensure the DOM is fully loaded before executing the code
window.onload = init;
</script>

can you detect what's wrong with this code