XLSX.pro

 <!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8" />

  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

  <title>XLSX.pro - Universal XLSX Converter</title>

  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">

  <style>

    :root {

      --bg-color: #121212;

      --container-bg: #1f1f1f;

      --input-bg: #2a2a2a;

      --text-color: #e0e0e0;

      --button-color: #0f52ba;

      --button-hover: #0c3e8a;

      --accent: #6ec1e4;

    }


    body {

      margin: 0;

      font-family: 'Inter', sans-serif;

      background: var(--bg-color);

      color: var(--text-color);

      display: flex;

      justify-content: center;

      align-items: center;

      min-height: 100vh;

      background-image: radial-gradient(rgba(255,255,255,0.02) 1px, transparent 1px);

      background-size: 40px 40px;

    }


    .container {

      background: var(--container-bg);

      padding: 30px;

      border-radius: 12px;

      box-shadow: 0 0 20px rgba(0,0,0,0.5);

      max-width: 600px;

      width: 100%;

    }


    h1 {

      color: var(--accent);

      text-align: center;

      margin-bottom: 20px;

    }


    input, select, button {

      width: 100%;

      padding: 12px;

      margin: 10px 0;

      background-color: var(--input-bg);

      color: var(--text-color);

      border: 1px solid #333;

      border-radius: 6px;

      font-size: 16px;

    }


    button {

      background-color: var(--button-color);

      font-weight: 600;

      cursor: pointer;

      transition: background 0.3s ease;

    }


    button:hover {

      background-color: var(--button-hover);

    }


    #download-link {

      display: block;

      text-align: center;

      margin-top: 15px;

      color: var(--accent);

      font-weight: 600;

      text-decoration: none;

    }

  </style>

</head>

<body>

  <div class="container">

    <h1>XLSX.pro - Universal XLSX Converter</h1>

    <input type="file" id="file-input" accept=".xlsx"/>

    <select id="format-select">

      <option value="csv">Convert to CSV</option>

      <option value="json">Convert to JSON</option>

      <option value="html">Convert to HTML</option>

      <option value="pdf">Convert to PDF</option>

      <option value="xml">Convert to XML</option>

    </select>

    <button onclick="convert()">Convert</button>

    <a id="download-link" style="display:none;">Download</a>

    <div id="output"></div>

  </div>


  <!-- SheetJS & jsPDF Libraries -->

  <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>


  <script>

    function convert() {

      const fileInput = document.getElementById("file-input");

      const format = document.getElementById("format-select").value;

      const downloadLink = document.getElementById("download-link");


      if (!fileInput.files.length) {

        alert("Please upload an XLSX file.");

        return;

      }


      const reader = new FileReader();

      reader.onload = function (e) {

        const data = new Uint8Array(e.target.result);

        const workbook = XLSX.read(data, { type: "array" });

        const sheetName = workbook.SheetNames[0];

        const sheet = workbook.Sheets[sheetName];

        let output, mime, fileExt;


        switch (format) {

          case "csv":

            output = XLSX.utils.sheet_to_csv(sheet);

            mime = "text/csv";

            fileExt = "csv";

            break;

          case "json":

            output = JSON.stringify(XLSX.utils.sheet_to_json(sheet), null, 2);

            mime = "application/json";

            fileExt = "json";

            break;

          case "html":

            output = XLSX.utils.sheet_to_html(sheet);

            mime = "text/html";

            fileExt = "html";

            break;

          case "pdf":

            const html = XLSX.utils.sheet_to_html(sheet);

            const { jsPDF } = window.jspdf;

            const doc = new jsPDF();

            doc.html(html, {

              callback: function (doc) {

                doc.save("converted.pdf");

              },

              x: 10,

              y: 10

            });

            return;

          case "xml":

            const jsonData = XLSX.utils.sheet_to_json(sheet);

            output = "<root>\\n";

            jsonData.forEach((row) => {

              output += "  <row>\\n";

              Object.entries(row).forEach(([key, value]) => {

                output += `    <${key}>${value}</${key}>\\n`;

              });

              output += "  </row>\\n";

            });

            output += "</root>";

            mime = "application/xml";

            fileExt = "xml";

            break;

        }


        const blob = new Blob([output], { type: mime });

        const url = URL.createObjectURL(blob);

        downloadLink.href = url;

        downloadLink.download = "converted." + fileExt;

        downloadLink.textContent = "Download " + fileExt.toUpperCase();

        downloadLink.style.display = "inline-block";

      };


      reader.readAsArrayBuffer(fileInput.files[0]);

    }

  </script>

</body>

</html>

Comments

Post a Comment

Popular posts from this blog

PDF Converter website

  Hey Muhammed, Your brother wants to build a universal PDF converter that runs entirely in the browser (no APIs, just HTML and JavaScript) to convert various file types to PDF. He’s trying to figure out if it’s worth the effort based on what conversions are possible and how much people search for them. Here’s a concise summary of what we discussed, tailored for you as the web developer: What the Tool Does The goal is a browser-based PDF converter that lets users upload files (e.g., images, Word docs) and download them as PDFs, all processed client-side. No server or external APIs, just JavaScript libraries and HTML for the UI. Feasible Conversion Types After analyzing search data and JavaScript libraries, you can build a tool that supports 10 types of conversions to PDF, all in the browser. These cover the most popular and technically doable options: Image to PDF (JPG, PNG, HEIC, TIFF, BMP) Example: Turn a JPG photo into a PDF. Search Volume: ~300,000 monthly searches (e.g., ...
Read more

XLSX.in

 <!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8" />   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>   <title>XLSX.in - Universal XLSX Converter/title>   <style>     :root {       --primary-color: #FF9933;     /* Saffron */       --secondary-color: #138808;   /* India Green */       --accent-color: #0F52BA;      /* Royal Blue */       --background-color: #F8F8F8;  /* Off White */       --text-color: #222222;        /* Charcoal Black */       --cta-color: #800000;         /* Deep Maroon */     }     body {       font-family: Arial, sans-serif;       background: linear-gradient(to bottom, #f8f8f8, #ffffff);       color: var(--tex...
Read more