Chắc chắn rồi! Có lẽ chúng ta cần điều chỉnh cách thức tải file hoặc kiểm tra toàn bộ quy trình để đảm bảo mỗi bước đều hoạt động chính xác. Dưới đây là cách tiếp cận khác để chắc chắn bạn có thể tải file Excel về từ dữ liệu JSON.
Mã HTML và JavaScript hoàn chỉnh
Copy<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tải về dữ liệu đã lọc</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.16.2/xlsx.full.min.js"></script>
</head>
<body>
<div id="data-container"></div>
<button id="download-button">Tải về dữ liệu đã lọc</button>
<span id="filter-id" style="display: none;">giá trị lọc của bạn</span>
<script>
async function fetchData(filterValue) {
try {
const response = await fetch('https://script.google.com/macros/s/AKfycbx-yzMq8NuqSYZjsurXtU-EFFM_JCtd_1ySsgvX97vW8DnqeP7LHuE6nwBbPCpM_2CIPA/exec');
if (!response.ok) {
throw new Error('Network response was not ok');
}
const data = await response.json();
displayData(data, filterValue);
setDownloadLink(data, filterValue);
} catch (error) {
console.error('Fetch error: ', error);
}
}
function displayData(data, filterValue) {
let html = '<table border="1">';
data.forEach(item => {
if (item['bai'] === filterValue) { // Thay 'bai' bằng tên cột bạn muốn lọc
html += '<tr>';
html += `<td>${item['cot1']}</td>`;
html += `<td>${item['cot2']}</td>`; // Thay 'cot1' và 'cot2' bằng tên các cột bạn muốn hiển thị
html += '</tr>';
}
});
html += '</table>';
document.getElementById('data-container').innerHTML = html;
}
function setDownloadLink(data, filterValue) {
const filteredData = data.filter(item => item['bai'] === filterValue);
const worksheet = XLSX.utils.json_to_sheet(filteredData);
const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, "FilteredData");
const wbout = XLSX.write(workbook, { bookType: 'xlsx', type: 'binary' });
function s2ab(s) {
const buf = new ArrayBuffer(s.length);
const view = new Uint8Array(buf);
for (let i = 0; i < s.length; i++) view[i] = s.charCodeAt(i) & 0xFF;
return buf;
}
const blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' });
const url = URL.createObjectURL(blob);
const downloadButton = document.getElementById('download-button');
downloadButton.onclick = () => {
const a = document.createElement('a');
a.href = url;
a.download = 'filtered_data.xlsx';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
};
}
document.addEventListener('DOMContentLoaded', () => {
const filterElement = document.getElementById('filter-id');
const filterValue = filterElement ? filterElement.innerText.trim() : '';
fetchData(filterValue);
});
</script>
</body>
</html>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tải về dữ liệu đã lọc</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.16.2/xlsx.full.min.js"></script>
</head>
<body>
<div id="data-container"></div>
<button id="download-button">Tải về dữ liệu đã lọc</button>
<span id="filter-id" style="display: none;">giá trị lọc của bạn</span>
<script>
async function fetchData(filterValue) {
try {
const response = await fetch('https://script.google.com/macros/s/AKfycbx-yzMq8NuqSYZjsurXtU-EFFM_JCtd_1ySsgvX97vW8DnqeP7LHuE6nwBbPCpM_2CIPA/exec');
if (!response.ok) {
throw new Error('Network response was not ok');
}
const data = await response.json();
displayData(data, filterValue);
setDownloadLink(data, filterValue);
} catch (error) {
console.error('Fetch error: ', error);
}
}
function displayData(data, filterValue) {
let html = '<table border="1">';
data.forEach(item => {
if (item['bai'] === filterValue) { // Thay 'bai' bằng tên cột bạn muốn lọc
html += '<tr>';
html += `<td>${item['cot1']}</td>`;
html += `<td>${item['cot2']}</td>`; // Thay 'cot1' và 'cot2' bằng tên các cột bạn muốn hiển thị
html += '</tr>';
}
});
html += '</table>';
document.getElementById('data-container').innerHTML = html;
}
function setDownloadLink(data, filterValue) {
const filteredData = data.filter(item => item['bai'] === filterValue);
const worksheet = XLSX.utils.json_to_sheet(filteredData);
const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, "FilteredData");
const wbout = XLSX.write(workbook, { bookType: 'xlsx', type: 'binary' });
function s2ab(s) {
const buf = new ArrayBuffer(s.length);
const view = new Uint8Array(buf);
for (let i = 0; i < s.length; i++) view[i] = s.charCodeAt(i) & 0xFF;
return buf;
}
const blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' });
const url = URL.createObjectURL(blob);
const downloadButton = document.getElementById('download-button');
downloadButton.onclick = () => {
const a = document.createElement('a');
a.href = url;
a.download = 'filtered_data.xlsx';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
};
}
document.addEventListener('DOMContentLoaded', () => {
const filterElement = document.getElementById('filter-id');
const filterValue = filterElement ? filterElement.innerText.trim() : '';
fetchData(filterValue);
});
</script>
</body>
</html>
Đăng nhận xét