studio-variable/geoproject-app
4
0
Fork 0
Code Issues 3 Pull requests Projects Releases Packages Wiki Activity Actions

fix: inline all styles when printing PagedJS content

Browse source 
Collect all CSS (inline styles and stylesheet rules) and embed
them directly in the print document. This ensures styles are
available even when printed from a new window.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
isUnknown 2025-12-08 14:02:41 +01:00
parent ded9744485
commit 36d3420125
1 changed files with 50 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

66
src/App.vue
View file

@ -275,32 +275,66 @@ watch(
);
// Handle Cmd+P / Ctrl+P to print the iframe content
const handlePrint = (event) => {
const handlePrint = async (event) => {
if ((event.metaKey || event.ctrlKey) && event.key === 'p') {
event.preventDefault();
const frame = activeFrame.value;
if (frame && frame.contentDocument) {
// Get the full HTML content of the iframe
const content = frame.contentDocument.documentElement.outerHTML;
const doc = frame.contentDocument;
// Open a new window with the content
// Collect all styles (inline and from stylesheets)
let allStyles = '';
// Get inline <style> tags
doc.querySelectorAll('style').forEach((style) => {
allStyles += style.outerHTML;
});
// Get computed styles from linked stylesheets
for (const sheet of doc.styleSheets) {
try {
for (const rule of sheet.cssRules) {
allStyles += rule.cssText + '\n';
}
} catch (e) {
// Cross-origin stylesheet, try to fetch it
if (sheet.href) {
try {
const response = await fetch(sheet.href);
const css = await response.text();
allStyles += css;
} catch (fetchError) {
console.warn('Could not fetch stylesheet:', sheet.href);
}
}
}
}
// Get the body content (already rendered by PagedJS)
const bodyContent = doc.body.innerHTML;
// Build the print document
const printContent = `
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>${allStyles}</style>
</head>
<body>${bodyContent}</body>
</html>
`;
// Open print window
const printWindow = window.open('', '_blank');
printWindow.document.write(content);
printWindow.document.write(printContent);
printWindow.document.close();
// Wait for content to load then print
printWindow.onload = () => {
// Wait for rendering then print
setTimeout(() => {
printWindow.print();
printWindow.close();
};
// Fallback if onload doesn't fire
setTimeout(() => {
if (!printWindow.closed) {
printWindow.print();
printWindow.close();
}
}, 500);
}, 100);
}
}
};