170 lines
3.6 KiB
HTML
170 lines
3.6 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>File Download</title>
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
font-family: Arial, sans-serif;
|
||
|
|
max-width: 600px;
|
||
|
|
margin: 50px auto;
|
||
|
|
padding: 20px;
|
||
|
|
text-align: center;
|
||
|
|
background-color: #121212;
|
||
|
|
color: #f5f5f5;
|
||
|
|
}
|
||
|
|
h1 {
|
||
|
|
color: #f5f5f5;
|
||
|
|
}
|
||
|
|
.container {
|
||
|
|
margin: 40px 0;
|
||
|
|
}
|
||
|
|
button {
|
||
|
|
padding: 20px 40px;
|
||
|
|
font-size: 18px;
|
||
|
|
background-color: #2563eb;
|
||
|
|
color: #f5f5f5;
|
||
|
|
border: 1px solid #1d4ed8;
|
||
|
|
border-radius: 8px;
|
||
|
|
cursor: pointer;
|
||
|
|
margin: 10px;
|
||
|
|
transition: background-color 0.3s, transform 0.1s;
|
||
|
|
box-shadow: 0 10px 25px rgba(37, 99, 235, 0.25);
|
||
|
|
}
|
||
|
|
button:hover {
|
||
|
|
background-color: #1d4ed8;
|
||
|
|
}
|
||
|
|
button:active {
|
||
|
|
transform: scale(0.98);
|
||
|
|
}
|
||
|
|
#status {
|
||
|
|
margin-top: 30px;
|
||
|
|
font-size: 18px;
|
||
|
|
color: #86efac;
|
||
|
|
min-height: 30px;
|
||
|
|
}
|
||
|
|
.description {
|
||
|
|
color: #9ca3af;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>File Download Test</h1>
|
||
|
|
<p class="description">Click the button below to download a sample PDF file</p>
|
||
|
|
|
||
|
|
<div class="container">
|
||
|
|
<button id="downloadBtn">Download PDF Report</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="status"></div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
const downloadBtn = document.getElementById('downloadBtn');
|
||
|
|
const status = document.getElementById('status');
|
||
|
|
|
||
|
|
// Generate a simple PDF content
|
||
|
|
function generatePDF() {
|
||
|
|
// Create a simple PDF structure with text content
|
||
|
|
const pdfContent = `%PDF-1.4
|
||
|
|
1 0 obj
|
||
|
|
<<
|
||
|
|
/Type /Catalog
|
||
|
|
/Pages 2 0 R
|
||
|
|
>>
|
||
|
|
endobj
|
||
|
|
2 0 obj
|
||
|
|
<<
|
||
|
|
/Type /Pages
|
||
|
|
/Kids [3 0 R]
|
||
|
|
/Count 1
|
||
|
|
>>
|
||
|
|
endobj
|
||
|
|
3 0 obj
|
||
|
|
<<
|
||
|
|
/Type /Page
|
||
|
|
/Parent 2 0 R
|
||
|
|
/Resources <<
|
||
|
|
/Font <<
|
||
|
|
/F1 <<
|
||
|
|
/Type /Font
|
||
|
|
/Subtype /Type1
|
||
|
|
/BaseFont /Helvetica
|
||
|
|
>>
|
||
|
|
>>
|
||
|
|
>>
|
||
|
|
/MediaBox [0 0 612 792]
|
||
|
|
/Contents 4 0 R
|
||
|
|
>>
|
||
|
|
endobj
|
||
|
|
4 0 obj
|
||
|
|
<<
|
||
|
|
/Length 110
|
||
|
|
>>
|
||
|
|
stream
|
||
|
|
BT
|
||
|
|
/F1 24 Tf
|
||
|
|
50 700 Td
|
||
|
|
(Sample PDF Report) Tj
|
||
|
|
0 -50 Td
|
||
|
|
/F1 12 Tf
|
||
|
|
(Generated by Skyvern Test) Tj
|
||
|
|
0 -30 Td
|
||
|
|
(This is a test PDF file for download automation.) Tj
|
||
|
|
ET
|
||
|
|
endstream
|
||
|
|
endobj
|
||
|
|
xref
|
||
|
|
0 5
|
||
|
|
0000000000 65535 f
|
||
|
|
0000000009 00000 n
|
||
|
|
0000000058 00000 n
|
||
|
|
0000000115 00000 n
|
||
|
|
0000000317 00000 n
|
||
|
|
trailer
|
||
|
|
<<
|
||
|
|
/Size 5
|
||
|
|
/Root 1 0 R
|
||
|
|
>>
|
||
|
|
startxref
|
||
|
|
476
|
||
|
|
%%EOF`;
|
||
|
|
return pdfContent;
|
||
|
|
}
|
||
|
|
|
||
|
|
downloadBtn.addEventListener('click', function() {
|
||
|
|
// Generate PDF content
|
||
|
|
const pdfContent = generatePDF();
|
||
|
|
|
||
|
|
// Create a Blob from the PDF content
|
||
|
|
const blob = new Blob([pdfContent], { type: 'application/pdf' });
|
||
|
|
|
||
|
|
// Create a download link
|
||
|
|
const url = window.URL.createObjectURL(blob);
|
||
|
|
const a = document.createElement('a');
|
||
|
|
a.href = url;
|
||
|
|
a.download = 'sample_report.pdf';
|
||
|
|
|
||
|
|
// Trigger download
|
||
|
|
document.body.appendChild(a);
|
||
|
|
a.click();
|
||
|
|
|
||
|
|
// Clean up
|
||
|
|
setTimeout(() => {
|
||
|
|
document.body.removeChild(a);
|
||
|
|
window.URL.revokeObjectURL(url);
|
||
|
|
}, 100);
|
||
|
|
|
||
|
|
// Update status
|
||
|
|
status.textContent = 'PDF downloaded successfully!';
|
||
|
|
status.style.color = '#86efac';
|
||
|
|
|
||
|
|
setTimeout(() => {
|
||
|
|
status.textContent = '';
|
||
|
|
}, 3000);
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|