时间戳

首页 > 解决方案 > html div表导出excel

html - html div表导出excel

问题描述

在我有开源项目的 UI 上， https://github.com/townsean/canvas-pixel-color-counter

所以我想做的是：-

我想将 HTML 数据导出到 excel 中，所有输入 div 计数数据，之前我使用导出到 excel 插件，但它只是导出 HTML 表格数据而不是输入字段数据

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <meta charset="utf-8">
        <meta name="author" content="Ashley G">
        <meta name="description" content="A web app that counts the number of pixels in an image per a unique color.">
        <title>Pixel Color Counter</title>
        <link rel="shortcut icon" href="./assets/favicon.ico" type="image/x-icon">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <link href="https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="style.css">
        <button onclick="exportTableToExcel('tblData')">Export Table Data To Excel File</button>
    </head>
    <body>
        <header>
            <h1>Pixel Color Counter</h1>
        </header>
        <main>
            <!-- About Section -->
            <section id="about">
                <h2>Count Pixels by Color</h2>
                <p>Pixel Color Counter is vanilla JS web application that accepts an image file (selected by the user) and displays the total number of pixels per a unique color. </p>
            </section> 
            <!-- Upload Image Section -->
            <section id="upload-container">
                <h2>Upload an Image</h2>
                <div>
                    <label for="image">Choose an image:</label>
                    <input type="file" id="image" name="image" accept="image/png, image/jpeg">
                </div>
                <canvas id="canvas"></canvas> 
            </section>
            <!-- Pixel Color Swatches and Count -->
            <section id="pixel-count-container" class="pixel-count-container invisible">
                <h2>Pixel Counts by Color</h2>                
                <p><span id="color-count"></span> unique colors</p>
                <div id="color-swatches" class="color-swatches">
                </div>
            </section> 
        </main>        
        <div id="wait-indicator" class="invisible">
            <img src="assets/ashley_sprite.gif">
            <p>Please Wait</p>
        </div> 
        <footer>
            <a href="https://github.com/townsean/canvas-pixel-color-counter">Copyright &copy; 2019 Ashley Grenon</a>
        </footer>    
        <script src="counter.js"></script>
        <script src="main.js"></script>
    </body>
</html>

和jQuery

并反击 js 这个项目

// https://developer.mozilla.org/en-US/docs/Tools/Performance/Scenarios/Intensive_JavaScript

self.addEventListener("message", go);

/**
 * 
 */
function go(message) {
    const imageData = message.data.imageData;
    const colorCounts = countPixels(imageData);

    self.postMessage({
        "command": "done",
        colorCounts
    });
}

/**
 * Counts the number of pixels per a unique color
 * https://stackoverflow.com/questions/19499500/canvas-getimagedata-for-optimal-performance-to-pull-out-all-data-or-one-at-a
 */
function countPixels(data) {   
    const colorCounts = {};
    for(let index = 0; index < data.length; index += 4) {
        const rgba = `rgba(${data[index]}, ${data[index + 1]}, ${data[index + 2]}, ${(data[index + 3] / 255)})`;

        if (rgba in colorCounts) {
            colorCounts[rgba] += 1;
        } else {
            colorCounts[rgba] = 1;
        }
    }    
    return colorCounts;
}

和 main.js

// To avoid Uncaught DOMException while using Web Workers
// Run python -m http.server 8000
// https://stackoverflow.com/questions/8170431/using-web-workers-for-drawing-using-native-canvas-functions
const worker = new Worker('./counter.js');

handleWorkerCompletion = (message) => {
    if(message.data.command == "done") {
        // draw color swatches
        this.drawColorSwatch(message.data.colorCounts);
        worker.removeEventListener("message", handleWorkerCompletion);
                
        // hide wait indicator
        const waitIndicator = document.getElementById("wait-indicator");
        waitIndicator.classList.add("invisible");
        waitIndicator.classList.remove("fadein");

        // scroll to color swatch section
        const pixelCountContainer = document.getElementById('pixel-count-container'); 
        pixelCountContainer.scrollIntoView({ behavior: 'smooth'});

        const colorCountLabel = document.getElementById('color-count');
        colorCountLabel.innerText = Object.keys(message.data.colorCounts).length;
    }
};

/**
 * Event listener for when the file upload has been updated
 */
document.getElementById("image").addEventListener('change', (e) => {
    this.loadImage(e.target.files[0]);
}, false);

/**
 * Given a valid image file, load the image into the canvas
 * Good explantation the the image data: https://css-tricks.com/manipulating-pixels-using-canvas/#article-header-id-1
 */
loadImage = (file) => {
    const url = window.URL.createObjectURL(file);
    const img = new Image();
    img.src = url;    
    img.onload = () => {
        this.reset();

        const canvas = document.getElementById('canvas');
        canvas.width = img.width;
        canvas.height = img.height;

        const context = canvas.getContext('2d');  
        context.drawImage(img, 0, 0);   
                
        const uploadContainer = document.getElementById('upload-container');        
        uploadContainer.appendChild(img);

        const imageData = context.getImageData(0, 0, canvas.width, canvas.height);

        window.URL.revokeObjectURL(this.src);
        worker.addEventListener("message", handleWorkerCompletion, false);
        worker.postMessage({
            "imageData": imageData.data
        });
        
        const waitIndicator = document.getElementById("wait-indicator");
        waitIndicator.classList.remove("invisible");
        waitIndicator.classList.add("fadein");
    }  
};

/**
 * 
 */
drawColorSwatch = (colorCount) => {
    let colorSwatches = document.getElementById('color-swatches');

    for(const color in colorCount) {
        const container = document.createElement("section");
        const swatch = document.createElement("div");
        const colorCountLabel = document.createElement("span");

        container.classList.add("color-swatch-container");

        swatch.classList.add("color-swatch");
        swatch.style.background = color;
        swatch.title = color;

        colorCountLabel.innerHTML = `: ${colorCount[color]}`;

        container.appendChild(swatch);
        container.appendChild(colorCountLabel);
        colorSwatches.appendChild(container);
    }
    
    let pixelCountContainer = document.getElementById('pixel-count-container');
    pixelCountContainer.classList.remove('invisible');
};

/**
 * Clear DOM of past color counting
 */
reset = () => {
    let pixelCountContainer = document.getElementById('pixel-count-container');
    pixelCountContainer.classList.add('invisible');

    let colorSwatches = document.getElementById('color-swatches');
    while (colorSwatches.firstChild) {
        colorSwatches.removeChild(colorSwatches.firstChild);
    }
    
    let uploadContainer = document.getElementById('upload-container');
    let image = uploadContainer.getElementsByTagName('img')[0];  

    if (image) {
        uploadContainer.removeChild(image);
    }

    const canvas = document.getElementById('canvas');
    const context = canvas.getContext('2d');  
    context.clearRect(0, 0, canvas.width, canvas.height);
}

function exportTableToExcel(color-swatches, filename = ''){
    var downloadLink;
    var dataType = 'application/vnd.ms-excel';
    var tableSelect = document.getElementById(color-swatches);
    var tableHTML = tableSelect.outerHTML.replace(/ /g, '%20');
    
    // Specify file name
    filename = filename?filename+'.xls':'excel_data.xls';
    
    // Create download link element
    downloadLink = document.createElement("a");
    
    document.body.appendChild(downloadLink);
    
    if(navigator.msSaveOrOpenBlob){
        var blob = new Blob(['\ufeff', tableHTML], {
            type: dataType
        });
        navigator.msSaveOrOpenBlob( blob, filename);
    }else{
        // Create a link to the file
        downloadLink.href = 'data:' + dataType + ', ' + tableHTML;
    
        // Setting the file name
        downloadLink.download = filename;
        
        //triggering the function
        downloadLink.click();
    }
}

标签： htmljqueryexcelexport

解决方案

推荐阅读