html div复制到excel,jquery - html div table to export excel - Stack Overflow

so what I am trying to do is :-

I want to export HTML data into excel,all input div count data, earlier I was using exporting to excel plugin but it is only exporting the HTML table data not input fields data

Pixel Color Counter

Export Table Data To Excel File

Pixel Color Counter

Count Pixels by Color

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.

Upload an Image

Choose an image:

Pixel Counts by Color

unique colors

Please Wait

Copyright © 2019 Ashley Grenon

and jquery

and counter js this project

// 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;

}

and 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();

}

}